Flutter进阶实战 14-20 展开闭合列表ExpansionPanelList案例

前言：

       前面介绍的只是一个单个的展开闭合组件，你当然可以把这个组件作为List元素，组成一个数组，形成列表。不过Flutter也很贴心的为提供了一个ExpansionPanelList Widget，它可以实现展开闭合的列表功能。需要注意的是这个列表必须放在可滑动组件中使用，否则会报错。

实现效果：

知识点：

一、ExpansionPanelList 常用属性

• expansionCallback:点击和交互的回掉事件，有两个参数，第一个是触发动作的索引，第二个是布尔类型的触发值。
• children:列表的子元素，里边多是一个List数组。

二、ExpandStateBean 自定义类

为了方便管理制作了一个ExpandStateBean类，里边就是两个状态，一个是是否展开isOpen,另一个索引值。代码如下:

class ExpandStateBean{
  var isOpen;
  var index;
  ExpandStateBean(this.index,this.isOpen);
}

实现代码（expansion_panel_list.dart）：

import 'package:flutter/material.dart';

class ExpansionPanelListDemo extends StatefulWidget {
  _ExpansionPanelListDemoState createState() => _ExpansionPanelListDemoState();
}

class _ExpansionPanelListDemoState extends State<ExpansionPanelListDemo> {
  List<int> mList;   //组成一个int类型数组，用来控制索引 
  List<ExpandStateBean> expandStateList;  //开展开的状态列表,ExpandStateBean是自定义的类
  
  //构造方法，调用这个类的时候自动执行
  _ExpansionPanelListDemoState(){
      mList=new List();
      expandStateList=new List();
      //遍历两个List进行赋值
      for(int i=0;i<19;i++){
        mList.add(i);
        expandStateList.add(ExpandStateBean(i,false));//item初始状态为闭着的
      }
  }

  //修改展开与闭合的内部方法
  _setCurrentIndex(int index,isExpand){
    setState(() {
       //遍历可展开状态列表
       expandStateList.forEach((item){
          if(item.index==index){
            //取反，经典取反方法
            item.isOpen=!isExpand;
          }
       });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("expansion panel list"),
        ),
        //加入可滚动组件(ExpansionPanelList必须使用可滚动的组件)
        body: SingleChildScrollView(
            child: ExpansionPanelList(
               //交互回调属性，里面是个匿名函数
               expansionCallback: (index,bol){
                 //调用内部方法
                 _setCurrentIndex(index, bol);
               },
               //进行map操作，然后用toList再次组成List
               children: mList.map((index){
                  //返回一个组成的ExpansionPanel
                  return ExpansionPanel(
                    headerBuilder: (context,isExpanded){  
                      return ListTile(
                        title: Text('This is No.$index'),
                      );
                    },
                    body: ListTile(
                      title: Text('expansion no.$index'),
                    ),
                    isExpanded: expandStateList[index].isOpen
                  );
               }).toList(),
            ),
        ),
    );
  }
}

//list中item状态自定义类
class ExpandStateBean{
  var isOpen;   //item是否打开
  var index;    //item中的索引
  ExpandStateBean(this.index,this.isOpen);
}