Flutter 学习之旅之 flutter 使用 Provider 实现简单监听UI数据变化/通知UI刷新的简单封装

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();

  @override
  Widget 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();

  @override
  Widget 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 {
  @override
  Widget 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;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        setState(() {
          _isPressed = !_isPressed;
        });
      },
      child: Text(_isPressed ? 'Pressed' : 'Not Pressed'),
    );
  }
}

6. 管理生命周期

清理资源：如果 Provider 中有需要清理的资源（如定时器、订阅等），确保在 dispose 方法中进行清理。
示例：
class MyProvider with ChangeNotifier {
  Timer? _timer;

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }
}

7. 避免内存泄漏

监听器管理：确保在不需要时移除监听器，避免内存泄漏。

示例：

class MyWidget extends StatelessWidget {
  @override
  Widget 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');
  }
}