展开闭合列表案例

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

ExpansionPanelList 常用属性

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

属性详情：

(new) ExpansionPanelList ExpansionPanelList({Key key, 
List<ExpansionPanel> children = const <ExpansionPanel>[], 
void Function(int, bool) expansionCallback, 
Duration animationDuration = kThemeAnimationDuration})

ExpandStateBean 自定义类

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

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

主文件入口main.dart

import 'package:flutter/material.dart';
import 'expansion_tile.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Flutter Demo',
      theme: new ThemeData.dark(),
      home:ExpansionPanelListDemo()
    );
  }
}

expansion_panel_list.dart

这个文件我就直接上代码了，讲解我会在视频里说明，代码中我也进行了详细的注释。

import 'package:flutter/material.dart';
class ExpansionPanelListDemo extends StatefulWidget {
  _ExpansionPanelListDemoState createState() => _ExpansionPanelListDemoState();
}
class _ExpansionPanelListDemoState extends State<ExpansionPanelListDemo> {
  var currentPanelIndex = -1;
  List<int> mList;   //组成一个int类型数组，用来控制索引
  List<ExpandStateBean> expandStateList;    //开展开的状态列表， ExpandStateBean是自定义的类
  //构造方法，调用这个类的时候自动执行
  _ExpansionPanelListDemoState(){
    mList = new List(); 
    expandStateList = new List();
    //便利为两个List进行赋值
    for(int i=0;i<10;i++){
      mList.add(i);
      expandStateList.add(ExpandStateBean(i,false));
    }
  }
   //修改展开与闭合的内部方法
  _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")
      ),
      //加入可滚动组件
      body:SingleChildScrollView(
        child: ExpansionPanelList(
          //交互回掉属性，里边是个匿名函数
          expansionCallback: (index,bol){
            //调用内部方法
            _setCurrentIndex(index, bol);
          },
          children: mList.map((index){//进行map操作，然后用toList再次组成List
            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(),
        ),
      )
    );
  }
}
//自定义扩展状态类
class ExpandStateBean{
  var isOpen;
  var index;
  ExpandStateBean(this.index,this.isOpen);
}