Flutter中Webview结合Stack组件无法显示ProgressIndicator的问题求助

我明白你遇到的问题了——单独用Stack放按钮和进度指示器没问题，但和WebviewScaffold结合后，进度条就被“吃掉”了。这大概率是因为你用的WebviewScaffold（来自flutter_webview_plugin）本质是一个独立的Scaffold组件，嵌套在父Scaffold的Stack里时，它的内部布局会抢占层级，把你的ProgressIndicator给遮挡住了。

给你几个可行的解决思路，按优先级排序：

方案1：改用官方WebView组件（推荐） #

flutter_webview_plugin已经停止维护了，官方的webview_flutter包更稳定，而且它的WebView是一个普通Widget，不会和父Scaffold产生层级冲突。

修改后的核心代码如下：

// 先导入官方包
import 'package:webview_flutter/webview_flutter.dart';

// 替换build里的body部分
body: Stack(
  children: [
    WebView(
      initialUrl: weburl,
      javascriptMode: JavascriptMode.unrestricted,
      zoomEnabled: true,
      allowsInlineMediaPlayback: true,
      // 如果你需要监听网页加载状态也可以加，不过你的需求是点击底部导航时显示，所以暂时不需要
    ),
    // 用条件渲染替代Visibility，更简洁
    if (_isLoading)
      const Align(
        alignment: Alignment.center,
        child: CircularProgressIndicator(),
      )
  ],
),

这样Stack的层级关系就清晰了：WebView在底层，ProgressIndicator在顶层，点击导航栏触发setState后，进度条就能正常显示在WebView中心了。

方案2：用Overlay显示进度条（兼容旧插件） #

如果你暂时不想换插件，可以用Flutter的Overlay来显示进度条——Overlay的内容会悬浮在整个页面最上层，完全不会被WebView遮挡。

步骤如下：

1. 在State类里定义一个OverlayEntry变量：

OverlayEntry? _progressOverlay;

2. 封装显示和隐藏进度条的方法：

void _showProgress() {
  _progressOverlay = OverlayEntry(
    builder: (context) => const Center(
      child: CircularProgressIndicator(),
    ),
  );
  Overlay.of(context)?.insert(_progressOverlay!);
}

void _hideProgress() {
  _progressOverlay?.remove();
  _progressOverlay = null;
}

3. 修改_onItemTapped里的逻辑（记得在异步操作完成后隐藏进度条）：

void _onItemTapped(int index) {
  switch (index) {
    case 0:
      break;
    case 1:
      _makingPhoneCall();
      break;
    case 2:
      _showProgress();
      getPermission('download').then((_) {
        // 操作完成后隐藏进度条
        _hideProgress();
      }).catchError((_) {
        // 出错也要隐藏
        _hideProgress();
      });
      break;
    case 3:
      _showProgress();
      getPermission('share').then((_) {
        _hideProgress();
      }).catchError((_) {
        _hideProgress();
      });
      break;
  }
}

这个方法的好处是不用动原有的WebviewScaffold代码，直接通过Overlay实现全局悬浮的进度条。

小提醒 #

不管用哪种方案，都要注意：你的getPermission应该是异步操作，一定要在操作完成（成功或失败）后隐藏进度条，不然进度条会一直停留在界面上哦。

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