带有 Webview 的 Flutter Stacked 小部件未显示 progressIndicator答案

【问题标题】：Flutter Stacked widget with Webview is not showing progressIndicator带有 Webview 的 Flutter Stacked 小部件未显示 progressIndicator
【发布时间】：2021-11-21 11:57:39
【问题描述】：

override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: Scaffold(
            backgroundColor: Colors.white,
            bottomNavigationBar: _bottomTab(),
            appBar: AppBar(
              title: Text('View ' + type),
            ),
            body: Stack(
              children: [
                Container(
                  child: WebviewScaffold(
                    url: weburl,
                    displayZoomControls: true,
                    withJavascript: true,
                    scrollBar: true,
                    withZoom: true,
                    hidden: true,
                  ),
                ),
                Visibility(
                  visible: _isLoading,
                  child: Align(
                  alignment: Alignment.center,
                  child: CircularProgressIndicator(),
                ))
              ],
            )),
        onWillPop: backPress);
  }
Widget _bottomTab() {
    return BottomNavigationBar(
      backgroundColor: Colors.grey,
      items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.contact_page), label: "Dashboard"),
        BottomNavigationBarItem(icon: Icon(Icons.call), label: "Call"),
        BottomNavigationBarItem(
            icon: Icon(Icons.download_rounded), label: "Download"),
        BottomNavigationBarItem(icon: Icon(Icons.share), label: "Share"),
      ],
      type: BottomNavigationBarType.shifting,
      selectedItemColor: Colors.black,
      unselectedItemColor: Colors.grey,
      onTap: _onItemTapped,
    );
  }
 void _onItemTapped(int index) {
    switch (index) {
      case 0:
        break;

      case 1:
        _makingPhoneCall();
        break;

      case 2:
        setState(() {
          _isLoading = true;
          getPermission('download');
        });
        break;

      case 3:
        setState(() {
          _isLoading = true;
          getPermission('share');
        });
        break;
    }
  }

每当我单击底部导航时，我都有一个带有底部导航的 webview 我想在 webview 的中心显示进度指示器。我尝试了带有按钮和 progressindicator 的堆栈小部件，但是当我尝试使用 webview 显示进度指示器时什么都不显示

注意：单击底部导航时在 webview 的中心显示进度指示器

提前致谢！

【问题讨论】：

标签： flutter dart

【解决方案1】：

在 Positioned 小部件中包裹 Visibility 小部件像这样

Positioned.fill(
      child: Align(
        alignment: Alignment.centerRight,
        child: Visibility(
                      visible: _isLoading,
                      child: CircularProgressIndicator(),
                    )               
      ),
    ),

如果这不起作用，那么您可以像这样在 WebviewScaffold 中添加初始子项

 WebviewScaffold(
                initialChild: Center(child: CircularProgressIndicator()),
              
                url: weburl,
                displayZoomControls: true,
                withJavascript: true,
                scrollBar: true,
                withZoom: true,
                hidden: true,
              ),

或者你也可以使用

你可以使用 hide 方法来隐藏 webview，只要你想显示进度。

代码：

final FlutterWebviewPlugin webviewPlugin = new FlutterWebviewPlugin() ;

//显示进度时

webviewPlugin. hide() ;

【讨论】：

试过你的代码，但它不起作用
请让我检查一下
再次检查我的答案让我知道代码是否有效
每次点击底部导航时如何触发这个initialchild
在底部导航点击时调用 setstate

【解决方案2】：

你能试试下面的代码吗？

包：webview_flutter

bool isLoading = true;


Stack(
  children:[ 
    WebView(
      javascriptMode: JavascriptMode.unrestricted,
      onPageStarted: (value){
        setState(() {
          isLoading = true;
        });
      },
      onPageFinished: (value){
        setState(() {
          isLoading = false;
        });
      },
      initialUrl: “Your URL”),
    isLoading == true? Center(child: CircularProgressIndicator()):Offstage()
    ])

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。