Flutter江荚,如何设置最小加载状态时间?

dxxyhpgq  于 2022-12-19  发布在  Flutter
关注(0)|答案(2)|浏览(190)

使用Flutter和Riverpod构建一个应用程序,使用大量:

ref.watch(someProvider).when(data: (someData){
   // render layout with data
}, error: (err, stack) { 
  // do stuff with error
}, loading: (){
  return LoadingScreen(); <----
})

问题是,在大多数情况下,加载屏幕只呈现了一瞬间,导致糟糕的体验,应用程序感觉有点“跳跃”。我希望能够设置一个最小的加载状态,比如说2秒,有没有可能强制一个小部件保持渲染的最小时间量一些如何?

9q78igpj

9q78igpj1#

我有两个建议给你:
选项A -你可以在你的提供者中放置一个2秒的延迟,在加载和下一个状态之间的某个地方。这样你就可以让加载屏幕至少有2秒的可见时间。
选项B -你也可以把加载屏幕做成一个覆盖窗口小部件,它会在2秒后自动关闭。这样你就可以让加载屏幕显示2秒。
我相信在你的情况下任何一种方式都是好的,因为你说它 Flink ,我假设没有沉重/长的任务在状态之间完成。如果你确实需要沉重/长的任务,选项A保证任务在加载屏幕消失之前完成。

vs3odd8k

vs3odd8k2#

你可以创建Stopwatch来跟踪(近似)操作持续时间。这个例子会给予你一些启发。

final someProvider = FutureProvider<int>((ref) async {
  final operationDuration = Duration(seconds: 1); //random, you can give it random to test
  final stopwatch = Stopwatch()..start();
  final data = await Future.delayed(operationDuration);

  final minOperationTime = const Duration(seconds: 2);
  final extraWaiting = minOperationTime.inMilliseconds - stopwatch.elapsed.inMilliseconds;
  if (stopwatch.elapsed.inSeconds < 2) {
    await Future.delayed(minOperationTime - stopwatch.elapsed);
  }
  return extraWaiting;
});

和小部件

class LoadingTestOnFutureBuilder extends ConsumerWidget {
  const LoadingTestOnFutureBuilder({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ref.watch(someProvider).when(data: (someData) {
      return Text("got data  ${someData}");
    }, error: (err, stack) {
      return Text("Err");
    }, loading: () {
      return CircularProgressIndicator();
    });
  }
}

相关问题