一統天下 flutter - widget 列表類: ExpansionPanelList - 可展開列表
示例如下:
lib\widget\list\expansion_panel_list.dart
/*
* ExpansionPanelList - 可展開列表
*
* ExpansionPanelList 中的每一項是 ExpansionPanel
* 點擊 ExpansionPanel 的 header 後就會顯示或隱藏 ExpansionPanel 的 body
*/
import 'package:flutter/material.dart';
import '../../helper.dart';
class ExpansionPanelListDemo extends StatefulWidget {
const ExpansionPanelListDemo({Key? key}) : super(key: key);
@override
_ExpansionPanelListDemoState createState() => _ExpansionPanelListDemoState();
}
class _ExpansionPanelListDemoState extends State<ExpansionPanelListDemo> {
final List<_MyItem> _dataList = _MyItem.generateItems(8);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("title")),
backgroundColor: Colors.orange,
/// ExpansionPanelList 是不可滾動的，如需滾動則可以在外面加一層 SingleChildScrollView
body: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: ExpansionPanelList(
/// 展開/收縮動畫的時長
animationDuration: const Duration(milliseconds: 500),
/// 展開後，header 的內邊距
expandedHeaderPadding: const EdgeInsets.all(10),
/// 分隔線的顏色
dividerColor: Colors.green,
/// 展開/收縮之後的回調
expansionCallback: (int index, bool isExpanded) {
setState(() {
_dataList[index].isExpanded = !isExpanded;
});
},
/// 構造列表中的每一個可展開項
children: _dataList.map<ExpansionPanel>((_MyItem item) {
return ExpansionPanel(
/// 背景
backgroundColor: Colors.red,
/// 點擊 header 後是否觸發展開/收縮（如果設置爲 false 則只有點擊 header 右側的小三角才能觸發展開/收縮）
canTapOnHeader: true,
/// header（點擊 header 則顯示或隱藏 body）
headerBuilder: (BuildContext context, bool isExpanded) {
return Align(
alignment: Alignment.centerLeft,
child: MyTextSmall(item.headerValue),
);
},
/// body（點擊 header 則顯示或隱藏 body）
body: Container(
width: double.infinity,
height: 200,
alignment: Alignment.center,
color: Colors.blue,
child: MyText(item.bodyValue),
),
/// 是否是展開狀態
isExpanded: item.isExpanded,
);
}).toList(),
),
),
);
}
}
class _MyItem {
_MyItem({
required this.bodyValue,
required this.headerValue,
this.isExpanded = false,
});
String bodyValue;
String headerValue;
bool isExpanded;
static List<_MyItem> generateItems(int numberOfItems) {
return List<_MyItem>.generate(numberOfItems, (int index) {
return _MyItem(
headerValue: 'header $index',
bodyValue: 'body $index',
);
});
}
}