listview - Flutter - 如何在删除元素后保持 ExpansionTiles 列表的 _isExpanded 状态？

Question

问题是关于 Flutter 的框架。

我已经使用 ListView.builder 函数构建了一个 ExpansionTiles 列表。当打开一个 ExpansionTile 然后将其删除时，其他 ExpansionTiles 按预期在列表中向上移动。但是，现在替换已删除的 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)),
                  ),
                ],
              ),
            ],
          );
        },
      ),
    );
  }
}

Answer 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