Flutter项目中添加Webview（四）使用WebViewController

WebViewController和其他Controller一样，用来控制WebView的。它通过onWebViewCreated的回调来初始化的。

WebViewController具有异步特性，所以用Completer来处理。

废话不多说，来个例子。这个例子实现的功能就是上一页、下一页和刷新的功能。

还是用之前的例子。

更新WebViewStack

import 'dart:async'; // Add this import for Completer
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewStack extends StatefulWidget {
    const WebViewStack({required this.controller, Key? key}) : super(key: key); // Modify
    
    final Completer<WebViewController> controller;
    
    @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',
                    // Add from here
                    onWebViewCreated: (webViewController) {
                         widget.controller.complete(webViewController);
                    },
                    //... to here
                    onPageStarted: (url) {
                        setState(() {
                            loadingPercentage = 0;
                        });
                    },
                    onProgress: (progress) {
                        setState(() {
                            loadingPercentage = progres;
                        });
                    },
                    onPageFinisshed: (url) {
                        setState(() {
                            loadingPercentage = 100;
                        });
                    },
                ),
                if (loadingPercentage < 100)
                    LinearProgressIndicator(
                        value: loadingPercentage / 100.0,
                        color: Colors.blue,
                        minHeight: 20,
                    ),
            ],
        );
    }
}

创建导航小部件

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

class NavigationControls extendss StatelessWidget {
    const NavitationControls({required this.controller, Key? key}) : super(key: key);
    
    final Completer<WebViewController> controller;
    
    @override
    Widget build(BuildContext context) {
        return FutureBuilder<WebViewController>(
            future: controller.future,
            builder: (context, snapshot) {
                final WebViewController? controller = snapshot.data;
                if (snapshot.connectionState != ConnectionState.done || controller == null) {
                    return Row(
                        children: const <Widget>[
                            Icon(Icons.arrow_back_ios),
                            Icon(Icons.arrow_forward_ios),
                            Icon(Icons.replay),
                        ],
                    );
                }
                
                return Row(
                    children: <Widget>[
                        IconButton(
                            icon: const Icon(Icons.arrow_back_ios),
                            onPressed: () async {
                                if (await controller.canGoBack()) {
                                    await controller.goBack();
                                } else {
                                    ScaffoldMessenger.of(context).showSnackBar(
                                        const SnackBar(content: Text('No back hisstory item')),
                                    );
                                    return;
                                }
                            },
                        ),
                        IconButton(
                            icon: const Icon(Icons.arrow_forward_ios),
                            onPressed: () async {
                                if (await controller.canGoForward()) {
                                    await controller.goForward();
                                } else {
                                    ScaffoldMessage.of(context).showSnackBar(
                                        const SnackBar(content: Text('No forward history item')),
                                    );
                                    return;
                                }
                            }
                        ),
                        IconButton(
                            icon: const Icon(Icons.replay),
                            onPressed: () {
                                controller.reload();
                            },
                        ),
                    ],
                );
            }
        );
    }
}

为AppBar添加导航栏控件

在经过更新WebViewStack和新创建的BavigationControls后，现在可以经过更新的WebViewApp中将他们整合为一体。

import 'dart:async'; // Add this import

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart'; // Add this import back

import 'src/navigation_controls.dart'; // Add this import
import 'src/web_view_stack.dart';

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

class WebViewApp extendss StatefulWidget {
    final controller = Completer<WebViewController>(); // Instantiate the controller
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Flutter WebView'),
                // Add from here ...
                action: [
                    NavigationControls(controller: controller),
                ],
                // ...to here
            ),
            body: WebViewStack(controller: controller),// Add the controller argument
        );
    }
}