Flutter依赖注入与状态管理插件riverpod_builder的使用
Flutter依赖注入与状态管理插件riverpod_builder的使用
目的
这个包是为了方便使用一些设计模式的Riverpod包。我创建这个包是为了让使用Riverpod的Provider像ListView和PageView一样在Flutter标准库中实现。我们相信有Flutter开发经验的人可以轻松地处理它。
视图构建器 (builder)
@override
Widget build(BuildContext context) {
// 包装这个构建器
return RiverpodBuilder(
// 设置要使用的Provider
provider: firstViewModelProvider,
builder: (context, ref, vm, state, reader) {
return Scaffold(
appBar: AppBar(
title: const Text('First View'),
automaticallyImplyLeading: false,
),
body: SizedBox(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("${vm.count}"),
const SizedBox(height: 20),
ElevatedButton(
child: const Text("Add Count"),
onPressed: () {
reader.addCount();
},
)
],
),
),
);
},
);
}
参数
名称 | 意义 |
---|---|
provider | Riverpod Provider |
builder | 使用方式类似于ListView或PageView |
builder 属性
名称 | 意义 |
---|---|
context | 构建上下文 |
ref | 表示WidgetRef |
vm | (通知者) ref.watch(provider.notifier) |
state | ref.watch(provider) |
reader | ref.read(provider.notifier) |
日志
视图模型
class FirstViewModel extends BaseViewModel<FirstViewState> {
@override
get instanse => const FirstViewState();
int get count => state.count;
// 监听其他Provider
SecondViewModel get secondVM =>
widgetRef.read(secondViewModelProvider.notifier);
@override
void onInit() async {
// 异步处理也是可能的
await Future.delayed(const Duration(seconds: 1));
super.onInit();
}
void addCount() {
state = state.copyWith(count: state.count + 1);
}
void showNextView() {
// 有BuildContext
// 不需要传递任何参数
Navigator.of(context).pushNamed("second_view");
}
}
属性
名称 | 意义 |
---|---|
context | 构建上下文 |
ref | 表示ProviderRef |
widgetRef | 表示WidgetRef |
state | 这个状态 |
方法
名称 | 意义 |
---|---|
onInit | 当此类初始化时调用(异步处理也是可能的) |
onDispose | 当此关闭时调用 |
refreshProvider | 使用invalidate(refresh)刷新其他Provider |
预览
支持的Providers类型的状态
注意:这个包需要Riverpod 2或更高版本。
对应关系
构建器 | Provider类型 | 基础VM |
---|---|---|
RiverpodBuilder | NotifierProvider | BaseViewModel |
KeepRiverpodBuilder | AutoDisposeNotifierProvider | KeepBaseViewModel |
目前我们提供了两种类型的构建器。我们计划在未来增加支持的Provider类型,并适应钩子。
补充信息
我们知道很多人在这种情况下使用stateNotifierProvider。 然而,由于Riverpod开发者推荐使用NotifierProvider,我们决定率先响应。
扩展包
扩展这个包非常简单。 例如:如果您想定义在所有VM中都想要使用的通用方法…
在这种情况下,在定义其他Provider之后,为InnerViewModel创建一个扩展类。
import 'package:fluttertoast/fluttertoast.dart';
extension InnerViewModelEXT on InnerViewModel {
// OverlayLoadingView.provider = 管理加载的provider
bool get isLoading => providerRef.read(OverlayLoadingView.provider);
// 显示加载
void showLoading() {
providerRef.read(OverlayLoadingView.provider.notifier).show();
}
// 隐藏加载
void hideLoading() {
providerRef.read(OverlayLoadingView.provider.notifier).hide();
}
void showAlert(String message) {
// 警告方法
}
void showToast(String message) {
// 其他包也可以在这里定义和使用
Fluttertoast.showToast(
msg: message, toastLength: Toast.LENGTH_SHORT, timeInSecForIosWeb: 1);
}
}
更多关于Flutter依赖注入与状态管理插件riverpod_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter依赖注入与状态管理插件riverpod_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter中,依赖注入和状态管理是两个核心概念,它们对构建可维护和可扩展的应用程序至关重要。riverpod_builder
是一个基于 Riverpod 的依赖注入和状态管理插件,它提供了一些简化的 API 来处理这些需求。下面是一个使用 riverpod_builder
的代码案例,展示了如何进行依赖注入和状态管理。
首先,确保你的 pubspec.yaml
文件中包含了必要的依赖:
dependencies:
flutter:
sdk: flutter
riverpod: ^2.0.0 # 请检查最新版本
flutter_riverpod: ^2.0.0 # 请检查最新版本
然后,运行 flutter pub get
来安装这些依赖。
接下来,让我们编写一些代码来展示如何使用 riverpod_builder
。虽然 riverpod_builder
不是一个官方包(注意:在撰写本文时,riverpod_builder
并不是一个广泛认可的包名,这里假设你指的是使用 Riverpod 进行构建的过程),但我们将展示如何使用 Riverpod 来实现依赖注入和状态管理。
创建 Riverpod Provider
首先,我们需要创建一些 Riverpod providers。假设我们有一个简单的计数器应用:
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
return CounterNotifier();
});
class CounterNotifier extends StateNotifier<int> {
CounterNotifier() : super(0);
void increment() {
state++;
}
}
使用 Riverpod 进行依赖注入和状态管理
接下来,我们在 Flutter 应用中使用这些 providers:
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'counter_provider.dart'; // 假设上面的代码保存在这个文件中
void main() {
runApp(
ProviderScope(
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$count',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
ref.read(counterProvider.notifier).increment();
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
在这个例子中,ProviderScope
是 Riverpod 的顶级 widget,它提供了一个环境,让所有的子 widget 可以访问到 providers。ConsumerWidget
是一个方便的基类,它允许你使用 ref.watch
和 ref.read
来访问和监听 providers 的状态。
总结
上述代码展示了如何使用 Riverpod 进行依赖注入和状态管理。虽然没有直接使用名为 riverpod_builder
的包(因为它可能不是一个存在的包),但通过使用 Riverpod 本身的 API,我们可以实现类似的功能。Riverpod 提供了一个强大且灵活的方式来管理应用的状态和依赖项,使得构建复杂的 Flutter 应用变得更加容易。