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

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

需求

  • Dart SDK: >=2.17.0 <4.0.0
  • Flutter: >=3.0.0
  • Android:
    • minSdkVersion >= 19
    • compileSdk >= 34
    • AGP 版本 >= 7.3.0（使用 Android Studio - Android Gradle 插件升级助手来帮助你）
    • 支持 androidx （参见 AndroidX 迁移以迁移现有应用）
  • iOS 9.0+:
    • --ios-language swift
    • Xcode 版本 >= 14.3
  • MacOS 10.11+:
    • Xcode 版本 >= 14.3

WebView 页面示例代码

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_kawamura/flutter_webview_kawamura.dart';

class WebViewExampleScreen extends StatefulWidget {
  [@override](/user/override)
  _WebViewExampleScreenState createState() => _WebViewExampleScreenState();
}

class _WebViewExampleScreenState extends State<WebViewExampleScreen> {
  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;
  InAppWebViewSettings settings = InAppWebViewSettings(
      isInspectable: kDebugMode,
      mediaPlaybackRequiresUserGesture: false,
      allowsInlineMediaPlayback: true,
      iframeAllow: "camera; microphone",
      iframeAllowFullscreen: true);

  String url = "";

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Column(children: <Widget>[
      Expanded(
        child: Stack(
          children: [
            InAppWebView(
              key: webViewKey,
              zoneId: '',
              userParameter: '',
              initialSettings: settings,
              onWebViewCreated: (controller) async {
                webViewController = controller;
              },
              onLoadStart: (controller, url) async {
                setState(() {
                  this.url = url.toString();
                });
              },
              onPermissionRequest: (controller, request) async {
                return PermissionResponse(
                    resources: request.resources,
                    action: PermissionResponseAction.GRANT);
              },
              shouldOverrideUrlLoading: (controller, navigationAction) async {
                var uri = navigationAction.request.url!;
                print('uri = $uri');
                return NavigationActionPolicy.ALLOW;
              },
              onLoadStop: (controller, url) async {
                setState(() {
                  this.url = url.toString();
                });
              },
              onReceivedError: (controller, request, error) {},
              onWebViewClosed: (controller) async {
                //TODO Navigator.pop(context);
                print('webview closed');
                Navigator.pop(context);
              },
              onUpdateVisitedHistory: (controller, url, isReload) {
                setState(() {
                  this.url = url.toString();
                });
              },
              onConsoleMessage: (controller, consoleMessage) {
                print(consoleMessage);
              },
            ),
          ],
        ),
      ),
    ])));
  }
}

安装

在 pubspec.yaml 文件中添加 flutter_webview_kawamura 作为依赖：

dependencies:
  flutter_webview_kawamura: ^版本号

网页支持安装

要在 Web 平台上正常工作，你需要将 web_support.js 文件添加到 web/index.html 文件的 <head> 部分：

<head>
  <!-- ... -->
  <script
    type="application/javascript"
    src="/assets/packages/flutter_webview_kawamura/assets/web/web_support.js"
    defer
  ></script>
  <!-- ... -->
</head>

示例代码

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_kawamura/flutter_webview_kawamura.dart';
import 'package:flutter_webview_example/webiew_example.screen.dart';

InAppLocalhostServer localhostServer = InAppLocalhostServer(documentRoot: 'assets');

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  if (!kIsWeb && defaultTargetPlatform == TargetPlatform.android) {
    await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);
  }

  if (!kIsWeb) {
    await localhostServer.start();
  }

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(), // 新的主页
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('测试'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('打开WebView'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => WebViewExampleScreen()),
            );
          },
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_webview_kawamura 是一个 Flutter 插件，用于在 Flutter 应用程序中嵌入 WebView。它基于 webview_flutter 插件，并提供了一些额外的功能和改进。使用这个插件，你可以在 Flutter 应用中加载并显示网页内容。

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_webview_kawamura: ^1.0.0 # 使用最新版本

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

基本使用

以下是一个简单的示例，展示如何在 Flutter 应用中使用 flutter_webview_kawamura 插件来加载并显示一个网页。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewExample(),
    );
  }
}

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

参数说明

  • initialUrl: 初始化时加载的 URL。
  • javascriptMode: 设置 JavaScript 的执行模式。可以是 JavascriptMode.disabled 或 JavascriptMode.unrestricted。
  • onPageStarted: 当页面开始加载时触发的回调。
  • onPageFinished: 当页面加载完成时触发的回调。
  • onProgress: 页面加载进度的回调。
  • onWebViewCreated: 当 WebView 创建时触发的回调。
  • javascriptChannels: 用于与 JavaScript 通信的 JavaScript 通道。

高级功能

flutter_webview_kawamura 还提供了一些高级功能，例如：

  • JavaScript 通信: 你可以通过 javascriptChannels 参数在 Flutter 和 JavaScript 之间进行通信。
  • 自定义 User-Agent: 你可以通过 userAgent 参数设置自定义的 User-Agent。
  • 拦截 URL: 你可以通过 navigationDelegate 参数拦截和处理 URL 的导航请求。

示例：拦截 URL

WebViewKawamura(
  initialUrl: 'https://www.example.com',
  javascriptMode: JavascriptMode.unrestricted,
  navigationDelegate: (NavigationRequest request) {
    if (request.url.contains('example.com')) {
      // 允许导航
      return NavigationDecision.navigate;
    }
    // 阻止导航
    return NavigationDecision.prevent;
  },
)

示例：JavaScript 通信

WebViewKawamura(
  initialUrl: 'https://www.example.com',
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: <JavascriptChannel>{
    JavascriptChannel(
        name: 'Flutter',
        onMessageReceived: (JavascriptMessage message) {
          print(message.message);
        }),
  }.toSet(),
)
回到顶部