Flutter - 如何在删除元素后维护 ExpansionTiles 列表的 _isExpanded 状态？答案

【问题标题】：Flutter - How to maintain _isExpanded status of ExpansionTiles list after deleting an element?Flutter - 如何在删除元素后维护 ExpansionTiles 列表的 _isExpanded 状态？
【发布时间】：2019-02-17 15:50:09
【问题描述】：

问题是关于Flutter 框架。

我使用 ListView.builder 函数构建了一个 ExpansionTiles 列表。当打开一个 ExpansionTile 然后删除它时，其他 ExpansionTile 在列表中按预期向上移动。但是，现在展开了替换已删除 ExpansionTile 的 ExpansionTile。这是一个animation 显示该问题。现在的问题是，如何让替换的 ExpansionTile 保持之前的状态。

这里是问题的源代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ItemList(),
    );
  }
}

class ItemList extends StatefulWidget {
  ItemList({Key key}) : super(key: key);

  @override
  _ItemListState createState() => _ItemListState();
}

class _ItemListState extends State<ItemList> {
  List<String> items;
  List<int> ids;
  List<Widget> widgetItem;

  @override
  void initState() {
    super.initState();
    items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
    ids = [1, 2, 3, 4, 5];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return ExpansionTile(
            title: Text('Title'),
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(items[index]),
                  IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () => setState(() => items.removeAt(index)),
                  ),
                ],
              ),
            ],
          );
        },
      ),
    );
  }
}

【问题讨论】：

您也可以使用items 中的值作为ValueKey 的值，如果它们是唯一的，那么您不需要从items 中删除和 ids。在你的例子中，我不是 100% 的 ids。
直接将项目用作键的好主意，既然您这么说，ID 对于示例来说真的是多余的。

标签： listview dart flutter

【解决方案1】：

只需确保项目具有唯一键，以便 Flutter 可以识别已删除索引处的新 ExpansionTile 是不同的

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ItemList(),
    );
  }
}

class ItemList extends StatefulWidget {
  ItemList({Key key}) : super(key: key);

  @override
  _ItemListState createState() => _ItemListState();
}

class _ItemListState extends State<ItemList> {
  List<String> items;
  List<int> ids;
  List<Widget> widgetItem;

  @override
  void initState() {
    super.initState();
    items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
    ids = [1, 2, 3, 4, 5];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return ExpansionTile(
            key: ValueKey('${ids[index]}'),
            title: Text('Title'),
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(items[index]),
                  IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () => setState(() {
                          items.removeAt(index);
                          ids.removeAt(index);
                        }),
                  ),
                ],
              ),
            ],
          );
        },
      ),
    );
  }
}

另见https://www.youtube.com/watch?v=kn0EOS-ZiIc

【讨论】：