Flutter（34）：Material组件之ExpansionPanelList、ExpansionPanel、ExpansionPanelRadio、ExpansionTile


Flutter教学目录持续更新中

Github源代码持续更新中

1.Expansion介绍

  • ExpansionPanelList/ExpansionPanel：实现扩展列表
  • ExpansionPanelList.radio/ExpansionPanelRadio：实现单扩展列表，只会存在一个展开的条目
  • ExpansionTile：扩展面板
注意事项：
  • ExpansionPanelList必须在可滚动组件中，例如SingleChildScrollView
  • ExpansionPanel内加入ListView的时候需要设置shrinkWrap: true不然是无法显示的，因为ExpansionPanel自己也是个高度无法确定的组件，有兴趣的可以看一下这篇文章：Flutter（33）：Material组件之ListTile、RefreshIndicator、ListView、Divider

2.ExpansionPanelList属性

  • children = const []：
  • expansionCallback：展开收起的回调
  • animationDuration = kThemeAnimationDuration：动画时长
  • expandedHeaderPadding = _kPanelHeaderExpandedDefaultPadding：展开时头部内边距
  • dividerColor：分割线颜色

3.ExpansionPanel

  • headerBuilder：头部widget
  • body：子widget
  • isExpanded = false：是否展开
  • canTapOnHeader = false：头部是否可点击

1601804193(1).png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
class _ExpansionPanelListPageState extends State<ExpansionPanelListPage> {
  List<ExpandedBean> _dataList = [];
  List<ExpansionPanel> _widgetList = [];

  _myExpansionPanel(ExpandedBean bean) {
    return ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return Text('ExpansionPanel header');
      },
      body: ListView(
        shrinkWrap: true,
        children: [
          Text('ExpansionPanel body'),
          Text('ExpansionPanel body'),
          Text('ExpansionPanel body'),
        ],
      ),
      isExpanded: bean.isExpanded,
      canTapOnHeader: true,
    );
  }

  _myExpansionPanelList() {
    return ExpansionPanelList(
      children: _getWidgetList(),
      expansionCallback: (int panelIndex, bool isExpanded) {
        print('panelIndex = $panelIndex isExpanded = $isExpanded');
        setState(() {
          _dataList[panelIndex].isExpanded = !isExpanded;
        });
      },
      animationDuration: Duration(milliseconds: 200),
      expandedHeaderPadding: EdgeInsets.all(10),
      dividerColor: Colors.red,
    );
  }

  _getWidgetList() {
    _widgetList.clear();
    _dataList.forEach((element) {
      _widgetList.add(_myExpansionPanel(element));
    });
    return _widgetList;
  }

  @override
  void initState() {
    super.initState();
    _initData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ExpansionPanelList/ExpansionPanel/ExpansionPanelRadio'),
      ),
      body: SingleChildScrollView(
        child: _myExpansionPanelList(),
      ),
    );
  }
}

4.ExpansionPanelList.radio属性

this.children = const []：
this.expansionCallback：展开收起的回调
this.animationDuration = kThemeAnimationDuration：动画时长
this.initialOpenPanelValue：初始默认展开的子widget
this.expandedHeaderPadding = _kPanelHeaderExpandedDefaultPadding：展开时头部内边距

5.ExpansionPanelRadio属性

  • value：
  • headerBuilder：ExpansionPanelHeaderBuilder 头部widget
  • body：子widget
  • canTapOnHeader = false：头部是否可点击

1601804170(1).png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
  _initWidgetList2() {
    _dataList.forEach((element) {
      _widgetList2.add(_myExpansionPanelRadio(element));
    });
  }

  _myExpansionPanelListRadio() {
    return ExpansionPanelList.radio(
      children: _widgetList2,
      initialOpenPanelValue: _widgetList2[1],
      expansionCallback: (int panelIndex, bool isExpanded) {
        print('panelIndex = $panelIndex isExpanded = $isExpanded');
      },
      animationDuration: Duration(milliseconds: 200),
      expandedHeaderPadding: EdgeInsets.all(10),
      dividerColor: Colors.red,
    );
  }

  _myExpansionPanelRadio(ExpandedBean bean) {
    return ExpansionPanelRadio(
      value: bean,
      headerBuilder: (context, isExpanded) {
        return Text('ExpansionPanelRadio header');
      },
      body: ListView(
        shrinkWrap: true,
        children: [
          Text('ExpansionPanelRadio body'),
          Text('ExpansionPanelRadio body'),
          Text('ExpansionPanelRadio body'),
        ],
      ),
      canTapOnHeader: true,
    );
  }

6.ExpansionTile属性

  • leading：头widget
  • title：标题
  • subtitle：副标题
  • backgroundColor：展开时背景色
  • onExpansionChanged：展开回调
  • children = const []：子widget
  • trailing：尾部widget
  • initiallyExpanded = false：初始是否展开
  • maintainState = false：
  • tilePadding：内边距
  • expandedCrossAxisAlignment：次轴对齐
  • expandedAlignment：主轴对齐
  • childrenPadding：子内容内边距

1601804222(1).png

1601804232(1).png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  _myExpansionTile() {
    return ExpansionTile(
      leading: Icon(Icons.account_circle),
      title: Text('ExpansionTile title'),
      subtitle: Text('ExpansionTile subtitle'),
      // backgroundColor: Colors.amber,
      onExpansionChanged: (isExpanded) {
        print('isExpanded = $isExpanded');
      },
      children: [
        Text('ExpansionTile children'),
        Text('ExpansionTile children'),
        Text('ExpansionTile children'),
        Text('ExpansionTile children'),
      ],
      trailing: Icon(Icons.print),
      initiallyExpanded: true,
      maintainState: false,
      tilePadding: EdgeInsets.all(10),
      expandedAlignment: Alignment.center,
      expandedCrossAxisAlignment: CrossAxisAlignment.center,
      childrenPadding: EdgeInsets.all(10),
    );
  }

下一节：Material组件之Stepper

Flutter（35）：Material组件之Stepper

Flutter教学目录持续更新中

Github源代码持续更新中