Flutter中CircularProgressIndicator未居中显示问题求助

问题出在当前的Column布局结构：Expanded组件已经占据了Column的剩余可用空间，导致CircularProgressIndicator只能被挤在Column的底部区域。要让进度指示器居中覆盖在WebView上方，需要用Stack组件实现层叠布局。

修改后的代码如下：

Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      body: WillPopScope(
        onWillPop: () async {
          print("back pressed");
          return false;
        },
        child: Column(
          children: [
            webProgress < 1
                ? SizedBox(
                    height: 5,
                    child: LinearProgressIndicator(
                      value: webProgress,
                      color: Colors.blue,
                      backgroundColor: Colors.white,
                    ),
                  )
                : SizedBox(),
            // 用Stack包裹WebView和CircularProgressIndicator
            Expanded(
              child: Stack(
                alignment: Alignment.center, // 全局居中对齐
                children: [
                  WebviewScaffold(
                    url: "https://google.com",
                    mediaPlaybackRequiresUserGesture: false,
                    withLocalStorage: true,
                  ),
                  isLoading
                      ? CircularProgressIndicator()
                      : SizedBox.shrink(), // 加载完成时显示空组件
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

关键修改说明： #

• 将CircularProgressIndicator移到Stack中，与WebviewScaffold同级，实现层叠显示
• Stack的alignment: Alignment.center确保进度指示器默认居中，也可以给CircularProgressIndicator单独套Center组件达到同样效果
• 加载完成时用SizedBox.shrink()替代原Stack，避免占用额外布局空间

内容的提问来源于stack exchange，提问作者sarath_kanam