时间戳

首页 > 解决方案 > 如何从父级中的子小部件显示 CircularProgressIndicator()？

flutter - 如何从父级中的子小部件显示 CircularProgressIndicator()？

问题描述

我有来自子状态小部件的网络调用。为此，我需要在包含 Scaffold 的父小部件中显示 CircularProgressIndicator。有什么办法可以显示吗？

父小部件：

class OrderDetailPage extends StatefulWidget {
   @override
  _OrderDetailPageState createState() => _OrderDetailPageState();

}

class _OrderDetailPageState extends State<OrderDetailPage> {
    bool isloading = false;

    Widget build(BuildContext context){
       return Scaffold(body: isLoading ? Center(child: CircularProgressIndicator() : Container(
          child: ChildWidget()
      ));
    }
}

孩子：

class ChildWidget extends StatefulWidget {
  @override
  ChildWidgetState createState() => ChildWidgetState();
}

class ChildWidgetState extends State<OrderDetailPage> {
  return Center(child: RaisedButton(onPressed: () { // need to make isloading in parent widget to true and false})
}

标签： flutterdart

解决方案

有两种方法可以State向上传递到 Widget Tree。

将回调函数从父级传递给子级：

class OrderDetailPage extends StatefulWidget {
   @override
  _OrderDetailPageState createState() => _OrderDetailPageState();

}

class _OrderDetailPageState extends State<OrderDetailPage> {
    bool isloading = false;
    Widget build(BuildContext context){
       return Scaffold(body: isLoading ? Center(child: CircularProgressIndicator() : Container(
          child: ChildWidget(callback: () => setState(() => isLoading = !isLoading))
      ));
    }
}

孩子：

class ChildWidget extends StatefulWidget {
  ChildWidget({this.callback});
  @override
  ChildWidgetState createState() => ChildWidgetState();
}

class ChildWidgetState extends State<OrderDetailPage> {
  return Center(child: RaisedButton(onPressed: () { 
   widget.callback();
}

较晚的替代方法是使用状态管理解决方案，例如InheritedWidget，Provider包或许多其他解决方案之一。

推荐阅读