Flutter基础-059-ExpansionPanelList

一个item可以展开的列表

构造方法

const ExpansionPanelList.radio({
    Key key,
    this.children = const <ExpansionPanelRadio>[],// 列表项
    this.expansionCallback,// 某一个item展开关闭回调
    this.animationDuration = kThemeAnimationDuration,// 动画时间
    this.initialOpenPanelValue,//初始时那个index的item是展开的
  })

示例

代码

class _MyHomePageState extends State<MyHomePage> {
  int selectedIndex = -1;// 展开的那个index
  List<int> dataList;// 列表数据

  _MyHomePageState() {
    dataList = new List();
    for (int i = 0; i < 10; i++) {
      dataList.add(i);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ExpansionPanelList"),
        ),
        body: SingleChildScrollView(// 需要放到scrollview内
          child: ExpansionPanelList.radio(// radio表示只能有一个item展开
            children: dataList.map((index) {
              // 构件每个item
              return new ExpansionPanelRadio(
                // 每个item的列表展示项
                headerBuilder: (context, isExpanded) {
                  return new ListTile(
                    title: new Text('title$index'),
                  );
                },
                // 每个item 展开后的widget
                body: Card(
                  color: Colors.blue[400],
                  child: Column(
                    children: <Widget>[
                      Icon(Icons.add_alarm),
                      Icon(Icons.show_chart),
                      Text("ssss"),
                    ],
                  ),
                ),
                value: index,
              );
            }).toList(),
            initialOpenPanelValue: selectedIndex,
            expansionCallback: (index, bol) {
              setState(() {
                if (selectedIndex == index) {
                  index = -1;
                }
                selectedIndex = index;
              });
            },
          ),
        ));
  }
}