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

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

在Flutter开发中，内嵌网页视图是一个常见的需求。ruut_inappwebview 是一个强大的插件，可以帮助开发者轻松地在Flutter应用中集成内嵌网页功能。本文将通过完整的示例代码，展示如何使用 ruut_inappwebview 插件。

安装 ruut_inappwebview

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

dependencies:
  ruut_inappwebview: ^版本号

然后运行以下命令安装依赖：

flutter pub get

示例代码

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

1. 导入必要的库

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

2. 创建主应用

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

3. 创建 MyApp 类

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

4. 创建 WebViewExample 页面

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

class _WebViewExampleState extends State<WebViewExample> {
  late RuutInAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("InAppWebView Example"),
      ),
      body: RuutInAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
        onWebViewCreated: (controller) {
          _webViewController = controller;
        },
        onLoadStop: (controller, url) {
          print("网页加载完成: $url");
        },
      ),
    );
  }
}

关键功能说明

1. 加载网页

通过 initialUrlRequest 参数指定初始加载的URL。例如：

initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com"))

2. 监听事件

可以监听多个事件，例如网页加载完成时触发 onLoadStop：

onLoadStop: (controller, url) {
  print("网页加载完成: $url");
}

3. 调用JavaScript

可以通过 evaluateJavascript 方法执行JavaScript代码：

_webViewController.evaluateJavascript(code: "alert('Hello, World!');");

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

1 回复

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


flutter_inappwebview 是一个用于在 Flutter 应用中嵌入网页视图的插件。它提供了比 Flutter 自带的 WebView 更丰富的功能，比如支持 JavaScript、自定义用户代理、Cookie 管理等。以下是 flutter_inappwebview 的基本使用方法。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^5.4.3+7  # 请使用最新版本

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

2. 基本使用

在你的 Dart 文件中导入 flutter_inappwebview 并创建一个 InAppWebView 组件。

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

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

class _MyWebViewState extends State<MyWebView> {
  InAppWebViewController? webViewController;

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

3. 控制 WebView

你可以通过 InAppWebViewController 来控制 WebView 的行为，比如加载 URL、执行 JavaScript、获取页面标题等。

FloatingActionButton(
  onPressed: () async {
    if (webViewController != null) {
      await webViewController!.loadUrl(
          urlRequest: URLRequest(url: Uri.parse("https://dart.dev")));
    }
  },
  child: Icon(Icons.navigate_next),
),

4. 处理 JavaScript

你可以通过 InAppWebViewController 执行 JavaScript 代码，并获取返回结果。

FloatingActionButton(
  onPressed: () async {
    if (webViewController != null) {
      var result = await webViewController!.evaluateJavascript(source: "2 + 2");
      print("JavaScript result: $result");
    }
  },
  child: Icon(Icons.code),
),

5. 处理 Cookie

flutter_inappwebview 还提供了丰富的 Cookie 管理功能。

FloatingActionButton(
  onPressed: () async {
    var cookieManager = CookieManager.instance();
    await cookieManager.setCookie(
      url: Uri.parse("https://flutter.dev"),
      name: "myCookie",
      value: "myValue",
    );
  },
  child: Icon(Icons.cookie),
),

6. 自定义用户代理

你可以自定义 WebView 的用户代理（User-Agent）。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://flutter.dev")),
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      userAgent: "MyCustomUserAgent/1.0",
    ),
  ),
),

7. 处理错误

你可以监听 WebView 加载过程中的错误。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://flutter.dev")),
  onLoadError: (InAppWebViewController controller, Uri? url, int code, String message) {
    print("Load error: $message");
  },
),

8. 销毁 WebView

在页面销毁时，确保释放 WebView 资源。

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