Flutter网页视图插件mg_webview

Flutter网页视图插件mg_webview_flutter的使用

在Flutter中，mg_webview_flutter 是一个用于嵌入网页视图的插件。它支持iOS和Android平台，并提供了丰富的功能来满足开发者的不同需求。

使用步骤

添加依赖
在 pubspec.yaml 文件中添加 webview_flutter 作为依赖项：
```
dependencies:
  webview_flutter: ^4.0.0
```
然后运行以下命令以更新依赖：
```
flutter pub get
```

初始化 WebView
在Flutter应用中，可以将 WebView 小部件嵌入到布局中。以下是一个简单的示例，展示如何加载一个网页。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WebView Example'),
        ),
        body: WebViewExample(),
      ),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化 WebView 控制器
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://flutter.dev'));
  }

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(
      controller: _controller,
    );
  }
}

Android 平台视图模式

webview_flutter 插件通过平台视图（Platform Views）将原生的WebView嵌入到Flutter应用中。默认情况下，它使用的是 Hybrid Composition 模式，但在某些情况下，你可能需要切换到 Virtual Display 模式。

使用 Hybrid Composition

确保 android/app/build.gradle 中的 minSdkVersion 至少为 19：

android {
    defaultConfig {
        minSdkVersion 19
    }
}

使用 Virtual Display

如果选择使用 Virtual Display 模式，需要进行以下配置：

修改 android/app/build.gradle 文件中的 minSdkVersion 至少为 20：

android {
    defaultConfig {
        minSdkVersion 20
    }
}

在 initState() 方法中启用虚拟显示模式：

import 'dart:io';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  @override
  WebViewExampleState createState() => WebViewExampleState();
}

class WebViewExampleState extends State<WebViewExample> {
  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) {
      WebView.platform = AndroidWebView();
    }
  }

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://flutter.dev',
      javascriptMode: JavaScriptMode.unrestricted,
    );
  }
}

设置自定义请求头

如果需要在POST请求中设置自定义请求头，可以通过手动发送请求并加载响应数据的方式实现：

final WebViewRequest request = WebViewRequest(
  uri: Uri.parse('https://httpbin.org/post'),
  method: WebViewRequestMethod.post,
  headers: {'foo': 'bar', 'Content-Type': 'application/json'},
  body: Uint8List.fromList(utf8.encode(jsonEncode({'key': 'value'}))),
);
await _controller.loadRequest(request);

itying888 1楼•1 个月前

更多关于Flutter网页视图插件mg_webview_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

mg_webview_flutter 是一个用于在 Flutter 应用中嵌入 WebView 的插件。它基于 flutter_webview_plugin，但进行了优化和改进，以提供更好的性能和更多的功能。使用 mg_webview_flutter 可以在 Flutter 应用中轻松地显示网页内容。

安装

首先，你需要在 pubspec.yaml 文件中添加 mg_webview_flutter 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  mg_webview_flutter: ^latest_version

然后运行 flutter pub get 来安装依赖。

基本使用

以下是一个简单的示例，展示了如何在 Flutter 应用中使用 mg_webview_flutter 插件来显示一个网页：

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

class WebViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: WebView(
        initialUrl: 'https://www.example.com',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: WebViewExample(),
));

参数说明

initialUrl: 初始加载的 URL。
javascriptMode: JavaScript 模式，可以是 JavascriptMode.disabled 或 JavascriptMode.unrestricted。
onPageStarted: 当页面开始加载时触发的回调。
onPageFinished: 当页面加载完成时触发的回调。
onProgress: 页面加载进度变化的回调。
onWebViewCreated: 当 WebView 创建时触发的回调，可以获取 WebViewController 对象。

控制 WebView

你可以通过 WebViewController 来控制 WebView 的行为，例如加载新的 URL、执行 JavaScript 代码等。

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              if (_controller != null) {
                _controller.reload();
              }
            },
          ),
        ],
      ),
      body: WebView(
        initialUrl: 'https://www.example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
    );
  }
}

处理导航

你可以通过 NavigationDelegate 来处理页面导航请求，例如拦截某些 URL 或处理页面重定向。

WebView(
  initialUrl: 'https://www.example.com',
  javascriptMode: JavascriptMode.unrestricted,
  navigationDelegate: (NavigationRequest request) {
    if (request.url.startsWith('https://www.example.com')) {
      return NavigationDecision.navigate;
    } else {
      return NavigationDecision.prevent;
    }
  },
)

处理 JavaScript 交互

你可以通过 JavascriptChannel 来处理 JavaScript 与 Flutter 之间的交互。

WebView(
  initialUrl: 'https://www.example.com',
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: <JavascriptChannel>[
    JavascriptChannel(
        name: 'Flutter',
        onMessageReceived: (JavascriptMessage message) {
          print(message.message);
        }),
  ].toSet(),
)

注意事项

mg_webview_flutter 插件在 Android 和 iOS 平台上都支持，但在不同平台上可能会有一些差异。
在 iOS 上，你可能需要在 Info.plist 中添加以下配置以允许加载非 HTTPS 的 URL：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
<true/>
</dict>