Flutter macOS平台内嵌WebView插件flutter_adeeinappwebview_macos的使用

Flutter macOS平台内嵌WebView插件flutter_adeeinappwebview_macos的使用

flutter_adeeinappwebview_macos 是一个用于在 Flutter 应用中集成 macOS 平台的 WKWebView 的插件。它基于 flutter_adeeinappwebview 包，并为 macOS 提供了特定的实现。

使用

此插件是被官方支持和推荐使用的，这意味着你可以在你的 Flutter 项目中直接使用 flutter_adeeinappwebview 而无需单独添加到 pubspec.yaml 文件中。当你使用这个包时，flutter_adeeinappwebview_macos 会自动包含在你的应用中。

但是，如果你需要导入这个包以使用其特定于 macOS 的 API，则应该将其添加到 pubspec.yaml 文件中：

dependencies:
  flutter_adeeinappwebview: ^x.x.x  # 替换为最新版本号

然后执行 flutter pub get 来获取依赖。

完整示例

以下是一个完整的示例，展示了如何在 Flutter macOS 应用中使用 flutter_adeeinappwebview_macos 插件来加载一个网页。

main.dart

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter InAppWebView macOS Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter InAppWebView macOS Example'),
        ),
        body: InAppWebViewWidget(
          initialUrl: "https://www.example.com", // 替换为你想要加载的URL
          onWebViewCreated: (InAppWebViewController controller) {
            // WebView 创建完成后的回调
          },
          onLoadStart: (InAppWebViewController controller, String url) {
            // 页面开始加载时的回调
          },
          onLoadStop: (InAppWebViewController controller, String url) {
            // 页面加载完成后的回调
          },
        ),
      ),
    );
  }
}

InAppWebViewWidget

这是一个自定义的 Widget，用于封装 InAppWebView 组件。

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

class InAppWebViewWidget extends StatefulWidget {
  final String initialUrl;
  final Function(InAppWebViewController) onWebViewCreated;
  final Function(InAppWebViewController, String) onLoadStart;
  final Function(InAppWebViewController, String) onLoadStop;

  InAppWebViewWidget({
    required this.initialUrl,
    required this.onWebViewCreated,
    required this.onLoadStart,
    required this.onLoadStop,
  });

  [@override](/user/override)
  _InAppWebViewWidgetState createState() => _InAppWebViewWidgetState();
}

class _InAppWebViewWidgetState extends State<InAppWebViewWidget> {
  late InAppWebViewController _controller;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      child: InAppWebView(
        initialUrl: widget.initialUrl,
        onWebViewCreated: (InAppWebViewController controller) {
          setState(() {
            _controller = controller;
          });
          widget.onWebViewCreated(controller);
        },
        onLoadStart: (InAppWebViewController controller, String url) {
          widget.onLoadStart(controller, url);
        },
        onLoadStop: (InAppWebViewController controller, String url) {
          widget.onLoadStop(controller, url);
        },
      ),
    );
  }
}

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

1 回复

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


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

1. 添加依赖

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

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

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

2. 导入插件

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

import 'package:flutter_adeeinappwebview_macos/flutter_adeeinappwebview_macos.dart';

3. 使用 InAppWebView

在你的 Flutter 页面中使用 InAppWebView 组件来显示 WebView。以下是一个简单的示例：

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

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

class _WebViewExampleState extends State<WebViewExample> {
  InAppWebViewController? webViewController;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse("https://flutter.dev")),
        onWebViewCreated: (controller) {
          webViewController = controller;
        },
        onLoadStart: (controller, url) {
          print("Page started loading: $url");
        },
        onLoadStop: (controller, url) {
          print("Page finished loading: $url");
        },
      ),
    );
  }
}

4. 运行应用

确保你已经配置好 macOS 开发环境，然后运行你的 Flutter 应用：

flutter run -d macos

5. 其他功能

flutter_adeeinappwebview_macos 提供了丰富的功能，例如：

  • JavaScript 交互：你可以通过 javascript 和 onJsAlert 等事件与网页进行交互。
  • 自定义设置：你可以通过 InAppWebViewGroupOptions 来设置 WebView 的行为，例如是否启用 JavaScript、是否允许文件访问等。
  • Cookie 管理：你可以使用 CookieManager 来管理 WebView 中的 Cookie。

6. 处理权限请求

在某些情况下，WebView 可能需要请求权限（例如访问摄像头、麦克风等）。你可以通过 onPermissionRequest 回调来处理这些请求。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
  onPermissionRequest: (controller, request) async {
    return PermissionResponse(
        resources: request.resources,
        action: PermissionResponseAction.GRANT);
  },
);

7. 处理错误

你可以通过 onLoadError 回调来处理加载错误：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
  onLoadError: (controller, url, code, message) {
    print("Load error: $message");
  },
);

8. 清理资源

在页面销毁时，确保清理 WebView 资源：

[@override](/user/override)
void dispose() {
  if (webViewController != null) {
    webViewController!.dispose();
  }
  super.dispose();
}
回到顶部