在flutter中,有两个页面,第二个页面定义了初始isShow为false,也有一个改变isShow状态的按钮,第一个页面进去第二个页面时初始isShow为false,通过点击按钮改变isShow为true,回到第一个页面后重新进入第二个页面时,为什么isShow还是为false,如何保存isShow为按钮点击后的isShow状态,如何进入时为true
时间: 2024-02-13 11:04:39 浏览: 145
Flutter StatefulWidget 有状态组件、页面上绑定数据、改变页面数据
在Flutter中,也可以使用两种不同的方法来保存页面状态。
方法1:使用Navigator.push 和 Navigator.pop来实现页面跳转
这种方法比较直接,可以使用Navigator.push 和 Navigator.pop来实现页面跳转。在这种情况下,新的页面每次都是重新创建的,因此它的初始状态是默认的,而不是上一次的状态。
为了保存状态,你可以使用Navigator.pushNamed方法来传递状态,然后在第二个页面中使用ModalRoute.of(context).settings.arguments来获取状态。具体实现如下:
```dart
// 第一个页面
Navigator.pushNamed(context, '/second', arguments: {'isShow': isShow});
// 第二个页面
class SecondPage extends StatefulWidget {
@override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
bool isShow;
@override
void initState() {
super.initState();
isShow = ModalRoute.of(context).settings.arguments['isShow'] as bool ?? false;
}
void handleButtonClick() {
setState(() {
isShow = !isShow;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('isShow: $isShow'),
RaisedButton(
child: Text('Toggle isShow'),
onPressed: handleButtonClick,
)
],
),
),
);
}
}
```
方法2:使用PageRoute和PageStorage
这种方法需要使用PageRoute和PageStorage来实现页面的状态保存。具体实现如下:
```dart
// 第一个页面
Navigator.push(context, MyPageRoute(builder: (_) => SecondPage()));
// 第二个页面
class SecondPage extends StatefulWidget {
@override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> with AutomaticKeepAliveClientMixin {
bool isShow;
@override
void initState() {
super.initState();
isShow = false;
}
void handleButtonClick() {
setState(() {
isShow = !isShow;
});
}
@override
Widget build(BuildContext context) {
super.build(context);
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: PageStorage(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('isShow: $isShow'),
RaisedButton(
child: Text('Toggle isShow'),
onPressed: handleButtonClick,
)
],
),
),
bucket: PageStorageBucket(),
),
);
}
@override
bool get wantKeepAlive => true;
}
class MyPageRoute extends MaterialPageRoute {
MyPageRoute({WidgetBuilder builder, RouteSettings settings})
: super(builder: builder, settings: settings);
@override
Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
return child;
}
}
```
在这种方法中,我们通过AutomaticKeepAliveClientMixin来实现状态的保存。我们可以定义一个PageStorage widget来包含所有需要保存的widget,然后将其放入PageStorageBucket中,这样在下一次打开该页面时,状态就可以被保存和恢复了。同时,我们还需要使用MyPageRoute来禁止页面切换时的动画效果,以避免出现不必要的重复动画。
阅读全文