只允许展开一个 ExpansionTile

Posted

技术标签:

【中文标题】只允许展开一个 ExpansionTile【英文标题】:allow only one ExpansionTile to be expanded 【发布时间】:2019-06-29 07:10:14 【问题描述】:

我的问题是:

Flutter 中有没有办法只允许动态生成的 ListView 的一个 ExpansionTile 展开?

例如我的 ListView 有三个 ExpansionTiles,我单击第一个,它会展开。现在,如果我点击第二个,第二个应该会展开,而第一个应该会自行关闭。

我曾想过使用这个修改后的 ExpansionTile (https://***.com/a/48935106/3775957),但无法提出解决方案。

在我看来,它应该像将这个任务放入“onExpansionChanged”方法一样工作,但我不知道如何。

我这样构建我的 ListView:

ListView.builder(
   itemCount: myArray.length,
   itemBuilder: (context, index) 
          return ExpansionTile(
             backgroundColor: Colors.grey[200],
                key: PageStorageKey('$myArray[index].name'),
                title: Text(myArray[index].name),
                children: _buildChildrenWidgets(
                      groupName: myArray[index].name,
                      childrenNames: myArray[index].anotherArray),
                );
              );

【问题讨论】:

你在ExpansionTile构造函数中有initiallyExpanded,所以在创建一个新的ExpansionTile时使用它 我知道这一点。所有ExpansionTile 都使用initiallyExpanded 的默认值false 创建。问题出在运行时:当我点击另一个 Tile 以展开它时,其他展开的 Tile 保持展开状态。但我希望它们在另一个 Tile 展开时关闭。 所以构建你的三个ExpansionTiles on tap - 其中两个(未点击)将有initiallyExpanded: false,点击ExpansionTile将有initiallyExpanded: true 但是每次点击ExpansionTile 时重建布局的性能不是很重吗?因为我的 Tiles 不是静态的,所以我从带有 FutureBuilder 的 json 文件中加载它们的值 - 另外,ExpansionTile 没有 onTapListTileInkWell no - 它不会影响性能,它还有onExpansionChanged 【参考方案1】:

您可以使用ExpansionPanelList 像这样

 ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int i) 
                    return Card(
                      child: ExpansionPanelList(
                        expansionCallback: (int index, bool status) 
                          setState(() 
                            _activeMeterIndex =
                                _activeMeterIndex == i ? null : i;
                          );
                        ,
                        children: [
                          ExpansionPanel(
                            isExpanded: _activeMeterIndex == i,
                            headerBuilder:
                                (BuildContext context, bool isExpanded) =>
                                    Container(
                              padding: const EdgeInsets.only(left: 15.0),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                snapshot.data[i].category,
                              ),
                            ),
                            body: Column(
                              children: snapshot.data[i].subcategory.map((e) 
                                return Text(e);
                              ).toList(),
                            ),
                          ),
                        ],
                      ),
                    );
                  ,
                );

【讨论】:

以上是关于只允许展开一个 ExpansionTile的主要内容,如果未能解决你的问题,请参考以下文章

qt qtreewidget自动展开失效

如何在 HTML textarea 元素中强制单行?

Antd table的expandedRowRender额外展开行以及注意事项

如何在 Qt 中制作可展开/可折叠的部分小部件

折叠插件:一次只显示一个面板

展开反向正则表达式以允许 1 个空格字符