Flutter基础工具插件provider_base_tools的使用

Flutter基础工具插件provider_base_tools的使用

provider_base_tools 是一个基于 provider 的封装，主要用于简化 provider 的使用，提高开发效率。

安装

推荐通过 git 方式集成，方便更新。配合 provider_temp_gen 模板生成器使用可以提升开发效率。

dependencies:
  provider_base_tools: ^0.1.6

使用

2.1. 创建一个model类，继承 BaseArgementModel（用于页面直接传递参数）

class TestBaseArgemnt extends BaseArgementModel {
  TestBaseArgemnt.getInstance(super.initial) : super.getInstance();
}

2.2. 在 runApp 方法中使用

void main() {
  runApp(
    ChangeNotifierProvider<TestBaseArgemnt>.value(
      value: TestBaseArgemnt.getInstance(
        BaseNoneState(),
      ),
      builder: (context, child) => const MyApp(),
    ),
  );
}

2.3. 页面中使用

2.3.1. 创建一个 state 类，用于存储数据，并与 view 和 model 进行交互
class DemoState {
  DemoState();
}
2.3.2. 创建一个 model 类，继承 BaseModel
class DemoModel extends BaseModel<DemoState> {
  DemoModel.getInstance(super.initial) : super.getInstance();

  [@override](/user/override)
  bool get dataIsEmpty => false; // 页面显示状态根据此值判断

  [@override](/user/override)
  List<VoidAsyncFunction> initFutures() {
    // 所有的初始化异步方法 (例如: 第一次进来的网络请求)
    return [];
  }
}
2.3.3. 创建一个 view 类，继承 InitBaseStatelessWidget<T, S>，绑定 model 与 state 类
class DemoPage extends InitBaseStatelessWidget<DemoModel, DemoState> {
  const DemoPage({super.key});

  [@override](/user/override)
  void finish() {}

  [@override](/user/override)
  DemoModel getModel() {
    return DemoModel.getInstance(DemoState());
  }

  [@override](/user/override)
  Widget successedBuilder(BuildContext context) {
    return const Center(
      child: Text('successedBuilder'),
    );
  }
}

说明

类名及说明

类名 说明
BaseArgementModel 用于页面传递参数
BaseModel 用于存储数据，与 view 和 model 进行交互
BaseNoneModel 提供页面不需要 model 交互的公共类
BaseNoneState 提供页面不需要 state 交互的公共类
InitBaseStatelessWidget 用于创建页面
BaseWidget 用于定义默认布局
GetLefeCycleMixin 自定义生命周期 (暂未完善)
ProviderSingleTickerProviderStateMixin 自定义单个 TickerProvider (方便 model 使用 TickerProviderStateMixin，初始化 ticker 对象)
ProviderTickerProviderStateMixin 自定义多个 TickerProvider (方便 model 使用 TickerProviderStateMixin，初始化 ticker 对象)
CustomFloatingActionButtonLocation 自定义 FloatingActionButtonLocation 位置
KeepAliveWarpperWidget 状态保活页面
WillPopScopeWidget 对于 WillPopScope 的封装
ContextList Context 的栈堆管理 (一般适用于框架，开发中用不到这个类，可无视)
OneContext 用于获取 context

OneContext 方法及说明

方法名 说明
context 返回当前页面的全局 context
childContext 返回当前 Provider 的 context

BaseModel 方法及说明

方法名 说明
dataIsEmpty 页面显示状态根据此值判断
exception 捕获的异常信息
state 返回 State 对象
viewState 页面显示状态
setState() 通知页面刷新
initFutures 所有的初始化异步方法 (例如: 第一次进来的网络请求)
refresh() 刷新页面
setLoading() 设置页面状态为加载中
setSuccess() 设置页面状态为加载成功
setError() 设置页面状态为加载失败
setEmpty() 设置页面状态为加载空

InitBaseStatelessWidget 方法及说明

方法名 说明
getModel() 返回 Model 对象 (调用此方法会重新走 model 构造方法)
childContext 返回当前 Provider 的 context
context 返回当前页面的全局 context
model 返回 Model 对象
state 返回 State 对象
onReady() 进入 build 之前的回调 (已移除)
finish() 页面销毁
successedBuilder() 页面加载成功的布局
loadingBuilder() 页面加载中的布局
errorBuilder() 页面加载失败的布局
emptyBuilder() 页面加载空的布局
getScaffold() 返回一个 Scaffold 对象 (自定 Scaffold，可根据参数注释自定义)
showScaffold 是否需要 Scaffold (默认 true)

BaseWidget 方法及说明

方法名 说明
loadingWidget 默认加载中的布局 (可自定义)
errorWidget 默认加载失败的布局 (可自定义)
emptyWidget 默认加载空的布局 (可自定义)

示例代码

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

class TestBaseArgemnt extends BaseArgementModel {
  TestBaseArgemnt.getInstance(super.initial) : super.getInstance();
}

void main() {
  runApp(
    ChangeNotifierProvider<TestBaseArgemnt>.value(
      value: TestBaseArgemnt.getInstance(
        BaseNoneState(),
      ),
      builder: (context, child) => const MaterialApp(
        home: DemoPage(),
      ),
    ),
  );
}

class DemoState {
  DemoState();
}

class DemoModel extends BaseModel<DemoState> with ProviderTickerProviderStateMixin {
  DemoModel.getInstance(super.initial) : super.getInstance();

  [@override](/user/override)
  bool get dataIsEmpty => false; // 页面显示状态根据此值判断

  [@override](/user/override)
  List<VoidAsyncFunction> initFutures() {
    // 所有的初始化异步方法 (例如: 第一次进来的网络请求)
    return [];
  }
}

class DemoPage extends InitBaseStatelessWidget<DemoModel, DemoState> {
  const DemoPage({super.key});

  [@override](/user/override)
  void finish() {}

  [@override](/user/override)
  DemoModel getModel() {
    return DemoModel.getInstance(DemoState());
  }

  [@override](/user/override)
  Widget successedBuilder(BuildContext context) {
    return const Center(
      child: Text('successedBuilder'),
    );
  }
}

更多关于Flutter基础工具插件provider_base_tools的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter基础工具插件provider_base_tools的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，provider_base_tools 是一个假设的 Flutter 插件名称，用于基础工具的状态管理。虽然这不是一个实际存在的知名插件，但我可以为你提供一个类似的代码案例，展示如何使用 Flutter 的 Provider 包来实现基础工具的状态管理。

在 Flutter 中，Provider 包是一个非常流行的状态管理解决方案，它允许你在不同的组件之间共享数据，而无需通过复杂的构造函数参数传递数据。

下面是一个简单的示例，展示了如何使用 Provider 包来管理一些基础工具的状态，比如主题颜色、用户信息等。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 provider 依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0  # 请检查最新版本号

2. 创建基础工具类

创建一个类来管理基础工具的状态，比如主题颜色：

import 'package:flutter/material.dart';

class BaseTools with ChangeNotifier {
  Color _themeColor = Colors.blue;

  Color get themeColor => _themeColor;

  set themeColor(Color color) {
    _themeColor = color;
    notifyListeners();
  }

  // 可以添加更多基础工具状态管理
}

3. 使用 MultiProvider 包装应用

在你的 main.dart 文件中，使用 MultiProvider 包装你的应用，并提供 BaseTools 实例：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'base_tools.dart'; // 导入你创建的 BaseTools 类

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => BaseTools()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Provider Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

4. 在组件中使用 Consumer 访问状态

在你的 HomePage 或其他组件中，使用 Consumer 或 Selector 来访问和监听 BaseTools 的状态变化：

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Theme Color',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            Consumer<BaseTools>(
              builder: (context, baseTools, child) {
                return Container(
                  width: 100,
                  height: 100,
                  color: baseTools.themeColor,
                );
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                final baseTools = Provider.of<BaseTools>(context, listen: false);
                baseTools.themeColor = Colors.red;
              },
              child: Text('Change Theme Color to Red'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个 BaseTools 类来管理主题颜色，并使用 Provider 包将其状态在整个应用中共享。然后，我们在 HomePage 中使用 Consumer 来监听 BaseTools 的状态变化，并相应地更新 UI。

请注意，虽然这个示例中的 BaseTools 类相对简单，但你可以根据需要扩展它以包含更多的基础工具状态管理功能。

回到顶部