调试帮助：Flutter StatefulWidget 在滚动出视图后不保持状态

Question

我正在玩一个简单的应用程序来学习 Flutter。这是 UI 的结构：

app -- MaterialApp -- HomeScreen (stateful) |- ListView -- PlaceWidget (stateful) |- ListTile

PlaceWidget 对象基本上构建并返回一个 ListTile；它唯一的额外职责是跟踪 favorited 状态并相应地构建 ListTile 的 UI。

源码为here，包括两个文件：

• main.dart 用于整个应用，并且
• places.dart 用于 http 请求

这是应用程序的行为方式：https://gfycat.com/FineBelovedLeafhopper

---

从表面上看，对象的状态似乎在滚动到视野之外时会丢失，但一些调试日志告诉我情况并非如此。

假设我最喜欢Oto Sushi，然后将其滚动到屏幕外，但保留指向状态对象的指针，该对象的favorited 状态仍将是true。然而，对象本身（属于_PlaceWidgetState 类）据报道为defunct, not mounted。
我无法再与该对象交互。如果我再次点击 Oto Sushi，它将创建一个新的状态对象并将该对象的 favorited 状态设置为 true，就像以前一样。

只要我不将 Oto Sushi 滚动到屏幕外，我就可以取消收藏它并且一切正常。

我设法找到了TextInputField 和ExpansionTile（例如this question）的类似问题，但我不知道如何将这些问题的解决方案转化为这个问题。

Answer 1

所以，抛开架构讨论不谈，问题的原因在于您如何构造 State 对象。通过将数据传递给构造函数，您可以确保每次重建小部件时，它们的状态都会重置。

 class PlaceWidget extends StatefulWidget {
  @override
  _PlaceWidgetState createState() {
    return new _PlaceWidgetState(place, false); // woops, always unchecked
  }

  final Place place;
  PlaceWidget(this.place, {Key key}) : super(key: key);
}

class _PlaceWidgetState extends State<PlaceWidget> { ... }

不要这样做，而是使用状态小部件内部的widget getter 来访问place 成员。还要确保您只在 State 小部件内初始化 checked 状态 - 或从此处的某个外部源获取它。

class _PlaceWidgetState extends State<PlaceWidget> {
  bool _isChecked = false; // only store state in State

  Widget build() {
   final Place place = widget.place;
   // build your stuff.
  }
}

现在您的小部件不断重建的原因是在ListView 中，屏幕外小部件可能会被破坏 - 它是为非常大的列表而设计的。为了防止这种情况，您还可以使用KeepAlive 小部件。