前言
好久没更新了,今天来写一下我最近开发 Flutter遇到的问题
使用Navigator.of(context).push() 时,Router数据不会进行刷新,需要退出二级菜单重新进入才会进行刷新。
注:使用Navigator.push(context,router) 方式同理
见图
示例代码
错误示例
class TimeState extends State<SimpleWidget>{
bool flag = false;
void getTest(){
Navigator.of(context).push(MaterialPageRoute(builder: (context){
return Scaffold(
appBar: AppBar(
title: Text("测试"),
),
body: Container(
height: 300,
child: Column(
children: [
TextButton(child: Text("点我!"),onPressed: (){
setState(() {
flag = !flag;
});
print(flag);
}
),
Visibility(
maintainState: true,
child: Container(
width: 200,
height: 200,
margin: EdgeInsets.only(top: 10),
child: Text("这是显示的文本信息内容!",style: TextStyle(color: Colors.red)),
),
visible: flag,
)
],
),
),
);
// return TestWidget();
}));
}
...
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("日期练习"),
leading: Icon(Icons.arrow_back),
centerTitle: true,
actions: [
PopupMenuButton(itemBuilder: (context){
return <PopupMenuItem>[
PopupMenuItem(child: TextButton(onPressed: () {
setState(() {
getTest();
}); }, child: Text("新界面") ))
];
})
],
),
);
}
...
尝试通过弹出框进行交互,flag字段属性无法进行实时更新,需要退出后再重新进入该路由!
换成如下方式
- 新建一个StatefulWidget & State< StatefulWidget >
- 将路由跳转代码跳转至第二个StatefulWidget
- 完成
正确示例
class TestWidget extends StatefulWidget{
State<StatefulWidget> createState() {
return TestState();
}
}
class TestState extends State<TestWidget>{
bool flag = false;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("测试"),
),
body: Container(
height: 300,
child: Column(
children: [
TextButton(child: Text("点我!"),onPressed: (){
setState(() {
flag = !flag;
});
print(flag);
}
),
Visibility(
maintainState: true,
child: Container(
width: 200,
height: 200,
margin: EdgeInsets.only(top: 10),
child: Text("这是显示的文本信息内容!",style: TextStyle(color: Colors.red)),
),
visible: flag,
)
],
),
),
);
}
}
// timeState
class TimeState extends State<SimpleWidget>{
bool flag = false;
void getTest(){
Navigator.of(context).push(MaterialPageRoute(builder: (context){
return TestWidget();
}));
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("日期练习"),
leading: Icon(Icons.arrow_back),
centerTitle: true,
actions: [
PopupMenuButton(itemBuilder: (context){
return <PopupMenuItem>[
PopupMenuItem(child: TextButton(onPressed: () {
setState(() {
getTest();
}); }, child: Text("新界面") ))
];
})
],
),
)};
至此完成!
温馨提示
在经过一番测试之后,我认为一个StatefulWidget修改的State应该只会作用于当前页面内容
以下是本人对于该BUG的结论,欢迎指正!
猜测:因为StatefulWidge的State修改作用于当前Widget,而通过路由跳转或添加的Widget实际上自身不会共享一级菜单的State!
既然不会直接进行共享,那么二级菜单操作一级菜单的数据,实际上对仅对 一级菜单的数据进行更新,而不会因为一级菜单数据的内容而自身进行刷新状态!
要改变状态只能通过新建一个Widget,让它拥有一个独立的State变更。
结束语
Flutter学习笔记 —— 关于Navigator路由跳转二级页面不更新的解决办法
- 如果对你有帮助的话可以给我点赞收藏,十分感谢
- 致力做优、好、细、精学习笔记分享给大家
- 可以转载 需标明 出处 本文链接。
感谢你的观看。