Flutter内嵌网页视图插件in_app_webview的使用

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

Flutter内嵌网页视图插件in_app_webview的使用

简介

in_app_webview 是一个用于在Flutter应用程序中嵌入网页视图的简单插件。它允许用户在应用内部浏览网页，而无需跳转到外部浏览器。该插件提供了丰富的功能，如加载URL、返回上一页、前进下一页、分享当前链接和刷新页面等。

示例图片

功能

  • 加载URL：可以加载指定的URL并在应用内部显示。
  • 返回上一页：点击后退按钮可以返回到上一个页面。
  • 前进下一页：点击前进按钮可以前进到下一个页面。
  • 分享当前链接：可以通过分享按钮将当前页面的URL分享给其他应用。
  • 刷新页面：点击刷新按钮可以重新加载当前页面。

使用方法

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  in_app_webview: ^5.0.0+6  # 请根据实际情况选择最新版本

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

2. 完整示例代码

以下是一个完整的示例代码，展示了如何使用 in_app_webview 插件来嵌入网页视图：

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

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 隐藏调试模式的横幅
      home: Scaffold(
        appBar: AppBar(
          title: Text('InAppWebView 示例'),
          backgroundColor: const Color(0xFF262626), // 设置AppBar背景颜色
        ),
        body: InAppWebView(
          initialUrlRequest: URLRequest(url: Uri.parse("https://www.google.com/")), // 初始加载的URL
          initialOptions: InAppWebViewGroupOptions(
            crossPlatform: InAppWebViewOptions(
              useShouldOverrideUrlLoading: true, // 是否允许拦截URL加载
              mediaPlaybackRequiresUserGesture: false, // 是否需要用户手势来播放媒体
            ),
            android: AndroidInAppWebViewOptions(
              useHybridComposition: true, // 使用混合渲染
            ),
            ios: IOSInAppWebViewOptions(
              allowsInlineMediaPlayback: true, // 允许内联播放媒体
            ),
          ),
          onWebViewCreated: (InAppWebViewController controller) {
            // WebView创建时的回调
          },
          onLoadStart: (InAppWebViewController controller, Uri? url) {
            // 页面开始加载时的回调
            print("页面开始加载: $url");
          },
          onLoadStop: (InAppWebViewController controller, Uri? url) {
            // 页面加载完成时的回调
            print("页面加载完成: $url");
          },
          onProgressChanged: (InAppWebViewController controller, int progress) {
            // 页面加载进度变化时的回调
            print("加载进度: $progress%");
          },
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用in_app_webview插件来内嵌网页视图的示例代码。这个插件允许你在Flutter应用中嵌入并显示网页内容。

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

dependencies:
  flutter:
    sdk: flutter
  in_app_webview: ^2.16.0  # 请确保使用最新版本

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

接下来，你可以创建一个简单的Flutter应用来展示如何使用in_app_webview。以下是一个完整的示例：

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

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

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

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("In-App WebView Example"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: InAppWebView(
              initialUrl: "https://www.google.com",
              initialOptions: InAppWebViewGroupOptions(
                crossPlatform: InAppWebViewOptions(
                  debuggingEnabled: true,
                ),
              ),
              onWebViewCreated: (InAppWebViewController controller) {
                webViewController = controller;
              },
              onLoadStart: (InAppWebViewController controller, String url) {
                print("onLoadStart $url");
              },
              onLoadStop: (InAppWebViewController controller, String url) {
                print("onLoadStop $url");
              },
              onLoadError: (InAppWebViewController controller, String url, int code, String message) {
                print("onLoadError $url - Error $code: $message");
              },
              onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {
                print("onConsoleMessage: ${consoleMessage.message}");
              },
            ),
          ),
          ElevatedButton(
            onPressed: () async {
              if (webViewController != null) {
                await webViewController!.loadUrl(urlRequest: InAppWebViewUrlRequest(url: URL(string: "https://www.flutter.dev")));
              }
            },
            child: Text("Load Flutter Website"),
          ),
        ],
      ),
    );
  }
}

代码解释

  1. 添加依赖： 在pubspec.yaml中添加in_app_webview依赖项。

  2. 主应用： MyApp类是一个简单的StatelessWidget，它包含一个WebViewExample组件。

  3. WebView组件： WebViewExample是一个StatefulWidget，它包含一个InAppWebView组件。这个组件用于显示网页内容。

  4. 控制器： _WebViewExampleState类中定义了一个InAppWebViewController?类型的变量webViewController，用于控制WebView的行为。

  5. WebView配置：

    • initialUrl：初始加载的URL。
    • initialOptions：WebView的初始选项，例如调试模式。
    • onWebViewCreated：当WebView创建完成时回调，用于获取webViewController。
    • onLoadStart、onLoadStop、onLoadError和onConsoleMessage：分别处理加载开始、加载停止、加载错误和控制台消息。

  6. 按钮： 一个ElevatedButton，点击后会加载一个新的URL（在这个例子中是Flutter的官网）。

注意事项

  • 确保你已经正确安装了in_app_webview插件，并且使用的是最新版本。
  • 由于in_app_webview插件依赖于Android的WebView和iOS的WKWebView，因此你需要分别配置Android和iOS项目。
  • 调试时，可以启用调试模式（debuggingEnabled: true），以便在Chrome DevTools中调试WebView内容。

这个示例展示了如何在Flutter应用中使用in_app_webview插件来显示和控制网页视图。你可以根据需要进一步扩展和自定义这个示例。

回到顶部