在Flutter中显示加载的最佳方式是什么

vkc1a9a2  于 2023-03-24  发布在  Flutter
关注(0)|答案(1)|浏览(181)

在iOS native中,我可以使用AOP在UIViewController中添加加载方法,如下所示

@interface UIViewController (Loading)
- (void)showFullScreenLoading;
- (void)showLoadingFloatViewWithTitle:(NSString*) title;
@end

我可以在任何地方显示一个加载视图,如下所示:

[self showLoadingFloatViewWithTitle:@"processing"]

但是在flutter中,ui都是在widget的build方法中构建的,这样做似乎不太方便,我必须为每个请求做一些逻辑来显示/隐藏加载视图。
对于这种情况,flutter是否有最佳实践?

hwamh0ep

hwamh0ep1#

首先,作为一个比较,虽然很奇怪,你 * 可以 * 做一些类似的Flutter:

class LoadingScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return new LoadingScreenState();
  }
}
class LoadingScreenState extends State<LoadingScreen>{
bool isLoading = true;

  @override
  Widget build(BuildContext context) {
    if (isLoading)
      return Container();
    else
      return NotLoadingScreen();
  }

  void ShowLoading(){
    setState((){isLoading=true;});
  }

  Widget NotLoadingScreen(){
    //Should be implemented in each screen that inherits this class.
    return Container();
  }
}

当你创建你的屏幕时,你可以从LoadingScreen扩展:

Class MyScreen extends LoadingScreen{
  Widget NotLoadingScreen(){
    // Here would have your screen UI code.
}
}

这会给予你一个和你描述的相似的结果。
然而,这并没有遵循Flutter的任何建议。你可以看到,小部件通常是组合而不是继承的。
遵循这个原则,你应该声明一个widget作为一个wrapper加载屏幕,它接收一个子widget作为参数。这个子参数将代表每个可能有加载指示符的屏幕:

class LoadingScreen extends StatelessWidget {
  final Widget child;
  final bool isLoading;

  const LoadingScreen ({super.key, required this.child, required this.isLoading});

@override
  Widget build(BuildContext context) {
    if (isLoading)
      return Container();
    else
      return child;
  }

}

你可以把screen作为参数来使用它:

[...]
return LoadingScreen(
         isLoading:true,
         child:OtherScreen(),
);

这将是一个例子,说明您将如何按照上面的例子组合小部件。
值得注意的一点是,通过这样做,显示或隐藏加载的控件将位于widget树的上方。这可能不适合您的需求。为了将其放在子屏幕中,您需要更好的状态管理方法。一个简单的回调可以工作,或者在更复杂的情况下,您可以使用其他方法,将方法公开给小部件树的整个部分。继承的小部件或像Provider这样的包可以做到这一点。你可以阅读更多关于它here .

相关问题