Question

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

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(),
  );
}

我试图弄清楚一个星期。请让我知道要进行哪些更改。任何帮助将不胜感激。

Answer 1

您可以通过将isExpanded的所有值分别设置为true或false分别为expandAll或crashAll来实现。

示例：

实施一种设置所有值的方法。

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

要展开按钮单击，只需致电

_setAll(true);

要崩溃

_setAll(false);

希望有帮助！

Answer 2

我想打开一个但关闭所有其他的，这就是我想出来的。对于所有可能想要相同的人：

expansionCallback: (int index, bool expanded) {
        if (expanded == false) {
          for (final subop in state.options) {
            if (state.options[index] == subop) {
              setState(() {
                state.options[index].isExpanded = true;
              });
            }
            setState(() {
              subop.isExpanded = false;
            });
          }
        }

        setState(() {
          state.options[index].isExpanded = !expanded;
        });
      },

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

2 个答案: