我想在从 Riverpod 模型提供程序构建的 Listview 上使用拉刷新,该提供程序从 Future Provider 获取数据
I want to use pull to refresh on a Listview that is built from a Riverpod Model provider that gets it's data from a Future Provider
body: Container(
child: Consumer(builder: (context, watch, child) {
var wallet = watch(walletBuilderProvider);
//print(wallet.allWalletItems[0].eventName);
return WalletList(wallets: wallet.allWalletItems);
}),
)
final walletBuilderProvider =
ChangeNotifierProvider.autoDispose<WalletModel>((ref) {
final walletData = ref.watch(dataProvider);
// Create an object by calling the constructor of WalletModel
// Since we now have memory allocated and an object created, we can now call functions which depend on the state of an object, a "method"
final walletModel = WalletModel();
walletModel.buildWallet(walletItems: walletData);
return walletModel;
});
我最初做的是在加载之前刷新所有数据,我只是调用
context.refresh(dataProvider);
context.refresh(walletBuilderProvider);
这是被调用以显示数据的列表。
class WalletList extends StatelessWidget {
final List<Wallet> wallets;
WalletList({required this.wallets});
@override
Widget build(BuildContext context) {
return Container(
child: wallets.isEmpty
? Container(
height: 150,
child: Center(
child: Text(
"List is empty",
style: TextStyle(fontSize: 18, color: Colors.white),
),
),
)
: getWalletListItems());
// return ListView(
// children: getWalletListItems(),
// );
}
ListView getWalletListItems() {
print(wallets.length);
print("afterwallets");
var walletList = wallets
.map((walletItem) => WalletListItem(wallet: walletItem))
.toList();
return ListView.builder(
itemCount: walletList.length,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) {
double scale = 1.0;
return Opacity(
opacity: scale,
child: Align(
heightFactor: 0.7,
alignment: Alignment.topCenter,
child: walletList[index]),
);
});
}
}
我最后想做的是使用某种形式的 RefreshIndictator 来刷新两个提供者,但是当我尝试在消费者或 WalletList 中实现它时,我根本没有看到任何变化。
首先 walletBuilderProvider
观看 dataProvider
所以你只需要刷新 dataProvider
,这将强制刷新所有依赖它的供应商
您是否尝试过使用 RefreshIndicator
小工具?
RefreshIndicator(
onRefresh: () async => context.refresh(dataProvider),
child: WalletList(wallets: wallet.allWalletItems),
);
body: Container(
child: Consumer(builder: (context, watch, child) {
var wallet = watch(walletBuilderProvider);
//print(wallet.allWalletItems[0].eventName);
return WalletList(wallets: wallet.allWalletItems);
}),
)
final walletBuilderProvider =
ChangeNotifierProvider.autoDispose<WalletModel>((ref) {
final walletData = ref.watch(dataProvider);
// Create an object by calling the constructor of WalletModel
// Since we now have memory allocated and an object created, we can now call functions which depend on the state of an object, a "method"
final walletModel = WalletModel();
walletModel.buildWallet(walletItems: walletData);
return walletModel;
});
我最初做的是在加载之前刷新所有数据,我只是调用
context.refresh(dataProvider);
context.refresh(walletBuilderProvider);
这是被调用以显示数据的列表。
class WalletList extends StatelessWidget {
final List<Wallet> wallets;
WalletList({required this.wallets});
@override
Widget build(BuildContext context) {
return Container(
child: wallets.isEmpty
? Container(
height: 150,
child: Center(
child: Text(
"List is empty",
style: TextStyle(fontSize: 18, color: Colors.white),
),
),
)
: getWalletListItems());
// return ListView(
// children: getWalletListItems(),
// );
}
ListView getWalletListItems() {
print(wallets.length);
print("afterwallets");
var walletList = wallets
.map((walletItem) => WalletListItem(wallet: walletItem))
.toList();
return ListView.builder(
itemCount: walletList.length,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) {
double scale = 1.0;
return Opacity(
opacity: scale,
child: Align(
heightFactor: 0.7,
alignment: Alignment.topCenter,
child: walletList[index]),
);
});
}
}
我最后想做的是使用某种形式的 RefreshIndictator 来刷新两个提供者,但是当我尝试在消费者或 WalletList 中实现它时,我根本没有看到任何变化。
首先 walletBuilderProvider
观看 dataProvider
所以你只需要刷新 dataProvider
,这将强制刷新所有依赖它的供应商
您是否尝试过使用 RefreshIndicator
小工具?
RefreshIndicator(
onRefresh: () async => context.refresh(dataProvider),
child: WalletList(wallets: wallet.allWalletItems),
);