Flutter 之全局变量及共享状态

Android-海绵

于 2024-04-26 15:08:46 发布

阅读量942

点赞数 10

文章标签： flutter android

本文链接：https://blog.csdn.net/m0_64365896/article/details/138219563

版权

1 全局变量-Global类

在“lib/common”目录下创建一个Global类，它主要管理APP的全局变量，定义如下：

// 提供五套可选主题色
const _themes = <MaterialColor>[
  Colors.blue,
  Colors.cyan,
  Colors.teal,
  Colors.green,
  Colors.red,
];

class Global {
  static late SharedPreferences _prefs;
  static Profile profile = Profile();
  // 网络缓存对象
  static NetCache netCache = NetCache();

  // 可选的主题列表
  static List<MaterialColor> get themes => _themes;

  // 是否为release版
  static bool get isRelease => bool.fromEnvironment("dart.vm.product");

  //初始化全局信息，会在APP启动时执行
  static Future init() async {
    WidgetsFlutterBinding.ensureInitialized();
    _prefs = await SharedPreferences.getInstance();
    var _profile = _prefs.getString("profile");
    if (_profile != null) {
      try {
        profile = Profile.fromJson(jsonDecode(_profile));
      } catch (e) {
        print(e);
      }
    }else{
      // 默认主题索引为0，代表蓝色
      profile= Profile()..theme=0;
    }

    // 如果没有缓存策略，设置默认缓存策略
    profile.cache = profile.cache ?? CacheConfig()
      ..enable = true
      ..maxAge = 3600
      ..maxCount = 100;

    //初始化网络请求相关配置
    Git.init();
  }

  // 持久化Profile信息
  static saveProfile() =>
      _prefs.setString("profile", jsonEncode(profile.toJson()));
}

init()需要在App启动时就要执行，所以应用的main方法如下：

void main() => Global.init().then((e) => runApp(MyApp()));

一定要确保Global.init()方法不能抛出异常，否则 runApp(MyApp())根本执行不到。

2 共享状态

1、有了全局变量，还需要考虑如何跨组件共享状态。当然，如果将要共享的状态全部用全局变量替代也是可以的，但是这在Flutter开发中并不是一个好主意，因为组件的状态是和UI相关，而在状态改变时会期望依赖该状态的UI组件会自动更新，如果使用全局变量，那么必须得去手动处理状态变动通知、接收机制以及变量和组件依赖关系。

2、这些信息改变后都要立即通知其他依赖的该信息的Widget更新，所以应该使用ChangeNotifierProvider，另外，这些信息改变后都是需要更新Profile信息并进行持久化的。综上所述，可以定义一个ProfileChangeNotifier基类，然后让需要共享的Model继承自该类即可，ProfileChangeNotifier定义如下：

class ProfileChangeNotifier extends ChangeNotifier {
  Profile get _profile => Global.profile;

  @override
  void notifyListeners() {
    Global.saveProfile(); //保存Profile变更
    super.notifyListeners(); //通知依赖的Widget更新
  }
}

1. 用户状态

用户状态在登录状态发生变化时更新、通知其依赖项，定义如下：

class UserModel extends ProfileChangeNotifier {
  User get user => _profile.user;

  // APP是否登录(如果有用户信息，则证明登录过)
  bool get isLogin => user != null;

  //用户信息发生变化，更新用户信息并通知依赖它的子孙Widgets更新
  set user(User user) {
    if (user?.login != _profile.user?.login) {
      _profile.lastLogin = _profile.user?.login;
      _profile.user = user;
      notifyListeners();
    }
  }
}

2. APP主题状态

主题状态在用户更换APP主题时更新、通知其依赖项，定义如下：

class ThemeModel extends ProfileChangeNotifier {
  // 获取当前主题，如果为设置主题，则默认使用蓝色主题
  ColorSwatch get theme => Global.themes
      .firstWhere((e) => e.value == _profile.theme, orElse: () => Colors.blue);

  // 主题改变后，通知其依赖项，新主题会立即生效
  set theme(ColorSwatch color) {
    if (color != theme) {
      _profile.theme = color[500].value;
      notifyListeners();
    }
  }
}

怎样学习Flutter？

Flutter 最大的优势在于它允许开发人员使用单一代码库构建可在多个平台上运行的应用程序，包括iOS、Android、Web及桌面操作系统（Windows、macOS、Linux）。这种跨平台能力极大地降低了开发成本和复杂度，使得企业可以更高效地投入资源开发和维护产品。

为了能够方便大家快速学习Flutter, 这里整理了Flutter学习路线图以及《Flutter Dart 语言编程入门到精通》&《Flutter实战：第二版》帮助大家配置相关环境，学习Flutter 的基本语法以及最后的项目实际利用。扫描下方二维码即可免费领取！！！

学习路线：
在这里插入图片描述

《Flutter Dart 语言编程入门到精通》

第一章 Dart语言基础

环境准备
基础语法

第二章 Dart 异步编程

Dart的事件循环
调度任务
延时任务
Future详解
async和await
lsolate

第三章异步之 Stream 详解

什么是Stream
单订阅流
广播流
Stream Transformer
总结

第四章 Dart标准输入输出流

文件操作

第五章 Dart 网络编程

TCP服务端
TCP客户端
UDP服务端
UDP客户端
HTTP服务器与请求
WebSocket

第六章 Flutter 爬虫与服务端

Dart爬虫开发
Dart服务端
创建Flutter项目演示
总结

第七章 Dart 的服务端开发

注册登录实现

第八章 Dart 调用C语言混合编程

环境准备
测试Dart ffi接口
总结

第九章 LuaDardo中Dart与Lua的相互调用

Lua C API
创建运行时
Dart调Lua
Lua调Dart

掌握了Dart语言之后，咱们就可以通过实战来掌握Flutter的知识点，扫描下方二维码即可免费领取学习资料！！！

《Flutter实战：第二版》

第一章：起步

1.1 移动开发技术简介
1.2 初始Flutter
1.3 搭建Flutter开发环境
1.4 Dart语言简介

第二章：第一个Flutter应用

2.1 计数器应用实例
2.2 Widget简介
2.3 状态管理
2.4路由管理
2.5包管理
2.6 资源管理
2.7 调试Flutter应用
2.8 Flutter异常捕获

在这里插入图片描述

第三章：基础组件

3.1 文本及样式
3.2 按钮
3.3 图片及ICON
3.4 单选开关和复选框
3.5 输入框及表单
3.6 进度指示器

第四章：布局类组件

4.1 布局类组件简介
4.2 布局原理与约束（constraints）
4.3 线性布局（Row和Column）
4.4 弹性布局（Flex）
…

在这里插入图片描述

第五章：容器类组件

5.1 填充（Padding）
5.2 装饰容器（DecoratedBox）
5.3 变换（Transform）
5.4 容器组件（Container）
5.5 剪裁（Clip）
5.6 空间适配（FittedBox）
5.7 页面骨架（Scaffold）

第六章：可滚动组件

6.1 可滚动组件简介
6.2 SingleChildScrollView
6.3 ListView
6.4 滚动监听及控制
…

在这里插入图片描述

第七章：功能型组件

7.1 导航返回拦截（WillPopScope）
7.2 数据共享（InheritedWidget）
7.3 跨组件状态共享
7.4 颜色和主题
7.5 按需rebuild（ValueListenableBuilder）
7.6 异步UI更新（FutureBuilder、StreamBuilder）
7.7 对话框详解

第八章：事件处理与通知

8.1 原始指针事件处理
8.2 手势识别
8.3 Flutter事件机制
8.4 手势原理与手势冲突
8.5 事件总线
8.6 通知 Notification

在这里插入图片描述

第九章：动画

9.1 Flutter动画简介
9.2 动画基本结构及状态监听
9.3 自定义路由切换动画
9.4 Hero动画
9.5 交织动画
9.6 动画切换组件（AnimatedSwitcher）
9.7 动画过渡组件

第十章：自定义组件

10.1 自定义组件方法简介
10.2 组合现有组件
10.3 组合实例：TurnBox
10.4 CustomPaint 与 Canvas
10.5 自绘实例：圆形背景渐变进度条
10.6 自绘组件：CustomCheckbox
10.7 自绘组件: DoneWidget
10.8 水印实例: 文本绘制与离屏渲染

第十一章：文件操作与网络请求

11.1 文件操作
11.2 通过HttpClient发起HTTP请求
11.3 Http请求库-dio
11.4 实例：Http分块下载
…

第十二章：Flutter扩展

12.1 包和插件
12.2 Flutter Web

第十三章：国际化

13.1 让App支持多语言
13.2 实现Localizations
13.3 使用Intl包
13.4 国际化常见问题

在这里插入图片描述

第十四章：Flutter核心原理

14.1 Flutter UI 框架（Framework）
14.2 Element、BuildContext和RenderObject
14.3 Flutter启动流程和渲染管线
14.4 布局（Layout）过程
14.5 绘制（一）绘制原理及Layer
…

第十五章：一个完整的Flutter应用

15.1 Github客户端示例
15.2 Flutter APP代码结构
15.3 Model类定义
15.4 全局变量及共享状态
15.5 网络请求封装
15.6 APP入口及主页
15.7 登录页
15.8 多语言和多主题

由于内容过多，截图展示的目录及部分内容，完整文档领取方式扫描下方二维码即可免费获取！

Android-海绵

关注

10
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
Flutter 之全局变量及共享状态

10.1 自定义组件方法简介10.2 组合现有组件10.3 组合实例：TurnBox10.4 CustomPaint 与 Canvas10.5 自绘实例：圆形背景渐变进度条10.6 自绘组件：CustomCheckbox10.7 自绘组件: DoneWidget10.8 水印实例: 文本绘制与离屏渲染。
复制链接

扫一扫