第一百二十一回 扩展列表

我们在上一章回中介绍了MaterialBanner相关的内容，本章回中将介绍 扩展列表.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在本章回中介绍的扩展列表和普通的列表类似，不同之处在于列表中的每个项目最右侧有一个倒三角，点击倒三角可以展开项目中的具体的内容,再点击一次可以隐藏具体的内容，只剩下一个标题。鉴于列表中每个项目都可以隐藏和展开，我们称包含这种项目的列表为扩展列表。

Flutter提供了ExpansionPanelList组件来表示扩展列表，扩展列表中的项目使用ExpansionPane组件表示。官方称列表项中的倒三角为ExpansionIcon.本章回中将详细介绍这些组件的使用方法。

使用方法

ExpansionPanelList

和其它的组件一样，ExpansionPanelList组件与提供了相关的属性来控制自己，下面是常用的属性：

• expandIconColor属性:用来控制扩展图标的颜色，就是我们在文中叫的倒三角；
• dividerColor属性: 用来控制列表项目之间的分隔线的颜色；
• expansionCallback属性: 它是方法类型，点击列表中任意项目时将会回调该属性对应的方法；
• children属性:用来存放列表中的项目，它可以存放多个项目，不过要求项目类型为ExpansionPanel;

ExpansionPanel

接下来我们介绍一下ExpansionPanel组件，它主要用来充当ExpansionPanelList中项目，该组件提供了相关的属性来控制自己，详细如下：

• headerBuilder属性: 主要用来创建组件，被创建的组件用来当作列表项目的标题；
• body属性:主要用来存放列表项目中具体的内容，项目被隐藏时看不到该项目的内容，项目被展开时才可以看到该项内容；
• isExpanded属性: 用来控制该组件是否被隐藏，默认值为false，表示隐藏body中的内容，只显示标题中的内容；
• canTapOnHeader:用来控制是否可以点击标题来展开或者隐藏body中的内容，默认值是false；也就是说默认通过倒三角隐藏或者展开body中的内容；
• backgroundColor:用来控制项目的背景颜色，包含标题和body中的所有背景色；

此外，还有一个ExpansionPanelRadio组件，它是ExpansionPanel类的子类，主要用来实现类似单选列表一样的互斥功能：扩展列表中所有子项目中有且只有一个项目能展开。它和ExpansionPanel组件的使用方法类似，只是多了个value属性，我在这里就不详细介绍了，大家可以自己动手实践。

示例代码

final Map<int,bool> _isExpandList = {0:false,1:false,2:false};
ExpansionPanelList(
  expandIconColor: Colors.green,
  dividerColor: Colors.red,
  ///点击列表中内容时的回调函数，通过此属性修改isExpanded属性中的值，实现扩展/隐藏列表的功能
  expansionCallback: (index,expanded){
    debugPrint('index: $index, value: $expanded');
    _isExpandList[index] = !expanded;
    setState(() {
    });
  },
  children: [
    ExpansionPanel(
      headerBuilder: (context,isExpand){
        return const SizedBox(height:30,child: Text('header 0'));
      },
      body: const Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          ListTile(title: Text("item 1"),leading: Icon(Icons.podcasts),trailing: Icon(Icons.check),),
          ListTile(title: Text("item 2"),leading: Icon(Icons.podcasts),trailing: Icon(Icons.check),),
          ListTile(title: Text("item 3"),leading: Icon(Icons.podcasts),trailing: Icon(Icons.check),),
        ],
      ),
      isExpanded: _isExpandList[0] ?? false,
      canTapOnHeader: true,
    ),
    ExpansionPanel(
      headerBuilder: (context,isExpand) {
      return const Text('header1');
    },
      body: const Text('body1'),
      ///默认是扩展还是隐藏，默认值为false
      isExpanded: _isExpandList[1] ?? false,
      ///点击header是否调用回调方法，默认是false,最好设置为true,不然只有点击倒三角时才有反应
      canTapOnHeader: true,
      backgroundColor: Colors.blue,
    ),
  ],
),

上面的代码中的关键地方有相关的注释，以方便大家理解代码。代码中有一个地方需要说明：使用expansionCallback属性来控制isExpanded属性的值，进而列表项的隐藏与展开。我们定义了一个Map，它的key就是扩展列表中项目的索引值，它的值是布尔值。这样可以控制扩展列表中所有的子项目。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

看官们，与"扩展列表"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!