在 Flutter 构建期间维护 StatefulWidget 的状态

Question

我有一个有状态小部件列表，用户可以在其中添加、删除列表中的项目并与之交互。从列表中删除项目会导致列表中的后续项目在移动以填充已删除的行时重建。这会导致这些小部件的状态数据丢失——尽管除了它们在屏幕上的位置外，它们应该保持不变。我希望能够保持列表中剩余项目的状态，即使它们的位置发生变化。

下面是我的应用程序的简化版本，主要由 StatefulWidgets 列表组成。用户可以通过浮动操作按钮将项目添加到列表（"tasks" 在我的应用程序中）或通过滑动将其删除。列表中的任何项目都可以通过点击项目来突出显示，这会改变项目背景颜色的状态。如果多个项目在列表中突出显示，并且删除了一个项目（列表中的最后一个项目除外），则转移以替换已删除项目的项目将丢失其状态数据（即背景颜色重置为透明）。我怀疑这是因为 _taskList 重建，因为我在删除任务后调用 setState() 来更新显示。我想知道在从 _taskList 中删除任务后是否有一种干净的方法来维护剩余任务的状态数据。

void main() => runApp(new TimeTrackApp());

class TimeTrackApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Time Tracker',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new TimeTrackHome(title: 'Task List'),
    );
  }
}

class TimeTrackHome extends StatefulWidget {
  TimeTrackHome({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _TimeTrackHomeState createState() => new _TimeTrackHomeState();
}

class _TimeTrackHomeState extends State<TimeTrackHome> {
  TextEditingController _textController;
  List<TaskItem> _taskList = new List<TaskItem>();

  void _addTaskDialog() async {
    _textController = TextEditingController();

    await showDialog(
        context: context,
        builder: (_) => new AlertDialog(
              title: new Text("Add A New Task"),
              content: new TextField(
                controller: _textController,
                decoration: InputDecoration(
                    border: InputBorder.none, hintText: 'Enter the task name'),
              ),
              actions: <Widget>[
                new FlatButton(
                    onPressed: () => Navigator.pop(context),
                    child: const Text("CANCEL")),
                new FlatButton(
                    onPressed: (() {
                      Navigator.pop(context);
                      _addTask(_textController.text);
                    }),
                    child: const Text("ADD"))
              ],
            ));
  }

  void _addTask(String title) {
    setState(() {
      // add the new task
      _taskList.add(TaskItem(
        name: title,
      ));
    });
  }

  @override
  void initState() {
    _taskList = List<TaskItem>();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Align(
        alignment: Alignment.topCenter,
        child: ListView.builder(
            padding: EdgeInsets.all(0.0),
            itemExtent: 60.0,
            itemCount: _taskList.length,
            itemBuilder: (BuildContext context, int index) {
              if (index < _taskList.length) {
                return Dismissible(
                  key: ObjectKey(_taskList[index]),
                  onDismissed: (direction) {
                    if(this.mounted) {
                      setState(() {
                        _taskList.removeAt(index);
                      });
                    }
                  },
                  child: _taskList[index],
                );
              }
            }),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _addTaskDialog,
        tooltip: 'Click to add a new task',
        child: new Icon(Icons.add),
      ),
    );
  }
}

class TaskItem extends StatefulWidget {
  final String name;

  TaskItem({Key key, this.name}) : super(key: key);
  TaskItem.from(TaskItem other) : name = other.name;

  @override
  State<StatefulWidget> createState() => new _TaskState();
}

class _TaskState extends State<TaskItem> {
  static final _taskFont =
  const TextStyle(fontSize: 26.0, fontWeight: FontWeight.bold);
  Color _color = Colors.transparent;

  void _highlightTask() {
    setState(() {
      if(_color == Colors.transparent) {
        _color = Colors.greenAccent;
      }
      else {
        _color = Colors.transparent;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Material(
        color: _color,
        child: ListTile(
          title: Text(
            widget.name,
            style: _taskFont,
            textAlign: TextAlign.center,
          ),
          onTap: () {
            _highlightTask();
          },
        ),
      ),
      Divider(
        height: 0.0,
      ),
    ]);
  }
}

Answer 1

我最终通过创建一个包含对 StatefulWidget 的引用并传递所有状态变量的中间体 class 解决了问题。状态 class 通过对中间体 class 的引用访问状态变量。包含和管理 StatefulWidget 列表的更高级别的小部件现在通过此中间件 class 访问 StatefulWidget。我对我的解决方案 "correctness" 并不完全有信心，因为我还没有找到任何其他示例，所以我仍然愿意接受建议。

我的中级class如下：

class TaskItemData {
  // StatefulWidget reference
  TaskItem widget;
  Color _color = Colors.transparent;

  TaskItemData({String name: "",}) {
    _color = Colors.transparent;
    widget = TaskItem(name: name, stateData: this,);
  }
}

我的 StatefulWidget 及其对应的 State classes 几乎没有变化，只是状态变量不再驻留在 State class 中。我还在我的 StatefulWidget 中添加了对中间 class 的引用，它在构造函数中进行了初始化。以前在我的状态 class 中使用的状态变量现在可以通过对中间状态 class 的引用来访问。修改后的StatefulWidget和Stateclasses如下：

class TaskItem extends StatefulWidget {
  final String name;
  // intermediate class reference
  final TaskItemData stateData;

  TaskItem({Key key, this.name, this.stateData}) : super(key: key);

  @override
  State<StatefulWidget> createState() => new _TaskItemState();
}

class _TaskItemState extends State<TaskItem> {
  static final _taskFont =
  const TextStyle(fontSize: 26.0, fontWeight: FontWeight.bold);

  void _highlightTask() {
    setState(() {
      if(widget.stateData._color == Colors.transparent) {
        widget.stateData._color = Colors.greenAccent;
      }
      else {
        widget.stateData._color = Colors.transparent;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Material(
        color: widget.stateData._color,
        child: ListTile(
          title: Text(
            widget.name,
            style: _taskFont,
            textAlign: TextAlign.center,
          ),
          onTap: () {
            _highlightTask();
          },
        ),
      ),
      Divider(
        height: 0.0,
      ),
    ]);
  }
}

包含 TaskItem 对象列表的小部件已替换为 TaskItemData 列表。 ListViewBuilder child 现在通过中间 class 访问 TaskItem widget（即 child: _taskList[index]，已更改为 child: _taskList[index].widget,）。具体如下：

class _TimeTrackHomeState extends State<TimeTrackHome> {
  TextEditingController _textController;
  List<TaskItemData> _taskList = new List<TaskItemData>();

  void _addTaskDialog() async {
    _textController = TextEditingController();

    await showDialog(
        context: context,
        builder: (_) => new AlertDialog(
          title: new Text("Add A New Task"),
          content: new TextField(
            controller: _textController,
            decoration: InputDecoration(
                border: InputBorder.none, hintText: 'Enter the task name'),
          ),
          actions: <Widget>[
            new FlatButton(
                onPressed: () => Navigator.pop(context),
                child: const Text("CANCEL")),
            new FlatButton(
                onPressed: (() {
                  Navigator.pop(context);
                  _addTask(_textController.text);
                }),
                child: const Text("ADD"))
          ],
        ));
  }

  void _addTask(String title) {
    setState(() {
      // add the new task
      _taskList.add(TaskItemData(
        name: title,
      ));
    });
  }

  @override
  void initState() {
    _taskList = List<TaskItemData>();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Align(
        alignment: Alignment.topCenter,
        child: ListView.builder(
            padding: EdgeInsets.all(0.0),
            itemExtent: 60.0,
            itemCount: _taskList.length,
            itemBuilder: (BuildContext context, int index) {
              if (index < _taskList.length) {
                return Dismissible(
                  key: ObjectKey(_taskList[index]),
                  onDismissed: (direction) {
                    if(this.mounted) {
                      setState(() {
                        _taskList.removeAt(index);
                      });
                    }
                  },
                  child: _taskList[index].widget,
                );
              }
            }),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _addTaskDialog,
        tooltip: 'Click to add a new task',
        child: new Icon(Icons.add),
      ),
    );
  }
}

在 Flutter 构建期间维护 StatefulWidget 的状态

Maintain state for StatefulWidget during build in Flutter

dart

flutter

statefulwidget