flutter基础布局之ExpansionPanelList

最新推荐文章于 2024-07-25 07:27:17 发布

原创最新推荐文章于 2024-07-25 07:27:17 发布 · 887 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ExpansionPane

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文介绍如何使用Flutter中的ExpansionPanelList组件创建动态面板，并管理其展开状态。通过实例展示如何创建Item对象、生成面板列表以及响应面板切换。

内容可以折叠的面板

ExpansionPanelList里面一般包含有ExpansionPanel

// stores ExpansionPanel state information
class Item {
  Item({
    required this.expandedValue,
    required this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

List<Item> generateItems(int numberOfItems) {
  return List.generate(numberOfItems, (int index) {
    return Item(
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

// ...

List<Item> _data = generateItems(8);

@override
Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Container(
      child: _buildPanel(),
    ),
  );
}

Widget _buildPanel() {
  return ExpansionPanelList(
    expansionCallback: (int index, bool isExpanded) {
      setState(() {
        _data[index].isExpanded = !isExpanded;
      });
    },
    children: _data.map<ExpansionPanel>((Item item) {
      return ExpansionPanel(
        headerBuilder: (BuildContext context, bool isExpanded) {
          return ListTile(
            title: Text(item.headerValue),
          );
        },
        body: ListTile(
          title: Text(item.expandedValue),
          subtitle: Text('To delete this panel, tap the trash can icon'),
          trailing: Icon(Icons.delete),
          onTap: () {
            setState(() {
              _data.removeWhere((currentItem) => item == currentItem);
            });
          }
        ),
        isExpanded: item.isExpanded,
      );
    }).toList(),
  );
}