尽管提供程序已刷新,但 Flutter Hooks Riverpod 不更新小部件
Flutter Hooks Riverpod not updating widget despite provider being refreshed
我已经研究 flutter 几个月了,现在我正在试验 Hooks 和 Riverpod,这非常重要,所以一些结果可以由提供者缓存并重复使用,只有在有更新。
但我在这里遇到了一个问题,我无法全神贯注于提供程序更新以反映在小部件中。可以从这里查看完整示例 -> https://github.com/codespair/riverpod_update_issue 我添加了一些调试打印,我可以看到提供程序已正确刷新,但更改不会反映在小部件上。
该示例有一个可用的示例提供程序:
// create simple FutureProvider with respective future call next
final futureListProvider =
FutureProvider.family<List<String>, int>((ref, value) => _getList(value));
// in a real case there would be an await call inside this function to network or local db or file system, etc...
Future<List<String>> _getList(int value) async {
List<String> result = [...validValues];
if (value == -1) {
// do nothing just return original result...
} else {
result = []..add(result[value]);
}
debugPrint('Provider refreshed, result => $result');
return result;
}
更改后的下拉列表会刷新提供程序:
Container(
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(5, 2, 5, 1),
child: DropdownButton<String>(
key: UniqueKey(),
value: dropDownValue.value.toString(),
icon: Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
underline: Container(
height: 1,
color: Theme.of(context).primaryColor,
),
onChanged: (String? newValue) {
dropDownValue.value = newValue!;
context
.refresh(futureListProvider(intFromString(newValue)));
},
items: validValues
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: Theme.of(context).primaryTextTheme.subtitle1,
),
);
}).toList(),
),
),
还有一个使用提供者元素呈现的简单列表,尽管提供者已正确刷新,如您在 debugPrinting 中所见,它永远不会更新:
Container(
key: UniqueKey(),
height: 200,
child: stringListProvider.when(
data: (stringList) {
debugPrint('List from Provider.when $stringList');
return MyListWidget(stringList);
// return _buildList(stringList);
},
loading: () => CircularProgressIndicator(),
error: (_, __) => Text('OOOPsss error'),
),
),
]),
class MyListWidget extends HookWidget {
final GlobalKey<ScaffoldState> _widgetKey = GlobalKey<ScaffoldState>();
final List<String> stringList;
MyListWidget(this.stringList);
@override
Widget build(BuildContext context) {
debugPrint('stringList in MyListWidget.build $stringList');
return ListView.builder(
key: _widgetKey,
itemCount: stringList.length,
itemBuilder: (BuildContext context, int index) {
return Card(
key: UniqueKey(),
child: Padding(
padding: EdgeInsets.all(10), child: Text(stringList[index])),
);
},
);
}
当我评估开发某些应用程序的方法时,我越来越倾向于采用更直接的方法来处理此类情况,因此我也愿意评估更简单、更直接的方法,但我真的很喜欢某些功能,例如useMemoized,useState 来自 hooks_riverpod.
在我们开始之前我要注意的一件事是您仍然可以使用 useMemoized
、useState
等而不使用 hooks_riverpod、使用 flutter_hooks.
就您的问题而言,您滥用了 family
。当您将新值传递给 family
时,您实际上是在创建另一个提供程序。这就是您的列表打印正确的原因,因为它是正确的,但正确的结果卡在您没有阅读的 ProviderFamily 中。
更简单的方法是创建一个 StateProvider,用于存储当前选定的值并从 FutureProvider 监视该提供者。它将自动更新列表而无需 refresh
.
final selectedItemProvider = StateProvider<int>((_) => -1);
final futureListProvider = FutureProvider<List<String>>((ref) async {
final selected = ref.watch(selectedItemProvider).state;
return _getList(selected);
});
DropdownButton<String>(
...
onChanged: (String? newValue) {
dropDownValue.value = newValue!;
context.read(selectedItemProvider).state = intFromString(newValue);
},
}
我已经研究 flutter 几个月了,现在我正在试验 Hooks 和 Riverpod,这非常重要,所以一些结果可以由提供者缓存并重复使用,只有在有更新。
但我在这里遇到了一个问题,我无法全神贯注于提供程序更新以反映在小部件中。可以从这里查看完整示例 -> https://github.com/codespair/riverpod_update_issue 我添加了一些调试打印,我可以看到提供程序已正确刷新,但更改不会反映在小部件上。
该示例有一个可用的示例提供程序:
// create simple FutureProvider with respective future call next
final futureListProvider =
FutureProvider.family<List<String>, int>((ref, value) => _getList(value));
// in a real case there would be an await call inside this function to network or local db or file system, etc...
Future<List<String>> _getList(int value) async {
List<String> result = [...validValues];
if (value == -1) {
// do nothing just return original result...
} else {
result = []..add(result[value]);
}
debugPrint('Provider refreshed, result => $result');
return result;
}
更改后的下拉列表会刷新提供程序:
Container(
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(5, 2, 5, 1),
child: DropdownButton<String>(
key: UniqueKey(),
value: dropDownValue.value.toString(),
icon: Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
underline: Container(
height: 1,
color: Theme.of(context).primaryColor,
),
onChanged: (String? newValue) {
dropDownValue.value = newValue!;
context
.refresh(futureListProvider(intFromString(newValue)));
},
items: validValues
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: Theme.of(context).primaryTextTheme.subtitle1,
),
);
}).toList(),
),
),
还有一个使用提供者元素呈现的简单列表,尽管提供者已正确刷新,如您在 debugPrinting 中所见,它永远不会更新:
Container(
key: UniqueKey(),
height: 200,
child: stringListProvider.when(
data: (stringList) {
debugPrint('List from Provider.when $stringList');
return MyListWidget(stringList);
// return _buildList(stringList);
},
loading: () => CircularProgressIndicator(),
error: (_, __) => Text('OOOPsss error'),
),
),
]),
class MyListWidget extends HookWidget {
final GlobalKey<ScaffoldState> _widgetKey = GlobalKey<ScaffoldState>();
final List<String> stringList;
MyListWidget(this.stringList);
@override
Widget build(BuildContext context) {
debugPrint('stringList in MyListWidget.build $stringList');
return ListView.builder(
key: _widgetKey,
itemCount: stringList.length,
itemBuilder: (BuildContext context, int index) {
return Card(
key: UniqueKey(),
child: Padding(
padding: EdgeInsets.all(10), child: Text(stringList[index])),
);
},
);
}
当我评估开发某些应用程序的方法时,我越来越倾向于采用更直接的方法来处理此类情况,因此我也愿意评估更简单、更直接的方法,但我真的很喜欢某些功能,例如useMemoized,useState 来自 hooks_riverpod.
在我们开始之前我要注意的一件事是您仍然可以使用 useMemoized
、useState
等而不使用 hooks_riverpod、使用 flutter_hooks.
就您的问题而言,您滥用了 family
。当您将新值传递给 family
时,您实际上是在创建另一个提供程序。这就是您的列表打印正确的原因,因为它是正确的,但正确的结果卡在您没有阅读的 ProviderFamily 中。
更简单的方法是创建一个 StateProvider,用于存储当前选定的值并从 FutureProvider 监视该提供者。它将自动更新列表而无需 refresh
.
final selectedItemProvider = StateProvider<int>((_) => -1);
final futureListProvider = FutureProvider<List<String>>((ref) async {
final selected = ref.watch(selectedItemProvider).state;
return _getList(selected);
});
DropdownButton<String>(
...
onChanged: (String? newValue) {
dropDownValue.value = newValue!;
context.read(selectedItemProvider).state = intFromString(newValue);
},
}