Flutter macOS内嵌WebView插件zikzak_inappwebview_macos的使用

Flutter macOS内嵌WebView插件zikzak_inappwebview_macos的使用

该插件提供了在macOS上使用WKWebView的实现，属于zikzak_inappwebview的一部分。

使用方法

此插件已被官方推荐（endorsed），这意味着你可以直接使用zikzak_inappwebview。当你这样做时，此插件会自动包含在你的应用中，因此你不需要在pubspec.yaml文件中添加它。

然而，如果你导入此插件以直接使用其API，则应像往常一样将其添加到pubspec.yaml文件中。

以下是使用zikzak_inappwebview_macos的完整示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter InAppWebView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('InAppWebView Example'),
        ),
        body: InAppWebViewWidget(
          initialUrl: "https://www.example.com",
          onWebViewCreated: (InAppWebViewController controller) {
            // WebView 创建完成后的回调
            print("WebView Created");
          },
          onLoadStart: (InAppWebViewController controller, String url) {
            // 加载开始时的回调
            print("Load Start: $url");
          },
          onLoadStop: (InAppWebViewController controller, String url) {
            // 加载结束时的回调
            print("Load Stop: $url");
          },
        ),
      ),
    );
  }
}

代码解释

  1. 导入必要的包：

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

  2. 创建主应用类：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter InAppWebView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('InAppWebView Example'),
        ),
        body: InAppWebViewWidget(
          initialUrl: "https://www.example.com", // 初始化加载的URL
          onWebViewCreated: (InAppWebViewController controller) {
            // WebView 创建完成后的回调
            print("WebView Created");
          },
          onLoadStart: (InAppWebViewController controller, String url) {
            // 加载开始时的回调
            print("Load Start: $url");
          },
          onLoadStop: (InAppWebViewController controller, String url) {
            // 加载结束时的回调
            print("Load Stop: $url");
          },
        ),
      ),
    );
  }
}

更多关于Flutter macOS内嵌WebView插件zikzak_inappwebview_macos的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter macOS内嵌WebView插件zikzak_inappwebview_macos的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


zikzak_inappwebview_macos 是一个用于在 Flutter macOS 应用中嵌入 WebView 的插件。它基于 flutter_inappwebview，并专门为 macOS 平台进行了适配。以下是如何在 Flutter macOS 项目中使用 zikzak_inappwebview_macos 的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 zikzak_inappwebview_macos 依赖：

dependencies:
  flutter:
    sdk: flutter
  zikzak_inappwebview_macos: ^latest_version

然后运行 flutter pub get 以获取依赖。

2. 导入插件

在需要使用 WebView 的 Dart 文件中导入插件：

import 'package:zikzak_inappwebview_macos/zikzak_inappwebview_macos.dart';

3. 使用 InAppWebView

你可以在 Flutter widget 中使用 InAppWebView 来嵌入 WebView。以下是一个简单的示例：

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

class MyWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse('https://flutter.dev')),
        initialOptions: InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
            useShouldOverrideUrlLoading: true,
            javaScriptEnabled: true,
          ),
        ),
        onWebViewCreated: (InAppWebViewController controller) {
          // WebView 创建时的回调
        },
        onLoadStart: (InAppWebViewController controller, Uri? url) {
          // 页面开始加载时的回调
        },
        onLoadStop: (InAppWebViewController controller, Uri? url) {
          // 页面加载完成时的回调
        },
        onProgressChanged: (InAppWebViewController controller, int progress) {
          // 页面加载进度变化的回调
        },
      ),
    );
  }
}

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

4. 配置 macOS 平台

确保你的 macOS 项目已经正确配置了网络权限。在 macos/Runner/DebugProfile.entitlements 和 macos/Runner/Release.entitlements 文件中添加以下内容：

<key>com.apple.security.network.client</key>
<true/>
回到顶部