在Flutter中开发WebView组件时，如何实现进度条功能？

在Flutter中开发WebView组件时，如何实现进度条功能？目前使用的webview_flutter插件似乎没有内置进度回调，尝试过监听页面加载事件但无法准确获取加载百分比。是否有成熟的方案或第三方库可以解决？需要兼顾Android/iOS平台的兼容性，最好能展示类似原生浏览器那样的顶部线性进度条效果。另外，进度条在页面跳转或重定向时的状态管理该如何处理？希望有实际代码示例或设计思路参考。

3 回复

要实现带有进度条的Flutter WebView组件，可以使用webview_flutter插件。首先添加依赖：

dependencies:
  webview_flutter: ^4.0.0

然后创建一个自定义组件：

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

class ProgressWebView extends StatefulWidget {
  final String url;

  const ProgressWebView({Key? key, required this.url}) : super(key: key);

  @override
  _ProgressWebViewState createState() => _ProgressWebViewState();
}

class _ProgressWebViewState extends State<ProgressWebView> {
  late WebViewController _controller;
  double _progress = 0.0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebView(
          initialUrl: widget.url,
          onWebViewCreated: (controller) => _controller = controller,
          onPageStarted: (url) => setState(() => _progress = 0.0),
          onPageFinished: (url) => setState(() => _progress = 1.0),
        ),
        if (_progress < 1.0)
          LinearProgressIndicator(value: _progress),
      ],
    );
  }
}

这个组件会在WebView加载时显示一个进度条，加载完成后隐藏。注意需要处理Android端的WebView初始化问题，确保在MainActivity.java中正确配置。

更多关于在Flutter中开发WebView组件时，如何实现进度条功能？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


可以基于Flutter的WebView插件（如webview_flutter）实现带进度条的功能。首先引入webview_flutter依赖，然后创建一个自定义的StatefulWidget，包含WebView和LinearProgressIndicator。

代码如下：

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

class WebViewWithProgressBar extends StatefulWidget {
  final String url;

  WebViewWithProgressBar({required this.url});

  @override
  _WebViewWithProgressBarState createState() => _WebViewWithProgressBarState();
}

class _WebViewWithProgressBarState extends State<WebViewWithProgressBar> {
  late WebViewController _controller;
  double _progress = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("加载中..."),
      ),
      body: Stack(
        children: [
          WebView(
            initialUrl: widget.url,
            onProgress: (progress) {
              setState(() => this._progress = progress / 100);
            },
            onPageStarted: (url) {
              setState(() => _controller = WebViewController()..loadRequest(Uri.parse(url)));
            },
            onWebViewCreated: (controller) => _controller = controller,
          ),
          if (_progress < 1) LinearProgressIndicator(value: _progress),
        ],
      ),
    );
  }
}

这样，当WebView加载网页时，会显示一个进度条，加载完成后自动隐藏。

Flutter带进度条的WebView组件实现

要实现一个带有进度条的WebView组件，可以使用webview_flutter插件并结合LinearProgressIndicator来显示加载进度。以下是实现方法：

基本实现方案

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

class ProgressWebView extends StatefulWidget {
  final String url;
  
  const ProgressWebView({Key? key, required this.url}) : super(key: key);

  @override
  _ProgressWebViewState createState() => _ProgressWebViewState();
}

class _ProgressWebViewState extends State<ProgressWebView> {
  final WebViewController _controller = WebViewController();
  double _progress = 0.0;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
        onProgress: (int progress) {
          setState(() {
            _progress = progress / 100;
          });
        },
        onPageStarted: (String url) {
          setState(() {
            _isLoading = true;
          });
        },
        onPageFinished: (String url) {
          setState(() {
            _isLoading = false;
          });
        },
      ))
      ..loadRequest(Uri.parse(widget.url));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView with Progress')),
      body: Column(
        children: [
          _isLoading
              ? LinearProgressIndicator(
                  value: _progress,
                  backgroundColor: Colors.grey[200],
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                )
              : SizedBox.shrink(),
          Expanded(
            child: WebViewWidget(controller: _controller),
          ),
        ],
      ),
    );
  }
}

使用方式

MaterialApp(
  home: ProgressWebView(url: 'https://example.com'),
)

特性说明

  1. 进度条显示：通过NavigationDelegate的onProgress回调获取加载进度
  2. 加载状态：使用onPageStarted和onPageFinished来管理加载状态
  3. 自适应高度：进度条只在加载时显示，加载完成后自动隐藏
  4. WebView控制：使用WebViewController来控制网页加载行为

如果需要更多功能，如处理错误页面、添加下拉刷新等，可以进一步扩展这个组件。

回到顶部