Flutter Windows平台内嵌WebView插件flutter_inappwebview_windows的使用

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

Flutter Windows平台内嵌WebView插件flutter_inappwebview_windows的使用

插件介绍

flutter_inappwebview_windows 是一个用于在Windows平台上实现WebView2的Flutter插件。该插件是官方推荐的，因此可以直接在项目中使用 flutter_inappwebview 包装器。当您构建应用时，此包将自动包含在您的应用中，无需手动添加到 pubspec.yaml 文件。

使用示例

下面是一个完整的示例代码，展示了如何在Flutter Windows应用中使用 flutter_inappwebview_windows 插件。

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final String url = 'https://www.example.com'; // 替换为实际URL

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: Center(
        child: WebViewWindow(
          url: url,
          onNavigationCalled: (String url) {
            print('Navigated to $url');
          },
        ),
      ),
    );
  }
}

class WebViewWindow extends StatelessWidget {
  final String url;
  final Function(String) onNavigationCalled;

  WebViewWindow({this.url, this.onNavigationCalled});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: url,
      javascriptMode: JavascriptMode.unrestricted,
      onNavigationCalled: onNavigationCalled,
      navigationDelegate: NavigationDelegate(),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter Windows平台上使用flutter_inappwebview_windows插件来内嵌WebView的示例代码。这个插件允许你在Flutter应用中嵌入一个WebView，并与之进行交互。

首先，你需要在你的pubspec.yaml文件中添加flutter_inappwebview和flutter_inappwebview_windows依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^5.3.2  # 请检查最新版本号
  flutter_inappwebview_windows: ^0.0.1+4  # 请检查最新版本号

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

接下来，在你的Flutter应用中，你可以创建一个包含WebView的页面。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter_inappwebview_windows/flutter_inappwebview_windows.dart';

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

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

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  InAppWebViewController? _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView Example'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: InAppWebView(
              initialUrl: "https://www.google.com",
              initialOptions: InAppWebViewGroupOptions(
                crossPlatform: InAppWebViewOptions(
                  debuggingEnabled: true,
                ),
                windows: WindowsInAppWebViewOptions(
                  webPreferences: WindowsWebPreferences(
                    javaScriptEnabled: true,
                  ),
                ),
              ),
              onWebViewCreated: (InAppWebViewController controller) {
                _webViewController = controller;
              },
            ),
          ),
          ElevatedButton(
            onPressed: () async {
              if (_webViewController != null) {
                _webViewController!.loadUrl(urlRequest: URLRequest(url: Uri.parse("https://www.flutter.dev")));
              }
            },
            child: Text('Load Flutter.dev'),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _webViewController?.dispose();
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个InAppWebView组件，用于显示一个WebView。我们还添加了一个按钮，点击该按钮时，WebView将加载一个新的URL。

关键部分解释：

  1. 依赖添加：在pubspec.yaml中添加flutter_inappwebview和flutter_inappwebview_windows。
  2. WebView创建：使用InAppWebView组件来创建WebView，并设置初始URL和选项。
  3. 控制器：通过onWebViewCreated回调获取InAppWebViewController，以便后续对WebView进行操作。
  4. 加载新URL：使用_webViewController!.loadUrl()方法来加载新的URL。

请确保你已经按照插件的文档正确设置了Windows平台的权限和配置，以便插件能够正常工作。

希望这个示例代码能帮助你在Flutter Windows平台上使用flutter_inappwebview_windows插件来内嵌WebView。

回到顶部