Flutter | 实现不同页面中数据的保持

概要

提示：本文是在新手学习 开发中get到的，如果有大佬发现错误或者更好的解决办法请在评论区或者私信我知道，蟹蟹！！

开发中，遇到在page2访问page1中的数据，或者page1、page2访问main.dart里面的数据，可以参考下面的方法

整体架构流程

提示：使用的是最新的Flutter版本，sdk可以选择3.0.6～4.0.0之间的，getX版本是4.6.5

考虑使用 Getx 状态管理库中的 Get.put 来保持状态的单例，并在页面之间共享。这样可以确保状态不会因页面跳转而被重新创建

具体实现

提示：根据实际需求修改代码

这里用的例子是在main.dart创建一个bool值，然后再Page1和Page2中访问这个值，Page1有个按钮，按下按钮跳转到Page2，并且在Page2中修改这个值

main.dart的代码：

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class SharedController extends GetxController {
  RxBool myBool = true.obs;//定义bool值
}

class MyApp extends StatelessWidget {
//使用get方法去访问监听器，再去访问监听器里面的myBool值
  final SharedController sharedController = Get.put(SharedController());

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Shared State Example',
      initialRoute: '/page1',
      getPages: [
        GetPage(
          name: '/page1',
          page: () => Page1(),
        ),
        GetPage(
          name: '/page2',
          page: () => Page2(),
        ),
      ],
    );
  }
}

Page1的代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class Page1 extends StatelessWidget {
//使用get里面自带的find方法去寻找bool值
  final SharedController sharedController = Get.find();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            sharedController.myBool.value = !sharedController.myBool.value;
            Get.toNamed('/page2');
          },
          child: Text('Go to Page 2'),
        ),
      ),
    );
  }
}

Page2页面的代码：

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class Page2 extends StatelessWidget {
//监听器监听获取值
  final SharedController sharedController = Get.find();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
          //改变这个值
            sharedController.myBool.value = !sharedController.myBool.value;
            Get.back(); // 返回上一页
          },
          child: Text('Go Back to Page 1'),
        ),
      ),
    );
  }
}

小结

在这个例子中，SharedController 被用来管理共享状态，它包含了一个 RxBool myBool 作为共享的布尔值。在页面一 (Page1) 中，按下按钮后改变了这个布尔值的状态并跳转到页面二 (Page2)。在页面二中同样可以改变这个布尔值的状态，然后返回到页面一。在这个过程中，myBool 的状态会被保持，而不会被重新定义。

getX确实是一个很好用的包，推荐使用