Flutter 学习之旅 之 flutter 使用 Provider 实现简单监听UI数据变化/通知UI刷新的简单封装
目录
Flutter 学习之旅 之 flutter 使用 Provider 实现简单监听UI数据变化/通知UI刷新的简单封装
一、简单介绍
二、flutter_native_splash
三、安装 provider
四、简单案例实现
五、关键代码与说明
六、在使用 provider 中的一些注意事项
1. 合理拆分状态
2. 使用 MultiProvider
3. 正确使用 Provider.of
4. 使用 Consumer 或 Selector
5. 避免过度使用 Provider
6. 管理生命周期
7. 避免内存泄漏
8. 合理使用 notifyListeners
9. 调试和日志
10. 文档和注释
一、简单介绍
Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。
Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。
在 Flutter 中进行 UI 的数据更新管理有多种方式，以下是一些常见的方法：
- 1. 使用
setState方法
setState是最简单直接的方式，适用于简单的状态变化，如按钮点击计数、开关状态等。当状态发生变化时，调用setState会触发整个组件的重新构建，但需要注意避免频繁调用，以免影响性能。
2. 使用
StatefulWidget和InheritedWidget
StatefulWidget是具有状态的组件，InheritedWidget用于在组件树中共享数据。当需要共享状态时，如主题、语言设置等，可以结合使用它们来实现局部刷新。
- 3. 使用
GlobalKey
GlobalKey可以唯一标识元素，并提供对这些元素相关联的访问，比如BuildContext和State。通过GlobalKey可以直接访问到需要局部刷新的组件的State，并调用其setState方法来实现局部刷新。
- 4. 使用
StreamBuilder
StreamBuilder是用于监听流（Stream）变化的 widget，适用于处理异步数据流，如网络请求、实时数据等。当流中的数据发生变化时，StreamBuilder会根据新的数据重新构建其子树，从而实现局部刷新。
- 5. 使用
Provider和ChangeNotifierProvider
Provider是一个流行的状态管理库，ChangeNotifierProvider是其提供的一个用于管理状态的组件。通过在组件树中适当地放置ChangeNotifierProvider，可以在需要时更新状态，并通过状态的变化来触发局部 UI 的刷新。
- 6. 使用
ValueNotifier和ValueListenableBuilder
ValueNotifier是一个用于通知监听器值已更改的类，ValueListenableBuilder是一个根据ValueListenable的当前值构建 widget 的组件。当ValueNotifier的值发生变化时，ValueListenableBuilder会根据新的值重新构建其子树，实现局部刷新。
- 7. 使用第三方状态管理库
除了 Flutter 自带的工具外，还可以使用第三方状态管理库，如
GetX。GetX提供了简单易用的状态管理方式，通过GetBuilder和update方法可以方便地实现 UI 的局部刷新。选择哪种方式取决于应用的具体需求和复杂程度。简单的应用可以使用
setState或ValueNotifier，而复杂的应用则更适合使用Provider或第三方库。
二、flutter_native_splash
官网地址：provider | Flutter package
Flutter 中的 Provider 是一种流行且强大的状态管理解决方案。它通过 ChangeNotifier 和 Provider 组件，将状态与 UI 分离，实现高效的状态管理和 UI 更新。
核心概念：
Provider使用ChangeNotifier来管理状态，当状态改变时，通过notifyListeners()通知 UI 更新。使用方式：通过
ChangeNotifierProvider将状态提供给整个应用，使用Provider.of<YourModel>(context)或Consumer<YourModel>在 UI 中读取和更新状态。优点：代码结构清晰，状态管理简单易懂，支持局部更新，减少不必要的 UI 重建。
适用场景：适用于中到大型应用，尤其是需要跨页面共享状态的场景。
Provider 是 Flutter 开发中推荐的状态管理方式之一，它结合了 Flutter 的响应式架构，使状态管理更加灵活和高效。
三、安装 provider
1、直接运行命令： flutter pub add provider
2、或者在 pubspec.yaml 添加
dependencies:provider: ^6.1.2
四、简单案例实现
1、这里使用 Android Studio 进行创建 Flutter 项目
、创建一个 application 的 Flutter 项目
3、创建的工程结构如下
4、编写一个 provider
5、编写另一个 provider
6、编写一个 login界面
7、编写一个 home界面
8、在 main 中，添加 provider，添加界面导航，主要逻辑如下
9、连接设备，运行效果如下
五、关键代码与说明
1、LoginProvider
import 'package:flutter/material.dart';// 定义一个名为 LoginProvider 的类，它继承自 ChangeNotifier，用于管理登录相关的状态
class LoginProvider with ChangeNotifier {// 私有变量 _phoneNumber，用于存储用户输入的手机号String _phoneNumber = '';// 私有变量 _isAgreed，用于存储用户是否同意协议的状态bool _isAgreed = false;// 公开的 getter 方法，用于外部获取当前的手机号状态String get phoneNumber => _phoneNumber;// 公开的 getter 方法，用于外部获取当前的是否同意协议的状态bool get isAgreed => _isAgreed;// 更新手机号的方法void updatePhoneNumber(String number) {// 将传入的手机号赋值给私有变量 _phoneNumber_phoneNumber = number;// 调用 notifyListeners() 方法，通知所有监听该状态的组件，状态已经改变，需要重新构建notifyListeners();}// 更新是否同意协议的方法void updateAgreed(bool agreed) {// 将传入的是否同意协议的状态赋值给私有变量 _isAgreed_isAgreed = agreed;// 调用 notifyListeners() 方法，通知所有监听该状态的组件，状态已经改变，需要重新构建notifyListeners();}// 计算属性，用于判断是否满足使能登录按钮的条件bool get isLoginEnabled {// 当手机号不为空且用户已同意协议时，返回 true，表示登录按钮可点击return _phoneNumber.isNotEmpty && _isAgreed;}
}代码说明
类定义：
class LoginProvider with ChangeNotifier：定义了一个名为LoginProvider的类，它继承自ChangeNotifier。ChangeNotifier是 Flutter 提供的一个类，用于管理状态变化并通知监听者。私有变量：
_phoneNumber和_isAgreed是私有变量，用于存储用户输入的手机号和是否同意协议的状态。私有变量以_开头，表示它们只能在类内部访问。公开的 getter 方法：
phoneNumber和isAgreed是公开的 getter 方法，用于外部组件获取当前的状态值。通过这些方法，其他组件可以读取状态，但不能直接修改。状态更新方法：
updatePhoneNumber和updateAgreed是用于更新状态的方法。当调用这些方法时，会更新对应的私有变量，并调用notifyListeners()方法通知所有监听该状态的组件，状态已经改变，需要重新构建。计算属性：
isLoginEnabled是一个计算属性，用于判断是否满足使能登录按钮的条件。只有当手机号不为空且用户已同意协议时，返回true，表示登录按钮可点击。通过这些注释，你可以更清楚地理解
LoginProvider的作用和实现方式。
2、UserProvider
import 'package:flutter/material.dart';// 定义一个名为 UserProvider 的类，用于管理用户信息的状态。
// 该类继承自 ChangeNotifier，以便在状态发生变化时通知监听者。
class UserProvider with ChangeNotifier {// 私有变量 _username，用于存储用户的用户名。String _username = '';// 私有变量 _age，用于存储用户的年龄。int _age = 0;// 公开的 getter 方法，用于外部获取当前的用户名状态。// 通过这种方式，其他组件可以读取用户名，但不能直接修改。String get username => _username;// 公开的 getter 方法，用于外部获取当前的年龄状态。// 通过这种方式，其他组件可以读取年龄，但不能直接修改。int get age => _age;// 更新用户名的方法。// 当外部调用此方法并传入新的用户名时，会更新 _username 的值，// 并通过 notifyListeners() 通知所有监听该状态的组件，状态已经改变，需要重新构建。void updateUsername(String name) {_username = name;notifyListeners();}// 更新年龄的方法。// 当外部调用此方法并传入新的年龄时，会更新 _age 的值，// 并通过 notifyListeners() 通知所有监听该状态的组件，状态已经改变，需要重新构建。void updateAge(int age) {_age = age;notifyListeners();}
}代码说明
类定义：
class UserProvider with ChangeNotifier：定义了一个名为UserProvider的类，它继承自ChangeNotifier。ChangeNotifier是 Flutter 提供的一个类，用于管理状态变化并通知监听者。私有变量：
_username和_age是私有变量，用于存储用户的用户名和年龄。私有变量以_开头，表示它们只能在类内部访问。公开的 getter 方法：
username和age是公开的 getter 方法，用于外部组件获取当前的状态值。通过这些方法，其他组件可以读取状态，但不能直接修改。状态更新方法：
updateUsername和updateAge是用于更新状态的方法。当调用这些方法时，会更新对应的私有变量，并调用notifyListeners()方法通知所有监听该状态的组件，状态已经改变，需要重新构建。通过这些注释，你可以更清楚地理解
UserProvider的作用和实现方式。
3、LoginPage
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_ui_provider/page/home_page.dart';
import 'package:test_ui_provider/provider/login_provider.dart';// 定义一个名为 LoginPage 的无状态组件，用于实现登录页面的 UI 和逻辑。
class LoginPage extends StatelessWidget {// 创建一个 TextEditingController 实例，用于控制手机号输入框的内容。final TextEditingController _phoneNumberController = TextEditingController();@overrideWidget build(BuildContext context) {// 使用 Scaffold 构建页面的基本结构，包括顶部导航栏和页面主体内容。return Scaffold(appBar: AppBar(// 设置导航栏标题为 "Login Page"。title: Text('Login Page'),),body: Padding(// 在页面主体内容周围添加 16.0 的内边距，以提供更好的视觉效果。padding: const EdgeInsets.all(16.0),child: Column(// 使用 Column 垂直排列页面中的各个子组件。children: [// 创建一个文本输入框，用于用户输入手机号。TextField(controller: _phoneNumberController, // 将手机号输入框与 TextEditingController 绑定。decoration: InputDecoration(labelText: 'Phone Number'), // 设置输入框的提示文本为 "Phone Number"。onChanged: (value) {// 当用户输入手机号时，调用 LoginProvider 的 updatePhoneNumber 方法更新状态。// 使用 Provider.of 获取 LoginProvider 实例，并设置 listen: false，避免不必要的重建。Provider.of<LoginProvider>(context, listen: false).updatePhoneNumber(value);},),// 创建一个复选框列表项，用于用户勾选同意协议。CheckboxListTile(title: Text('I agree to the terms and conditions'), // 设置复选框的标题为 "I agree to the terms and conditions"。value: Provider.of<LoginProvider>(context).isAgreed, // 使用 Provider 获取当前的 isAgreed 状态值。onChanged: (value) {// 当用户勾选或取消勾选复选框时，调用 LoginProvider 的 updateAgreed 方法更新状态。// 使用 Provider.of 获取 LoginProvider 实例，并设置 listen: false，避免不必要的重建。Provider.of<LoginProvider>(context, listen: false).updateAgreed(value ?? false);},),// 使用 Consumer 监听 LoginProvider 的状态变化，并根据状态构建登录按钮。Consumer<LoginProvider>(builder: (context, provider, child) {// 根据 LoginProvider 的 isLoginEnabled 状态，决定登录按钮是否可点击。return ElevatedButton(onPressed: provider.isLoginEnabled ? () {// 如果满足登录条件，导航到 HomePage。Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => HomePage()),);} : null, // 如果不满足登录条件，按钮不可点击。child: Text('Login'), // 设置按钮文本为 "Login"。);},),],),),);}
}代码说明
类定义：
class LoginPage extends StatelessWidget：定义了一个无状态组件LoginPage，用于实现登录页面的 UI 和逻辑。TextEditingController：
final TextEditingController _phoneNumberController = TextEditingController()：创建一个TextEditingController实例，用于控制手机号输入框的内容。Scaffold：
使用
Scaffold构建页面的基本结构，包括顶部导航栏和页面主体内容。TextField：
创建一个文本输入框，用于用户输入手机号。
使用
onChanged回调函数，当用户输入手机号时，调用LoginProvider的updatePhoneNumber方法更新状态。CheckboxListTile：
创建一个复选框列表项，用于用户勾选同意协议。
使用
onChanged回调函数，当用户勾选或取消勾选复选框时，调用LoginProvider的updateAgreed方法更新状态。Consumer：
使用
Consumer监听LoginProvider的状态变化，并根据状态构建登录按钮。根据
LoginProvider的isLoginEnabled状态，决定登录按钮是否可点击。导航：
如果满足登录条件，使用
Navigator.pushReplacement跳转到HomePage。通过这些注释，你可以更清楚地理解
LoginPage的实现逻辑和代码结构。
4、HomePage
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_ui_provider/provider/login_provider.dart';
import 'package:test_ui_provider/provider/user_provider.dart';// 定义一个名为 HomePage 的无状态组件，用于实现主页的 UI 和逻辑。
class HomePage extends StatelessWidget {// 创建两个 TextEditingController 实例，分别用于控制用户名和年龄输入框的内容。final TextEditingController _usernameController = TextEditingController();final TextEditingController _ageController = TextEditingController();@overrideWidget build(BuildContext context) {// 使用 Scaffold 构建页面的基本结构，包括顶部导航栏和页面主体内容。return Scaffold(appBar: AppBar(// 设置导航栏标题为 "Home Page"。title: Text('Home Page'),),body: Center(// 将页面主体内容居中显示。child: Column(// 使用 Column 垂直排列页面中的各个子组件，并将子组件居中对齐。mainAxisAlignment: MainAxisAlignment.center,children: [// 显示欢迎信息。Text('Welcome to the Home Page!'),// 显示用户的手机号，通过 Provider 获取 LoginProvider 中的 phoneNumber 状态。Text('Your Phone Number: ${Provider.of<LoginProvider>(context).phoneNumber}',),// 显示用户的用户名，通过 Provider 获取 UserProvider 中的 username 状态。Text('Your Username: ${Provider.of<UserProvider>(context).username}',),// 显示用户的年龄，通过 Provider 获取 UserProvider 中的 age 状态。Text('Your Age: ${Provider.of<UserProvider>(context).age}',),// 创建一个文本输入框，用于用户输入用户名。TextField(controller: _usernameController, // 将用户名输入框与 TextEditingController 绑定。decoration: InputDecoration(labelText: 'Username'), // 设置输入框的提示文本为 "Username"。onChanged: (value) {// 当用户输入用户名时，调用 UserProvider 的 updateUsername 方法更新状态。// 使用 Provider.of 获取 UserProvider 实例，并设置 listen: false，避免不必要的重建。Provider.of<UserProvider>(context, listen: false).updateUsername(value);},),// 创建一个文本输入框，用于用户输入年龄。TextField(controller: _ageController, // 将年龄输入框与 TextEditingController 绑定。decoration: InputDecoration(labelText: 'Age'), // 设置输入框的提示文本为 "Age"。onChanged: (value) {// 尝试将输入的字符串解析为整数。int? age = int.tryParse(value);if (age != null) {// 如果解析成功，调用 UserProvider 的 updateAge 方法更新状态。// 使用 Provider.of 获取 UserProvider 实例，并设置 listen: false，避免不必要的重建。Provider.of<UserProvider>(context, listen: false).updateAge(age);}},),// 创建一个按钮，用于用户点击退出登录。ElevatedButton(onPressed: () {// 当用户点击按钮时，使用 Navigator.pop 返回到登录页面。Navigator.pop(context);},child: Text('Logout'), // 设置按钮文本为 "Logout"。),],),),);}
}代码说明
类定义：
class HomePage extends StatelessWidget：定义了一个无状态组件HomePage，用于实现主页的 UI 和逻辑。TextEditingController：
final TextEditingController _usernameController = TextEditingController()和final TextEditingController _ageController = TextEditingController()：创建两个TextEditingController实例，分别用于控制用户名和年龄输入框的内容。Scaffold：
使用
Scaffold构建页面的基本结构，包括顶部导航栏和页面主体内容。Text：
使用
Text组件显示用户的手机号、用户名和年龄。通过Provider.of<ProviderClass>(context)获取对应的状态。TextField：
创建两个文本输入框，分别用于用户输入用户名和年龄。
使用
onChanged回调函数，当用户输入内容时，调用UserProvider的updateUsername和updateAge方法更新状态。ElevatedButton：
创建一个按钮，用于用户点击退出登录。
使用
Navigator.pop返回到登录页面。通过这些注释，你可以更清楚地理解
HomePage的实现逻辑和代码结构。
5、main
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_ui_provider/page/home_page.dart';
import 'package:test_ui_provider/page/login_page.dart';
import 'package:test_ui_provider/provider/login_provider.dart';
import 'package:test_ui_provider/provider/user_provider.dart';void main() {// 程序的入口点，启动 Flutter 应用。runApp(// 使用 MultiProvider 来同时提供多个状态管理器（Provider）。// MultiProvider 允许在一个地方集中管理多个状态，便于在应用的不同部分共享状态。MultiProvider(providers: [// 创建并提供一个 LoginProvider 实例，用于管理登录相关的状态。ChangeNotifierProvider(create: (_) => LoginProvider()),// 创建并提供一个 UserProvider 实例，用于管理用户信息相关的状态。ChangeNotifierProvider(create: (_) => UserProvider()),],child: MyApp(), // MyApp 是应用的根组件，负责构建整个应用的路由和布局。),);
}// 定义一个名为 MyApp 的无状态组件，它是应用的根组件。
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// 使用 MaterialApp 构建整个应用，它提供了导航、主题等基础功能。return MaterialApp(// 设置应用的初始路由为 '/'，对应登录页面。initialRoute: '/',// 定义应用的路由表，指定不同路由对应的页面组件。routes: {'/': (context) => LoginPage(), // 登录页面的路由，路径为 '/'。'/home': (context) => HomePage(), // 主页的路由，路径为 '/home'。},);}
}代码说明
程序入口点：
void main()：程序的入口点，启动 Flutter 应用。MultiProvider：
MultiProvider：用于同时提供多个状态管理器（Provider）。它允许在一个地方集中管理多个状态，便于在应用的不同部分共享状态。ChangeNotifierProvider：
ChangeNotifierProvider(create: (_) => LoginProvider())：创建并提供一个LoginProvider实例，用于管理登录相关的状态。
ChangeNotifierProvider(create: (_) => UserProvider())：创建并提供一个UserProvider实例，用于管理用户信息相关的状态。MyApp：
class MyApp extends StatelessWidget：定义了一个无状态组件MyApp，它是应用的根组件，负责构建整个应用的路由和布局。MaterialApp：
MaterialApp：用于构建整个应用，它提供了导航、主题等基础功能。
initialRoute: '/'：设置应用的初始路由为'/'，对应登录页面。
routes：定义应用的路由表，指定不同路由对应的页面组件。
'/'：登录页面的路由。
'/home'：主页的路由。通过这些注释，你可以更清楚地理解主程序代码的结构和功能。
六、在使用 provider 中的一些注意事项
在使用 Flutter 的 Provider 进行状态管理时，以下是一些重要的注意事项和最佳实践，可以帮助你更高效地管理和维护应用的状态：
1. 合理拆分状态
单一职责原则：每个
Provider应该只管理一个独立的状态模块。例如，LoginProvider只管理登录相关的状态，UserProvider只管理用户信息相关的状态。避免臃肿的 Provider：不要将所有状态都放在一个
Provider中，这样会导致代码难以维护和扩展。
2. 使用 MultiProvider
集中管理多个 Provider：如果需要同时使用多个
Provider，建议在应用的顶层使用MultiProvider来集中管理。这样可以避免在多个地方重复提供相同的Provider。示例：
runApp(MultiProvider(providers: [ChangeNotifierProvider(create: (_) => LoginProvider()),ChangeNotifierProvider(create: (_) => UserProvider()),],child: MyApp(),), );
3. 正确使用 Provider.of
获取状态：使用
Provider.of<YourProvider>(context)获取状态。更新状态：更新状态时，使用
Provider.of<YourProvider>(context, listen: false)。设置listen: false可以避免不必要的 UI 重建。示例：
// 获取状态 String phoneNumber = Provider.of<LoginProvider>(context).phoneNumber;// 更新状态 Provider.of<LoginProvider>(context, listen: false).updatePhoneNumber('1234567890');
4. 使用 Consumer 或 Selector
局部更新：如果只需要根据部分状态更新 UI，可以使用
Consumer或Selector。Consumer会监听整个Provider的状态变化，而Selector可以选择性地监听特定的状态变化。示例：
// 使用 Consumer Consumer<LoginProvider>(builder: (context, provider, child) {return ElevatedButton(onPressed: provider.isLoginEnabled ? () {} : null,child: Text('Login'),);}, );// 使用 Selector Selector<LoginProvider, bool>(selector: (_, provider) => provider.isLoginEnabled,builder: (context, isLoginEnabled, child) {return ElevatedButton(onPressed: isLoginEnabled ? () {} : null,child: Text('Login'),);}, );
5. 避免过度使用 Provider
局部状态：对于一些简单的局部状态（如按钮的点击状态），可以使用
StatefulWidget或ValueNotifier，而不是Provider。示例：
class MyButton extends StatefulWidget {@override_MyButtonState createState() => _MyButtonState(); }class _MyButtonState extends State<MyButton> {bool _isPressed = false;@overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: () {setState(() {_isPressed = !_isPressed;});},child: Text(_isPressed ? 'Pressed' : 'Not Pressed'),);} }
6. 管理生命周期
清理资源：如果
Provider中有需要清理的资源（如定时器、订阅等），确保在dispose方法中进行清理。示例：
class MyProvider with ChangeNotifier {Timer? _timer;@overridevoid dispose() {_timer?.cancel();super.dispose();} }
7. 避免内存泄漏
监听器管理：确保在不需要时移除监听器，避免内存泄漏。
示例：
class MyWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return Consumer<MyProvider>(builder: (context, provider, child) {return ElevatedButton(onPressed: () {provider.dispose(); // 确保在不需要时清理资源},child: Text('Dispose Provider'),);},);} }
8. 合理使用 notifyListeners
避免过度调用：只在状态真正发生变化时调用
notifyListeners()，避免不必要的 UI 重建。示例：
class MyProvider with ChangeNotifier {int _count = 0;void increment() {_count++;notifyListeners(); // 只在状态变化时调用} }
9. 调试和日志
添加日志：在
notifyListeners()调用前后添加日志，帮助调试状态变化。示例：
class MyProvider with ChangeNotifier {int _count = 0;void increment() {print('Incrementing count from $_count');_count++;notifyListeners();print('Count is now $_count');} }
10. 文档和注释
-
清晰的文档：为每个
Provider和状态管理逻辑添加清晰的注释和文档，便于团队成员理解和维护代码。
