Question

我有这个屏幕，上面有一个searchWidget，下面有一个列表。但是列表数据是在 searchWidget 中查询之后出现的，在等待获取数据时，我想在屏幕中央呈现一个 ActivityIndicator。但是进度指示器似乎并没有占用屏幕的其余空间，它就在 searchWidget 的正下方，如果我将它包裹在 Expanded 中，则会出现错误

body: SingleChildScrollView(
    physics: BouncingScrollPhysics(),
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        SearchWidget(
            hintText: 'Search',
            textEditingController: _textEditingController,
            onCancel: () {
              setState(() {
                _textEditingController.text = '';
                data = [];
              });
            },
            onSubmitted: (val) {
              onSubmitted(val);
            }),
        _isLoading 
            ? (Container(
                child: Center(
                  child: CupertinoActivityIndicator(
                    radius: 15,
                  ),
                ),
              ))
            : (data.length == 0
                ? SizedBox()
                : Padding(
                    padding:
                        const EdgeInsets.only(top: 8, right: 8, left: 8),
                    child: ListView.builder(
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: data.length,
                      itemBuilder: (ctx, i) =>
                          ListItem(item: data[i]),
                    ),
                  ))
      ],
    ),
  ),

Answer 1

尝试扩展：

    _isLoading 
        ? (Expanded(
            child: Center(
              child: CupertinoActivityIndicator(
                radius: 15,
              ),
            ),
          ))

Answer 2

将您的 CupertinoActivityIndicator 放入 Column 并使用 Spacer 将其置于屏幕中间。就像这样：

Column(
  children: [
    Spacer(),
    Container(
      child: Center(
        child: CupertinoActivityIndicator(
          radius: 15,
         ),
       ),
      ),
     Spacer()
   ]
 )

如何在 SingleChildScrollView 内的列内居中小部件

2 个答案: