在Flutter開發(fā)中，其實系統(tǒng)已經給我們提供了一個可靠的二級列表展開的API（ExpansionPanelList），我們先看系統(tǒng)的二級列表展開效果，一次只能展開一個，用ExpansionPanelList.radio實現(xiàn)
gif.gif
由此可見，已經能很大部分滿足我們的需求了，
但是....在使用過程中，我發(fā)現(xiàn)無法改變右側icon的位置，或者是想隱藏icon，只能改其顏色
expandIconColor: Colors.white,
但是，這個時候cell的點擊事件只有下圖中黃色區(qū)域
image.png
如果想讓整個cell都能被點擊，只能設置
canTapOnHeader: true,
但是，如果設置了這個屬性，改變icon顏色的這個expandIconColor就失效了，所有在使用過程中，不能很好的耦合自身項目需求，而我們的項目，是要讓icon緊挨著在text的后面，如下圖
image.png
查閱了很多資料，如果使用系統(tǒng)提供的API，不能實現(xiàn)項目中想要的效果，無奈只能自己造輪子了，實現(xiàn)效果如下
gif.gif
使用自定義的，自己想怎么布局就怎么布局，沒那么多耦合性，下面直接貼出代碼，文章末尾會貼出系統(tǒng)和自定義兩種方法分別實現(xiàn)的demo
先開系統(tǒng)實現(xiàn)、代碼里面都標準了注釋，這里就不一一贅述了，如果有什么問題，歡迎下方留言
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});
@override
State<SecondListPage> createState() => _SecondListPageState();
}
class _SecondListPageState extends State<SecondListPage> {
final List<ListModel> _dataList = [];
@override
void 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(() {});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('系統(tǒng)二級列表'),
),
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, //點擊區(qū)域
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(),
);
}
}
自定義實現(xiàn)代碼
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});
@override
State<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的高度
@override
void initState() {
super.initState();
_loadData();
}
@override
void 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(() {});
}
@override
Widget 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 {
@override
Ticker createTicker(TickerCallback onTick) {
return Ticker(onTick);
}
}
