如何正确显示刷新指示器隐藏后的零食栏

Question

我有RefreshIndicator和内部ListView，以便RefreshIndicator工作向下滑动手势在ListView上，我还将GlobalKey<RefreshIndicatorState>()设置为RefreshIndicator，以便我可以在按钮点击上显示指示灯。

一切正常，但在_onRefresh我调用showSnackBar，但蛇条显示两次，我不知道为什么

final _refreshIndicatorKey = GlobalKey<RefreshIndicatorState>();
@override
Widget build(BuildContext context) {
return RefreshIndicator(
key: _refreshIndicatorKey,
onRefresh: _onRefresh,
child: buidlListView(snapshot),
);
}
Widget buidlListView(AsyncSnapshot<List<Model>> snapshot) {
if (snapshot.hasData && snapshot.data!.isNotEmpty) {
return buildModelList(snapshot);
}
return buildNoModelList();
}
Widget buildNoModelList() {
return ListView(
children: [
ElevatedButton(
onPressed: _onRefresh,
child: const SizedBox(
width: double.infinity,
child: Text('Refresh', textAlign: TextAlign.center),
),
],
);
}
Widget buildModelList(
AsyncSnapshot<List<Model>> snapshot,
) {
final modelList = snapshot.data!;
return ListView.separated(
padding: const EdgeInsets.all(16),
itemCount: modelList.length,
separatorBuilder: (context, index) => const SizedBox(height: 16),
itemBuilder: (context, index) {

final model = modelList[index];

return ModelCard(
key: ValueKey(model),
model: model,
);
},
);
}
Future<void> _onRefresh() async {
// ignore: unawaited_futures
_refreshIndicatorKey.currentState?.show();
final isModelExist = await loadModels();
// not returning this because i want to show snack bar after indicator hides
Future<void>.delayed(const Duration(seconds: 3));
if (!isModelExist) {
showSnackBar();
}
return Future.value();
}
void showSnackBar() {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
behavior: SnackBarBehavior.floating,
content: Text('No Model Found'),
),
);
}
Future<bool> loadModels() async {
final snapshot = await modelCollectionRef().get();
if (snapshot.size > 0) {
//...
return true;
}
return false;
}

Answer 1

请参考下面的示例

我使用了下面提到的刷新指示器插件

pull_to_refresh: ^2.0.0

import 'package:flutter/material.dart';
import 'package:flutter_app_modal_sheet/ProviderModel/ProviderCNModel.dart';
import 'package:provider/provider.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
void main() {
runApp(
MyApp(),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
/*Controllers*/
final RefreshController _refreshController =
RefreshController(initialRefresh: false);
@override
void initState() {
super.initState();
}
@override
void dispose() {
_refreshController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SmartRefresher(
controller: _refreshController,
enablePullDown: true,
header: MaterialClassicHeader(),
onRefresh: () async {
await Future.delayed(const Duration(seconds: 3), () {});
_refreshController.refreshCompleted();
showSnackBar();
},
child: ListView.builder(
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Text("Index Value: $index"),
);
},
),
),
);
}
void showSnackBar() {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
behavior: SnackBarBehavior.floating,
content: Text('No Model Found'),
),
);
}
}

Answer 2

在_refreshIndicatorKey.currentState?.show();,解决了这个问题,我呼吁_onRefresh()和使用这种方法在黑色按钮水龙头当第一次触发刷新过程然后在_onRefresh()我们调用_refreshIndicatorKey.currentState?.show();告诉RefreshIndicator跑回电话onRefresh也具有一定_onRefresh()所以这就是为什么_onRefresh()triggred snakcbar显示,两次两次为了解决这个我就叫_refreshIndicatorKey.currentState?.show();按钮点击然后RefreshIndicator自我运行_onRefresh()回调。

Widget buildNoModelList() {
return ListView(
children: [
ElevatedButton(
onPressed: () {
_refreshIndicatorKey.currentState?.show();
},
child: const SizedBox(
width: double.infinity,
child: Text('Refresh', textAlign: TextAlign.center),
),
],
);
}
Future<void> _onRefresh() async {
final isModelExist = await loadModels();
// not returning this because i want to show snackbar after indicator hides
await Future<void>.delayed(const Duration(seconds: 3));
if (!isModelExist) {
showSnackBar();
}
return;
}