时间戳

首页 > 解决方案 > 如何在expansionPanelList中展开全部或全部折叠 - Flutter

flutter - 如何在expansionPanelList中展开全部或全部折叠 - Flutter

问题描述

我正在尝试在flutter中创建一个expansionPanelList，它有一个通用按钮来同时展开全部或折叠全部面板。

class Item {
  Item({
    this.expandedValue,
    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(),
  );
}

我试图解决这个问题一个星期。请让我知道要进行哪些更改。任何帮助，将不胜感激。

标签： flutterdartflutter-layout

解决方案

您可以通过将所有值分别设置isExpanded为任一true或falseexpandAll 或collapseAll 来实现。

例子：

实现一个方法来设置所有的值。

void _setAll(bool isExpanded) {
    for (final data in _data) {
      data.isExpanded = isExpanded ?? false;
    }
    setState(() {});
}

要扩展按钮单击，只需调用

_setAll(true);

崩溃

_setAll(false);

希望有帮助！

推荐阅读