flutter - StatefulWidget 在导航上得到处理
问题描述
我有一个包含 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}'),
);
}
}
解决方案
您需要将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,
),
),
);
}
}
推荐阅读
- vhdl - VHDL中有限状态机的连续测试?
- encryption - BLE 绑定是否加密所有通信?
- python - 为什么我会收到此错误:TypeError: tuple indices must be integers or slices, not str
- javascript - 节点 8 与 11 时区不同
- javascript - 操作 iframe 的 ID 元素
- python - 如何使用 discord.py 从某些选项列表中可靠地获取用户输入作为变量?
- javascript - Javascript csv 到 json 函数不 reutn json 数据
- javascript - 单击“电子邮件”链接时打开电子邮件应用程序
- elasticsearch - Elasticsearch:仅获取带有搜索查询的 _source 字段(不提供文档 ID)
- javascript - 即使它的 `key` 属性保持不变,React 元素也会重置