Flutter悬浮窗口Web视图插件webview_win_floating的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter悬浮窗口Web视图插件webview_win_floating的使用

webview_win_floating 是一个用于 Windows 平台的 WebView 插件，基于 WebView2 组件实现。该插件支持与 webview_flutter 一起使用，从而实现跨平台的支持（Windows / Android / iOS）。以下是详细的使用指南和示例代码。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  webview_win_floating: ^1.0.0
  webview_flutter: ^4.0.1

或者从 GitHub 获取最新版本：

dependencies:
  webview_win_floating:
    git:
      url: https://github.com/jakky1/webview_win_floating.git
      ref: master
  webview_flutter: ^4.0.1

使用示例

基本用法

以下是一个简单的示例，展示了如何在 Flutter 应用中使用 webview_win_floating 来加载网页并启用 JavaScript。

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final controller = WebViewController();

  @override
  void initState() {
    super.initState();
    controller.setJavaScriptMode(JavaScriptMode.unrestricted);
    controller.setBackgroundColor(Colors.cyanAccent);
    controller.setNavigationDelegate(NavigationDelegate(
      onNavigationRequest: (request) {
        if (request.url.startsWith("https://www.google.com")) {
          return NavigationDecision.navigate;
        } else {
          print("prevent user navigate out of google website!");
          return NavigationDecision.prevent;
        }
      },
      onPageStarted: (url) => print("onPageStarted: $url"),
      onPageFinished: (url) => print("onPageFinished: $url"),
      onWebResourceError: (error) =>
          print("onWebResourceError: ${error.description}"),
    ));
    controller.loadRequest(Uri.parse("https://www.google.com/"));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Windows Webview example app'),
        ),
        body: WebViewWidget(controller: controller),
      ),
    );
  }
}

启用 JavaScript 和导航控制

你可以通过设置 setJavaScriptMode 来启用 JavaScript，并通过 setNavigationDelegate 来限制用户的导航行为。

controller.setJavaScriptMode(JavaScriptMode.unrestricted);

controller.setNavigationDelegate(NavigationDelegate(
  onNavigationRequest: (request) {
    return request.url.contains("youtube")
      ? NavigationDecision.navigate
      : NavigationDecision.prevent;
  },
  onPageStarted: (url) => print("onPageStarted: $url"),
  onPageFinished: (url) => print("onPageFinished: $url"),
  onWebResourceError: (error) =>
      print("onWebResourceError: ${error.description}"),
));

与 JavaScript 通信

你可以在 Dart 代码和 JavaScript 之间进行通信。例如，可以通过 addJavaScriptChannel 方法来接收来自 JavaScript 的消息。

controller.addJavaScriptChannel("myChannelName",
  onMessageReceived: (JavaScriptMessage jmsg) {
    String message = jmsg.message;
    print(message);  // 打印 "This message is from javascript"
  }
);

var htmlContent = '''
<html>
<body>
<script>
function callByDart(int value) {
    console.log("callByDart: " + value);
}
myChannelName.postMessage("This message is from javascript");
</script>
</body>
</html>
''';

controller.loadHtmlString(htmlContent);
controller.runJavascript("callByDart(100)");

控制器操作

你可以使用控制器执行多种操作，如加载请求、运行 JavaScript、重新加载页面等。

// 加载请求
controller.loadRequest(Uri.parse("https://www.example.com"));

// 运行 JavaScript
controller.runJavascript("console.log('Hello from Dart!')");

// 重新加载页面
controller.reload();

// 判断是否可以返回上一页
if (controller.canGoBack()) {
  controller.goBack();
}

// 判断是否可以前进到下一页
if (controller.canGoForward()) {
  controller.goForward();
}

处理用户数据文件夹

你可以为 WebViewController 设置用户数据文件夹，以便存储缓存和其他数据。

String cacheDir = "c:\\test";
var params = WindowsPlatformWebViewControllerCreationParams(
    userDataFolder: cacheDir);
var controller = WebViewController.fromPlatformCreationParams(params);

独立模式

如果你的应用仅在 Windows 上运行，并且希望减少库依赖，可以将 pubspec.yaml 文件修改为：

dependencies:
  webview_win_floating: ^1.0.0
  # webview_flutter: ^4.0.1  # 注释掉这行以适用于仅限 Windows 的应用

并将相关类名修改为带有 Win 前缀的类名。

WebViewWidget -> WinWebViewWidget
WebViewController -> WinWebViewController
NavigationDelegate -> WinNavigationDelegate

构建与安装问题

如果构建失败并出现 MSB3073 错误，请确保在管理员模式下运行 flutter build .。

总结

webview_win_floating 是一个强大的工具，适用于需要在 Windows 平台上显示 WebView 的 Flutter 应用。尽管存在一些限制，但通过合理的设计和配置，它可以满足大多数需求。希望这个指南能帮助你顺利集成和使用该插件。


更多关于Flutter悬浮窗口Web视图插件webview_win_floating的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter悬浮窗口Web视图插件webview_win_floating的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用webview_win_floating插件来创建悬浮窗口Web视图的示例代码。请注意，webview_win_floating是一个特定于Windows平台的插件，因此此代码只能在Windows平台上运行。

首先，确保你已经在pubspec.yaml文件中添加了webview_win_floating依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_win_floating: ^最新版本号  # 请替换为插件的实际最新版本号

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

接下来，在你的Flutter项目中，你可以使用以下代码来创建并显示一个悬浮窗口Web视图：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Floating Window Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late WebViewFloatingController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView Floating Window'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                // 创建并显示悬浮窗口Web视图
                _controller = await WebViewFloating.create(
                  initialUrl: 'https://www.example.com',  // 替换为你想要加载的URL
                  width: 800,
                  height: 600,
                  top: 100,
                  left: 100,
                );
              },
              child: Text('Open WebView Floating Window'),
            ),
            ElevatedButton(
              onPressed: () {
                // 如果需要关闭悬浮窗口，可以调用close方法
                if (_controller != null) {
                  _controller.close();
                }
              },
              child: Text('Close WebView Floating Window'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 确保在销毁页面时释放资源
    if (_controller != null) {
      _controller.dispose();
    }
    super.dispose();
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮，用于打开一个新的悬浮窗口Web视图，并加载指定的URL。另一个按钮用于关闭该悬浮窗口。

注意事项：

  1. Windows平台限制：webview_win_floating插件仅支持Windows平台，因此在其他平台上运行此代码会导致错误。
  2. 权限：确保你的应用具有在Windows上创建悬浮窗口的权限。这通常涉及到在应用的manifest文件中声明必要的权限，但对于Flutter插件，这些配置可能已内置在插件内部。
  3. 错误处理：在实际应用中，你可能需要添加更多的错误处理逻辑，以确保在创建或关闭悬浮窗口时处理可能出现的异常情况。

希望这能帮助你开始在Flutter中使用webview_win_floating插件！

回到顶部