首页 文章

Flutter:如何将CupertinoActivityIndicator放入带有SliverList的customScrollView中

提问于
浏览
0

这是我想要实现的模型 - 它是CupertinoSliverNavigationBar下面的CupertinoActivityIndicator,用于通知用户正在下载数据 .
enter image description here

下载后,它应该是这样的:

enter image description here

现在,我一直在尝试使用以下代码获得此效果:

List<Trade> trades = [];

  showLoadingDialog() {
    return trades.length == 0;
  }

  getBody() {
    if (showLoadingDialog()) {
      return getProgressDialog();
    } else {
      return getTradeItemList();
    }
  }

  getTradeItemList() {
    return new CupertinoPageScaffold(
        child: new CustomScrollView(slivers: <Widget>[
      const CupertinoSliverNavigationBar(
        largeTitle: const Text('Coffee Shop'),
      ),
      getBody(),
    ]));
  }

  getProgressDialog() {
    return new Container(
        decoration: const BoxDecoration(
          color: CupertinoColors.white,
        ),
        child: new Center(child: const CupertinoActivityIndicator()));
  }

但是,我收到此错误是因为我试图将非RenderSliver类型放入Sliver中 . 换句话说,我将CupertinoActivityIndicator放入一个Sliver中,代码拒绝它 .

══╡由WIDGETS LIBRARY引起的异常╞═══════════════════════════════════════════════════════════════════════════════════下面的断言被抛出构建容器(bg:BoxDecoration(颜色:颜色(0xffffffff))):RenderViewport期望RenderSliver类型的子项但是收到了RenderDecoratedBox类型的子项 . RenderObjects期望特定类型的子项,因为它们在布局和绘制期间与子项协调 . 例如,RenderSliver不能是RenderBox的子项,因为RenderSliver不理解RenderBox布局协议 .

我能达到我想要的最接近的效果显示在下面的gif中 . 但是,正如您可以清楚地看到的,当CupertinoActivityIndicator可见时,CupertinoSliverNavigationBar不会显示 . 只有在下载了数据之后,才能看到显示“咖啡店”的CupertinoSliverNavigationBar .

enter image description here

我使用以下代码实现了上述目标:

List<Trade> trades = [];

  showLoadingDialog() {
    return trades.length == 0;
  }

  getBody() {
    if (showLoadingDialog()) {
      return getProgressDialog();
    } else {
      return getTradeItemList();
    }
  }

  getProgressDialog() {
    return new Container(
        decoration: const BoxDecoration(
          color: CupertinoColors.white,
        ),
        child: new Center(child: const CupertinoActivityIndicator()));
  }


  getTradeItemList() {
    return new CupertinoPageScaffold(
      child: new CustomScrollView(
        slivers: <Widget>[
          const CupertinoSliverNavigationBar(
            largeTitle: const Text('Coffee Shop'),
          ),
          new SliverPadding(
            // Top media padding consumed by CupertinoSliverNavigationBar.
            // Left/Right media padding consumed by Tab1RowItem.
            padding: MediaQuery
                .of(context)
                .removePadding(
                  removeTop: true,
                  removeLeft: true,
                  removeRight: true,
                )
                .padding,
            sliver: new SliverList(
              delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return new Tab1RowItem(
                    index: index,
                    lastItem: index == trades.length - 1,
                    color: "Coffee Beans",
                    colorName: "Buy coffee now",
                  );
                },
                childCount: trades.length,
              ),
            ),
          )
        ],
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return getBody();
  }

  @override
  void initState() {
    super.initState();
    loadDataTrades();
  }

谁能告诉我如何达到我想要的效果?

1 回答

  • 1
    Widget _mainFrame;
    
    
    @override
      Widget build(BuildContext context) {
        return new CustomScrollView(
          slivers: <Widget>[
    
            new CupertinoSliverNavigationBar(
              largeTitle: const Text("Coffe Shop"),
            ),
    
            _mainFrame,
    
          ],
        );
      }
    
    
    Widget _beforeDataLoaded() {
        return new SliverFillRemaining(
          child:  new Container(
            child: new Center(
              child: new CupertinoActivityIndicator(),
            ),
          ),
        );
      }
    
    
    
    Widget _dataLoadComplete() {
        return new SliverList(
          // Your list items
        );
      }
    

    如果加载完成,则将_mainFrame Widget从CupertionActivityIndicator更改为listview .

相关问题