我在由PageController管理的PageView中有一系列有状态的小部件。我正在使用pageController.jumpToPage(index)
来切换页面。切换页面时,窗口小部件中的所有状态似乎都会丢失,就像从头开始重新创建一样。我曾尝试在PageController中使用keepPage: true
,但似乎没有任何效果。这是PageView的预期行为还是我做错了什么?任何建议表示赞赏,谢谢!
keepPage: true
是默认行为;这意味着PageController
会记住它被摧毁和重新创建的页面。这不是你想要的。
相反,将页面特定的PageStorageKey
传递给页面的构造函数。这有助于Flutter为您的页面提供独特的存储桶。然后在你想要恢复到之前状态的State
中,你可以使用PageStorage.of(context)
来获取存储桶,你可以将read
值从initState
和write
值改为。你可以在ExpansionTile看到一个例子。
与AutomaticKeepAliveClientMixin一起使用到您的SubPage。
那么@override bool得到wantKeepAlive => true;这是一个样本
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
child: new Scaffold(
appBar: new AppBar(
bottom: new TabBar(
tabs: [
new Tab(icon: new Icon(Icons.directions_car)),
new Tab(icon: new Icon(Icons.directions_transit)),
new Tab(icon: new Icon(Icons.directions_bike)),
new Tab(
icon: new Icon(Icons.airplanemode_active),
)
],
),
),
body: new TabBarView(children: [
new OnePage(color: Colors.black,),
new OnePage(color: Colors.green,),
new OnePage(color: Colors.red,),
new OnePage(color: Colors.blue,),
]),
),
);
}
}
class OnePage extends StatefulWidget {
final Color color;
const OnePage({Key key, this.color}) : super(key: key);
@override
_OnePageState createState() => new _OnePageState();
}
class _OnePageState extends State<OnePage> with AutomaticKeepAliveClientMixin<OnePage> {
@override
Widget build(BuildContext context) {
super.build(context);
return new SizedBox.expand(
child: new ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return new Padding(
padding: const EdgeInsets.all(10.0),
child: new Text(
'$index',
style: new TextStyle(color: widget.color),
),
);
},
),
);
}
@override
bool get wantKeepAlive => true;
}