使用`ListenableBuilder`。
这是一个补充答案,演示如何使用`ListenableBuilder`在`ChangeNotifier`发生变化时重新构建UI。
这只是一个标准的计数器应用程序。
counter_model.dart
import 'package:flutter/foundation.dart';
class CounterModel extends ChangeNotifier {
int _counter = 0;
int get count => _counter;
void increment() {
_counter++;
notifyListeners();
}
}
main.dart
import 'counter_model.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _counterModel = CounterModel();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
ListenableBuilder(
listenable: _counterModel,
builder: (context, child) {
return Text(
'${_counterModel.count}',
style: Theme.of(context).textTheme.headlineMedium,
);
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _counterModel.increment,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
更新:先前的答案演示了AnimatedBuilder
的使用。
注意:在这种特殊情况下(以及大多数情况下),ValueNotifier
和ValueListenableBuilder
就足够了。请参阅Flutter状态管理入门。
AnimatedBuilder
(或者如果你想要一些继承自AnimatedWidget
的自定义类,则使用AnimatedWidget
) - pskinkChangeNotifier
,其中包含多个简单/复杂的ValueNotifiers
。通过整个ViewModelnotifyListeners()
或其精细调整的属性ValueNotifiers,UI会相应地得到通知。我使用ChangeNotifier
作为 ViewModel,因为ValueNotifier
子类需要进行等值检查==
进行通知。这意味着重写该==
+hashCode
,或者使用Equatable
。 - om-haChangeNotifier
的简单性和易用性。但是,在我的值通知器中,我从来没有必要重写==
和hashCode
。 - Suragch