Flutter项目中添加Webview（六）为AppBar添加菜单按钮

在接下来的几个步骤，将在AppBar小部件中创建一个菜单按钮，用于评估JavaScript、调用JavaScript渠道和管理Cookie。

创建一个新的源文件

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

enum _MenuOptions {
    navigationDelegate,
}

class Menu extends StatelessWidget {
    const Menu({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, controller) {
                return PopupMenuButton<_MenuOptions>(
                    onSelected: (value) {
                        switch(value) {
                            case _MenuOptions.navigationDelegate:
                                controller.data!.loadUrl('https://youtube.com');
                                break;
                        }
                    },
                    itemBuilder: (context) => [
                    const PopupMenuItem<_MenuOptions>(
                        value: _MenuOptions.navigationDelegate,
                        child: Text('Navigate to Youtube'),
                        ),
                    ],
                );
            }
        );
    }
}

当用户选择Navigate to Youtube菜单选项后，系统会执行WebViewController的loadUrl方法，在上一篇文章中的navigationDelegate回调将会阻止导航。

将上面的menu添加到main.dart中。

import 'dart:async';

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

import 'src/menu.dart'; // Add this import
import 'src/navigation_controls.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> {
    final controller = Completer<WebViewController>();
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Flutter WebView'),
                actions: [
                    NavigationControld(controller: controller),
                    Menu(controller: controller), // Add this line
                ],
            ),
            body: WebViewStack(controller: controller),
        );
    }
}

结果：