Flutter网页视图展示插件webview_flutter_web的使用

描述

webview_flutter_web是为Web平台实现的webview_flutter插件。它目前功能有限，只实现了以下功能：

• loadRequest
• loadHtmlString（不支持baseUrl）

除此之外，当前没有其他支持的功能。

使用方法

由于这个包还不是webview_flutter插件的官方实现，所以需要额外的设置步骤才能使用：

1. 将此包作为项目的显式依赖项添加，除了依赖于webview_flutter之外。
2. 完成上述步骤后，可以像平常一样在Web上使用webview_flutter列出的API。

示例代码

下面是一个完整的示例demo，展示了如何使用webview_flutter_web插件来加载网页和执行POST请求。

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:async';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:webview_flutter_platform_interface/webview_flutter_platform_interface.dart';
import 'package:webview_flutter_web/webview_flutter_web.dart';

void main() {
  // 设置WebViewPlatform实例为WebWebViewPlatform
  WebViewPlatform.instance = WebWebViewPlatform();
  runApp(const MaterialApp(home: _WebViewExample()));
}

class _WebViewExample extends StatefulWidget {
  const _WebViewExample();

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

class _WebViewExampleState extends State<_WebViewExample> {
  // 创建一个PlatformWebViewController，并加载初始页面
  final PlatformWebViewController _controller = PlatformWebViewController(
    const PlatformWebViewControllerCreationParams(),
  )..loadRequest(
      LoadRequestParams(
        uri: Uri.parse('https://flutter.dev'),
      ),
    );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
        actions: <Widget>[
          _SampleMenu(_controller),
        ],
      ),
      body: PlatformWebViewWidget(
        PlatformWebViewWidgetCreationParams(controller: _controller),
      ).build(context),
    );
  }
}

enum _MenuOptions {
  doPostRequest,
}

class _SampleMenu extends StatelessWidget {
  const _SampleMenu(this.controller);

  final PlatformWebViewController controller;

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<_MenuOptions>(
      onSelected: (_MenuOptions value) {
        switch (value) {
          case _MenuOptions.doPostRequest:
            _onDoPostRequest(controller);
        }
      },
      itemBuilder: (BuildContext context) => <PopupMenuItem<_MenuOptions>>[
        const PopupMenuItem<_MenuOptions>(
          value: _MenuOptions.doPostRequest,
          child: Text('Post Request'),
        ),
      ],
    );
  }

  Future<void> _onDoPostRequest(PlatformWebViewController controller) async {
    final LoadRequestParams params = LoadRequestParams(
      uri: Uri.parse('https://httpbin.org/post'),
      method: LoadRequestMethod.post,
      headers: const <String, String>{
        'foo': 'bar',
        'Content-Type': 'text/plain'
      },
      body: Uint8List.fromList('Test Body'.codeUnits),
    );
    await controller.loadRequest(params);
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，该应用包含一个WebView，用于显示来自https://flutter.dev的网页内容。同时，通过右上角的菜单按钮，用户可以选择执行一个POST请求到https://httpbin.org/post。这演示了如何使用webview_flutter_web插件进行基本的网页加载和网络请求操作。

请注意，由于webview_flutter_web插件在Web平台上的功能限制，某些高级特性可能无法正常使用。如果你的应用有更复杂的需求，建议检查官方文档或探索其他替代方案。