Flutter学习笔记 —— 关于Navigator路由跳转二级页面不更新的解决办法

前言

好久没更新了，今天来写一下我最近开发 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();
    }));
  }
  ... 
  @override
  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("新界面") ))
            ];
          })
        ],
      ),
      );
      }
      ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

尝试通过弹出框进行交互，flag字段属性无法进行实时更新，需要退出后再重新进入该路由！

换成如下方式

1. 新建一个StatefulWidget & State< StatefulWidget >
2. 将路由跳转代码跳转至第二个StatefulWidget
3. 完成

正确示例

class TestWidget extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return TestState();
  }

}


class TestState extends State<TestWidget>{
  bool flag = false;
  @override
  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();
    }));
  }

  @override
  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("新界面") ))
            ];
          })
        ],
      ),
      )};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

至此完成！

温馨提示

在经过一番测试之后，我认为一个StatefulWidget修改的State应该只会作用于当前页面内容

以下是本人对于该BUG的结论，欢迎指正！

猜测：因为StatefulWidge的State修改作用于当前Widget，而通过路由跳转或添加的Widget实际上自身不会共享一级菜单的State！
既然不会直接进行共享，那么二级菜单操作一级菜单的数据，实际上对仅对 一级菜单的数据进行更新，而不会因为一级菜单数据的内容而自身进行刷新状态！

要改变状态只能通过新建一个Widget，让它拥有一个独立的State变更。

结束语

Flutter学习笔记 —— 关于Navigator路由跳转二级页面不更新的解决办法

• 如果对你有帮助的话可以给我点赞收藏，十分感谢
• 致力做优、好、细、精学习笔记分享给大家
• 可以转载 需标明 出处 本文链接。

感谢你的观看。