Flutter 中 Provider 的使用指南
目录1.什么是 Provider
2.如何安装 Provider
3.根本使用方式
1.使用ChangeNotifierProvider提供状态
2.使用 Provider.of 手动读取状态
3.多Provider 的使用
4.常见的 Provider 范例
在 Flutter 开发中，状态管理是一个常见的需求。Provider 是 Flutter 官方推荐的一种简单而强盛的状态管理办理方案。本文将介绍 Provider 的根本用法和一些常见场景下的应用。
1.什么是 Provider
Provider 是一个 Flutter 的插件包，旨在简化状态管理和依赖注入。它使用 InheritedWidget 作为底层实现，通过提供一种订阅与更新的机制，能够让应用在状态变革时主动革新对应的 UI，极大地提拔了开发体验。
2.如何安装 Provider
在项目的 pubspec.yaml 文件中添加 Provider：
dependencies:
provider: ^6.1.2
然后执行以下下令安装依赖：
flutter pub get
3.根本使用方式
在使用 Provider 之前，我们需要定义一个简单的状态类。以下是一个计数器的示例：
import 'package:flutter/material.dart';
class Counter with ChangeNotifier{
int _count = 0;
int get count => _count;
void increment(){
_count++;
notifyListeners();//通知监听者刷新
}
} 在这里，Counter 类包含一个 count 属性和一个 increment 方法。ChangeNotifier 的 notifyListeners 方法会关照所有监听此对象的 Widget 更新界面。
1.使用ChangeNotifierProvider提供状态
在应用的根组件中使用 ChangeNotifierProvider，将 Counter 类实例注入到 Widget 树中，使整个应用都可以访问它的状态。
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: const MyApp(),
),
);
} 2. 使用 Consumer 或 Provider.of 读取状态
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Consumer(builder: (context,counter,child){
return Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
);
}),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
在这个例子中，Consumer 会主动监听 Counter 对象的变革，并在 count 值更新时重修它内部的 UI。
2.使用 Provider.of 手动读取状态
Provider.of 可以用于获取 Provider 提供的对象。若不需要 UI 主动更新，可以使用 listen: false 参数，以避免不必要的重修。
floatingActionButton: FloatingActionButton(
onPressed: () {
Provider.of<Counter>(context, listen: false).increment();
},
child: Icon(Icons.add),
)
3.多Provider 的使用
当应用需要管理多个状态时，可以使用 MultiProvider 将多个状态注入 Widget 树中：
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => Counter()),
ChangeNotifierProvider(create: (context) => AnotherModel()),
],
child: MyApp(),
),
);
}
4.常见的 Provider 范例
常见的Provider有以下几种范例：
Provider：实用于提供静态数据或单次创建的数据，比方设置文件、常量等。
ChangeNotifierProvider：用于相应式状态管理，连合 ChangeNotifier 使用，适合需要动态更新 UI 的场景。
FutureProvider：用于处理异步数据加载，可以绑定一个 Future 并将结果传递给子组件。 StreamProvider：监听数据流的变革，适合吸收事件流的场景。
我们可以通过下面的例子看一下FutureProvider的用法：
假设我们有一个异步数据源，可以使用 FutureProvider 来处理：
Future<String> fetchData() async {
await Future.delayed(Duration(seconds: 2));
return "从服务器获取的数据";
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FutureProvider<String>(
create: (_) => fetchData(),
initialData: "加载中...",
child: MaterialApp(
home: DataScreen(),
),
);
}
}
class DataScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final data = Provider.of<String>(context);
return Scaffold(
appBar: AppBar(title: Text("FutureProvider 示例")),
body: Center(
child: Text(data),
),
);
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]