Flutter 如何在WebView加载页面之前显示CircularProgressIndicator？

在Flutter中，如果您想在WebView加载页面之前显示一个CircularProgressIndicator，您可以使用Stack小部件将WebView和CircularProgressIndicator组合在一起，并使用一个状态变量来控制何时显示或隐藏加载指示器。以下是一个具体的实现例子：

1. 引入依赖：首先，您需要确保您的pubspec.yaml文件中包含了flutter_webview_plugin或webview_flutter这样的WebView插件。

2. 创建一个新的Flutter应用：在您的应用中创建一个新的屏幕或组件来展示WebView。

3. 使用Stack和Visibility小部件：使用Stack来叠加WebView和CircularProgressIndicator，并用一个布尔型状态变量控制CircularProgressIndicator的可见性。

下面是一段示例代码：

dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  bool _isLoading = true; // 初始状态，加载中

  void _handlePageFinished(String url) {
    setState(() {
      _isLoading = false; // 网页加载完成，更新状态，不再显示加载指示器
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView with Loader'),
      ),
      body: Stack(
        children: <Widget>[
          WebView(
            initialUrl: 'https://www.example.com',
            onPageFinished: _handlePageFinished,
          ),
          _isLoading 
            ? Center(child: CircularProgressIndicator()) // 如果正在加载，显示加载指示器
            : Container(), // 否则显示空容器
        ],
      ),
    );
  }
}

在这个代码例子中：

• _isLoading变量用来跟踪网页是否正在加载。
• WebView的onPageFinished事件被用来监听网页加载完成的事件，并更新_isLoading状态。
• Stack组件使得CircularProgressIndicator能够覆盖在WebView上方，当网页正在加载时显示，加载完成后隐藏。

这样，用户在等待WebView加载内容期间，就可以看到一个居中的加载指示器，提升了用户体验。