Question

我有一个返回CircularProgressIndicator()

的小部件

它显示在屏幕左上方的圆形标记上。

但是我想将其作为叠加层放置在屏幕中央。

我正在检查小部件列表，但是找不到应该用作覆盖的小部件。

我应该把它放在哪一层？

现在我的代码是这样的，加载时显示CircularProgressIndicator而不是ListView

但是我想将CircularProgressIndicator()放在ListView上

 Widget build(BuildContext context) {
    if(loading) {
      return CircularProgressIndicator();
    }
    return ListView.builder(
      controller: _controller,
      itemCount: articles.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(articles[index]),
        );
      },
    );
  }

非常感谢您的回答。

我用下面的堆栈小部件解决。起初，我尝试使用叠加层，但遇到一些错误。因此，我只使用堆栈。

@override
  Widget build(BuildContext context) {
    Widget tempWidget = new CircularProgressIndicator();
    if(loading) {
         tempWidget = new CircularProgressIndicator();
    }
    else {
        tempWidget = new Center();//EmptyWidget
    }
    return Stack(
      children: <Widget>[
        ListView.builder(
          controller: _controller,
          itemCount: articles.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(articles[index].title),
              onTap: () => onTapped(context,articles[index].url),
            );
          },
        ),
        Center(
          child: tempWidget
        ),
      ]
    );
  }

Answer 1

Stack(
    children: <Widget>[
      ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 100,
            color: Colors.red,
          );
        },
        itemCount: 10,
      ),
      Center(
        child: CircularProgressIndicator(),
      ),
    ],
  )

Answer 2

要使项目彼此重叠或放置，通常应使用here中所述的“堆栈”小部件或“重叠”。对于您的用例，我建议您检出modal progress hud package。

Answer 3

Stack(
    children: <Widget>[
      ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 100,
            color: Colors.red,
          );
        },
        itemCount: 10,
      ),
     isLoading?  Container(child: Center(
        child: CircularProgressIndicator(),
      )): Container(), //if isLoading flag is true it'll display the progress indicator
    ],
  )

或从某个地方加载数据时可以使用futureBuilder或streamBuilder，并且您要根据状态更改ui

当特定条件为真时，如何在抖动中显示进度指示器？

3 个答案: