在Flutter開發中，其實系統已經給我們提供了一個可靠的二級列表展開的API（ExpansionPanelList），我們先看系統的二級列表展開效果，一次只能展開一個，用ExpansionPanelList.radio實現

由此可見，已經能很大部分滿足我們的需求了，

但是…在使用過程中，我發現無法改變右側icon的位置，或者是想隱藏icon，只能改其顏色

expandIconColor: Colors.white,

但是，這個時候cell的點擊事件只有下圖中黃色區域

如果想讓整個cell都能被點擊，只能設置

canTapOnHeader: true,

但是，如果設置了這個屬性，改變icon顏色的這個expandIconColor就失效了，所有在使用過程中，不能很好的耦合自身項目需求，而我們的項目，是要讓icon緊挨著在text的后面，如下圖

查閱了很多資料，如果使用系統提供的API，不能實現項目中想要的效果，無奈只能自己造輪子了，實現效果如下

使用自定義的，自己想怎么布局就怎么布局，沒那么多耦合性，下面直接貼出代碼，文章末尾會貼出系統和自定義兩種方法分別實現的demo

先開系統實現、代碼里面都標準了注釋，這里就不一一贅述了，如果有什么問題，歡迎下方留言

import 'dart:convert';import 'package:demo/model/model.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';class SecondListPage extends StatefulWidget {const SecondListPage({super.key});@overrideState<SecondListPage> createState() => _SecondListPageState();
}class _SecondListPageState extends State<SecondListPage> {final List<ListModel> _dataList = [];@overridevoid initState() {super.initState();_loadData();}_loadData() async {_dataList.clear();String jsonString = await rootBundle.loadString('assets/json/list.json');Map<String, dynamic> dict = jsonDecode(jsonString);_dataList.addAll(dict['data'].map<ListModel>((e) => ListModel.fromJson(e)).toList());setState(() {});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('系統二級列表'),),body: SingleChildScrollView(child: Container(child: _buildExpansionPanel(),),),);}Widget _buildExpansionPanel() {return ExpansionPanelList.radio(initialOpenPanelValue: _dataList[0].id, //默認展開第一個expandIconColor:Colors.white, //設置icon的顏色，因為設置了canTapOnHeader: true，所以這里無效dividerColor: const Color.fromARGB(0, 233, 219, 219),expandedHeaderPadding: const EdgeInsets.all(0),materialGapSize: 0,// 設置底部陰影大小elevation: 0,children: _dataList.map<ExpansionPanelRadio>((item) {return ExpansionPanelRadio(canTapOnHeader: true, //點擊區域backgroundColor: Colors.red,value: item.id!, //唯一標識headerBuilder: (context, isExpanded) {return Container(padding: const EdgeInsets.all(16.0),child: Text(item.title!,style: const TextStyle(color: Colors.white,),),);},body: ListView.builder(padding: const EdgeInsets.all(0),shrinkWrap: true,physics: const NeverScrollableScrollPhysics(),itemCount: item.subData!.length,itemExtent: 76.0,itemBuilder: (context, index) {return Container(color: Colors.green,child: ListTile(title: Text(item.subData![index].title!),),);},),);}).toList(),);}
}

自定義實現代碼

import 'dart:convert';import 'package:demo/model/model.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';class SecondListViewPage extends StatefulWidget {const SecondListViewPage({super.key});@overrideState<SecondListViewPage> createState() => _SecondListViewPageState();
}class _SecondListViewPageState extends State<SecondListViewPage> {final List<ListModel> _dataList = []; //列表數據List listData = []; //處理是否展開和展開動畫的數據final bool _isRadio = true; //是否只展開一個，默認是final double _cellHeight = 40.0; //title的高度final double _itemHeight = 40.0; //展開的cell的高度@overridevoid initState() {super.initState();_loadData();}@overridevoid dispose() {for (var listItem in listData) {listItem.animationController.dispose();}super.dispose();}_loadData() async {_dataList.clear();String jsonString = await rootBundle.loadString('assets/json/list.json');Map<String, dynamic> dict = jsonDecode(jsonString);_dataList.addAll(dict['data'].map<ListModel>((e) => ListModel.fromJson(e)).toList());for (var i = 0; i < _dataList.length; i++) {ListItem item = ListItem();//處理數據，給每個cell都新增一個isExpended屬性item.isExpanded = i == 0 ? true : false; //默認第一個展開if (i == 0) {item.animationController.forward(); //第一個默認展開之后需要改變圖片的旋轉方向}listData.add(item);}setState(() {});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('自定義二級列表'),),body: ListView.builder(itemCount: _dataList.length,itemBuilder: (context, index) {ListItem item = listData[index];return Column(children: [GestureDetector(onTap: () {setState(() {item.isExpanded = !item.isExpanded;if (_isRadio) {for (var i = 0; i < listData.length; i++) {if (i != index) {listData[i].isExpanded = false;}if (listData[i].isExpanded) {listData[i].animationController.forward();} else {listData[i].animationController.reverse();}}} else {if (listData[index].isExpanded) {listData[index].animationController.forward();} else {listData[index].animationController.reverse();}}});},child: Container(padding: const EdgeInsets.all(10.0),color: Colors.green,height: _cellHeight,child: Row(children: [// 顯示title的widget，可以自定義Text('${_dataList[index].title}'),const SizedBox(width: 5.0),AnimatedBuilder(animation: item.animation,builder: (context, child) {return Transform.rotate(angle: item.animation.value * 3.14, // 180度對應的弧度值child: const Icon(Icons.arrow_drop_down), //這里可以替換成自定義的圖片);},),],),),),AnimatedContainer(color: Colors.yellow,duration: const Duration(milliseconds: 200),height: item.isExpanded? _dataList[index].subData!.length * _itemHeight: 0.0,child: item.isExpanded? SingleChildScrollView(child: Column(children: _dataList[index].subData!.map((e) {return Container(alignment: Alignment.centerLeft,height: _itemHeight,child: Text(e.title!),);}).toList(),),): null,),],);},),);}
}class ListItem {bool isExpanded; //是否展開AnimationController animationController; //每個title展開或者關閉的時候，icon的旋轉動畫late Animation<double> animation; //ListItem({this.isExpanded = false}): animationController = AnimationController(duration: const Duration(milliseconds: 200),vsync: TickerProviderImpl(),) {animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(parent: animationController,curve: Curves.easeInOut,),);}
}class TickerProviderImpl extends TickerProvider {@overrideTicker createTicker(TickerCallback onTick) {return Ticker(onTick);}
}

簡書傳送門
GitHub傳送門