Flutter项目中添加Webview（三）监听页面加载事件

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

上一篇博客写到混合模式和虚拟模式

Webview当然是一个平台小部件，它实际上是运行个一个原生小部件——一个原生视图组件，然后找到一种方法将该UI合并到Flutter小部件层次结构中。

有许多不同的方法可以做到这一点，混合组合是一种方法。但是除非你遇到问题，否则这不是你需要解决的问题。使用起来效率更高，允许webview默认选择其组合模式。

下面进入正题

有时候我们需要知道页面加载需要多长是时间？也许你的网络不是特别好，你希望添加一个进度指示器诸如此类。

最常用的是onPageStarted、onProgress、onPageFinished。

下面写一个简单的demo

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

class WebViewStack extends StatefulWidget {
    const WebViewStack({Key? key}) : super(key: key);
    
    @override
    State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
    var loadingPercentage = 0;
    
    @override
    Widget build(BuildContext context) {
        return Stack(
            children: [
                WebView(
                    initialUrl: 'https://flutter.dev',
                    onPageStarted: (url) {
                        setState(() {
                            loadingPercentage = 0;
                        });
                    },
                    onProgress: (progress) {
                        setState(() {
                            loadingPercentage = progress;
                        });
                    },
                    onPageFinished: (url) {
                       setState(() {
                           loadingPercentage = 100;
                       });
                    },
                ),
                if (loadingPercentage < 100) 
                    LinearProgressIndicator(
                        value: loadingPercentage / 100.0,
                        color: Colors.blue,
                        minHeight: 20,
                    ),
            ]
        );
    }
}

在lib/main.dart里面修改的代码

import 'package:flutter/material.dart';
import 'src/web_view_stack.dart';

void main() {
    runApp(
        const MaterialApp(
            home: WebViewApp(),
        ),
    );
}

class WebViewApp extends StatefulWidget {
    const WebViewApp({Key? key}) : super(key: key);
    
    @override
    State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Flutter WebView'),
            ),
            body: const WebViewStack(),
        );
    }
}

运行应用时，会看到网页加载指示器叠加在WebView内容区域之上（取决于你的网络条件以及浏览器是否缓存了要导航到的页面）。