深入探索Flutter中的状态管理:使用Provider库
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// 此处省略其他代码...
// 创建和使用Provider
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => Counter()),
],
child: MaterialApp(
home: MyHomePage(),
),
);
}
}
// 定义一个简单的Model类,包含一个计数器
class Counter with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners(); // 通知监听者状态已更新
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Flutter Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
// 使用Selector来避免不必要的重建
Selector<Counter, int>(
selector: (context, counter) => counter.count,
builder: (context, count, child) {
return Text(
'$count',
style: Theme.of(context).textTheme.headline4,
);
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => Provider.of<Counter>(context, listen: false).increment(),
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
这个代码示例展示了如何在Flutter应用中使用Provider库来管理状态。我们创建了一个简单的Counter
类,并在应用的根Widget中使用ChangeNotifierProvider
来提供这个类的实例。在MyHomePage
中,我们使用Selector
来避免不必要的重建,并且在floatingActionButton
的onPressed
回调中,我们通过Provider.of
获取Counter
实例并调用increment
方法,从而触发状态更新。
评论已关闭