主Flutter计数器
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'data/providers.dart';
void main() {
runApp(
// For widgets to be able to read providers, we need to wrap the entire
// application in a "ProviderScope" widget.
// This is where the state of our providers will be stored.
ProviderScope(
child: MyApp(),
),
);
}
class MyApp extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
var men = ref.watch(populationController).men.toString();
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Example')),
body: Center(
child: Column(
children: [
Text("Amount of men is $men"),
IconButton(
onPressed: () {
ref.read(populationController.notifier).increaseMen();
},
icon: const Icon(Icons.plus_one))
],
)),
),
);
}
}
定义riverpod类的文件
import 'package:flutter_riverpod/flutter_riverpod.dart';
class PopulationTracker {
int women = 0;
int men = 0;
}
class PopulationNotifier extends StateNotifier<PopulationTracker> {
PopulationNotifier() : super(PopulationTracker());
void increaseMen() {
state.men += 1;
}
void increaseWomen() {
state.women += 1;
}
void minusWomen() {
state.women -= 1;
}
void minusMen() {
state.men -= 1;
}
}
final populationController =
StateNotifierProvider<PopulationNotifier, PopulationTracker>(
(ref) => PopulationNotifier());
我试着更新我的人口跟踪器的状态使用riverpod和flutter。我对这一点很陌生,不能弄清楚为什么UI上的计数器不更新,如果我打印状态的值到控制台,我可以看到值更新。
我希望计数器在UI上更新为+1,但它没有。
为什么计数器在UI上不更新?
1条答案
按热度按时间csbfibhn1#
状态对象没有更改标识。只是变异而已。变异不足以向侦听器发出新事件。您需要将state视为只读,并使用copyWith这样的操作使其工作。
此外,您应该离开StateNotifier并开始使用Notifier。如果您一直在使用Notifier,我还可以建议您仅为mutate方法添加ref.notifyListeners(),并使其以这种方式工作。
总之,请停止使用ChangeNotifier、StateNotifier和StateProvider。仅支持用于传统目的。