我认为有更好的方法可以轻松管理您的应用状态,并且我同意使用provider 可能是有效的。
为应用内的所有小部件提供模型。我们正在使用
ChangeNotifierProvider 因为这是一种简单的重建方法
模型更改时的小部件。我们也可以只使用 Provider,但是
那么我们就得自己听 Counter 了。
阅读 Provider 的文档以了解所有可用的提供程序。
在构建器中初始化模型。这样,提供者可以拥有
计数器的生命周期,确保在不需要时调用dispose
没有了。
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: MyApp(),
),
);
}
最简单的模型,只有一个字段。 ChangeNotifier 是一个
在flutter:foundation 上课。 Counter 不依赖于 Provider。
class Counter with ChangeNotifier {
int count = 1;
void clickIncrease() {
count += 1;
notifyListeners();
}
}
Consumer 查找祖先 Provider 小部件并检索其
模型(计数器,在这种情况下)。然后它使用该模型来构建
小部件,并且会在模型更新时触发重建。
您可以在可以访问上下文的任何地方访问您的提供程序。
一种方法是使用Provider<Counter>.of(context)。
提供程序包还定义了上下文本身的扩展方法。
您可以在任何构建方法中调用context.watch<Counter>()
小部件访问 Counter 的当前状态,并要求 Flutter
随时重建您的小部件计数器更改。
您不能在外部构建方法中使用context.watch(),因为那样
通常会导致细微的错误。相反,您应该使用
context.read<Counter>(),获取当前状态但不获取
向 Flutter 询问未来的重建。
因为我们处于回调中,每当用户点击时都会调用该回调
FloatingActionButton,我们这里不在构建方法中。我们
应该使用context.read()。
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Scaffold is a layout for the major Material Components.
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Count:'),
Consumer<Counter>(
builder: (context, counter, child) => Text(
'${counter.value}',
style: Theme.of(context).textTheme.headline4,
),
),
],
),
),
// I've change the button to `FloatingActionButton` for better ui experience.
floatingActionButton: FloatingActionButton(
// Here is the implementation that you are looking for.
onPressed: () {
var counter = context.read<Counter>();
counter.increment();
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
完整代码:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: MyApp(),
),
);
}
class Counter with ChangeNotifier {
int count = 1;
void clickIncrease() {
count += 1;
notifyListeners();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Count:'),
Consumer<Counter>(
builder: (context, counter, child) => Text(
'${counter.count}',
style: Theme.of(context).textTheme.headline4,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
var counter = context.read<Counter>();
counter.clickIncrease();
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
实际应用:
有关提供程序包(Provider 来自哪里)的更多信息,请参阅package documentation。
有关 Flutter 中状态管理的更多信息以及其他方法的列表,请访问State management page at flutter.dev。