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

class _ExpansionPanelListPageState extends State {
  List _dataList = [];
  List _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

  _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

  _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源代码持续更新中