StatefulWidget 在导航上得到处理

Question

我有一个包含 ListView 的有状态小部件 MyList。在点击任何列表图块时，新屏幕（MyScreen）打开，返回后（通过按左上角的返回按钮）滚动位置丢失，因为 MyList 被释放并且 initState 再次运行。如何防止 MyList 被销毁？

class MyList extends StatefulWidget {
      @override
      _MyListState createState() => new _MyListState();
    }

class _MyListState extends State<MyList> {
  List<String> items = new List.generate(20, (index) => 'Hello $index');

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Scrollbar(
        child: new ListView.builder(
          itemBuilder: (context, index) {
            return new ListTile(
              title: Text(items[index] + ' index $index'),
              onTap: () {
                Navigator.push(
                    context,
                    new MaterialPageRoute(
                      builder: (BuildContext context) => new MyScreen(index),
                    ));
              },
            );
          },
          itemCount: items.length,
        ),
      ),
    );
  }
}

这是我的屏幕：

class MyScreen extends StatefulWidget {
  final int indx;
  MyScreen(this.indx);
  _TaskDetailState createState() => new _TaskDetailState();
}

class _TaskDetailState extends State<MyScreen> {
  @override
  void initState() {
    super.initState();
  }

  Widget build(context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        title: Text('yoba'),
      ),
      body: Text('yoba ${widget.indx}'),
    );
  }
}

Answer 1

您需要将PageStorageKey 添加到您的 ListView 小部件。

class _MyListState extends State<MyList> {
  List<String> items = new List.generate(20, (index) => 'Hello $index');

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Scrollbar(
        child: new ListView.builder(
          key: PageStorageKey("MyList"), // <-- Add this line
          itemBuilder: (context, index) {
            return new ListTile(
              title: Text(items[index] + ' index $index'),
              onTap: () {
                Navigator.push(
                    context,
                    new MaterialPageRoute(
                      builder: (BuildContext context) => new MyScreen(index),
                    ));
              },
            );
          },
          itemCount: items.length,
        ),
      ),
    );
  }
}