Flutter网页视图插件flutter_adeeinappwebview的使用

Flutter网页视图插件flutter_adeeinappwebview的使用

在Flutter开发中，flutter_adeeinappwebview 是一个非常强大的插件，用于在应用中嵌入网页视图。本文将详细介绍如何使用该插件，并提供完整的示例代码。

安装插件

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

dependencies:
  flutter_adeeinappwebview: ^0.0.1

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

flutter pub get

示例代码

以下是完整的示例代码，展示如何使用 flutter_adeeinappwebview 插件来加载网页。

示例代码

import 'dart:async';

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化插件
  if (!kIsWeb && defaultTargetPlatform == TargetPlatform.android) {
    await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);
  }

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter_adeeinappwebview 示例'),
        ),
        body: InAppWebViewExample(),
      ),
    );
  }
}

class InAppWebViewExample extends StatefulWidget {
  @override
  _InAppWebViewExampleState createState() => _InAppWebViewExampleState();
}

class _InAppWebViewExampleState extends State<InAppWebViewExample> {
  late InAppWebViewController webViewController;

  @override
  Widget build(BuildContext context) {
    return InAppWebView(
      initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
      onWebViewCreated: (controller) {
        webViewController = controller;
      },
      onLoadStop: (controller, url) {
        print("网页加载完成: $url");
      },
    );
  }
}

代码说明

  1. 初始化插件：

    • 在 main 函数中，通过 WidgetsFlutterBinding.ensureInitialized() 确保Flutter框架已初始化。
    • 如果目标平台为Android且不是Web环境，则启用调试模式以方便调试。

  2. MaterialApp：

    • 使用 MaterialApp 创建一个基本的Flutter应用界面。
    • 设置 home 属性为包含 InAppWebViewExample 的 Scaffold。

  3. InAppWebView：

    • 使用 InAppWebView 组件加载指定的URL（例如 https://www.example.com）。
    • onWebViewCreated 回调函数会在WebView创建时触发，可以获取 InAppWebViewController 实例。
    • onLoadStop 回调函数会在网页加载完成后触发，打印当前加载的URL。

运行效果

运行上述代码后，您将在应用中看到一个嵌入的网页视图，显示 https://www.example.com 的内容。当网页加载完成后，控制台会输出类似以下信息：

网页加载完成: https://www.example.com

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

1 回复

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


flutter_adeeinappwebview 是一个 Flutter 插件，用于在 Flutter 应用中嵌入网页视图。它基于 flutter_inappwebview 插件，提供了丰富的功能来控制和自定义网页视图的行为。以下是如何使用 flutter_adeeinappwebview 插件的基本指南。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_adeeinappwebview: ^latest_version

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

2. 导入插件

在你的 Dart 文件中导入 flutter_adeeinappwebview 插件：

import 'package:flutter_adeeinappwebview/flutter_adeeinappwebview.dart';

3. 使用 InAppWebView

你可以使用 InAppWebView 组件来嵌入网页视图。以下是一个简单的示例：

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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter AdeeinAppWebView Example'),
        ),
        body: InAppWebViewExample(),
      ),
    );
  }
}

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

class _InAppWebViewExampleState extends State<InAppWebViewExample> {
  InAppWebViewController? webViewController;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return InAppWebView(
      initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
      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");
      },
      onProgressChanged: (InAppWebViewController controller, int progress) {
        print("Loading progress: $progress%");
      },
    );
  }
}

4. 控制网页视图

你可以通过 InAppWebViewController 来控制网页视图的行为。例如，你可以加载新的 URL、执行 JavaScript 代码、处理导航事件等。

FloatingActionButton(
  onPressed: () {
    webViewController?.loadUrl(
        urlRequest: URLRequest(url: Uri.parse("https://www.google.com")));
  },
  child: Icon(Icons.refresh),
),

5. 处理 JavaScript

你可以在网页视图中执行 JavaScript 代码，并处理返回的结果：

webViewController?.evaluateJavascript(source: "alert('Hello, World!');");

6. 处理导航事件

你可以通过 onLoadStart 和 onLoadStop 等回调来处理页面加载事件。你还可以通过 onNavigationRequest 来拦截导航请求并决定是否允许导航：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  onNavigationRequest: (InAppWebViewController controller, NavigationRequest request) {
    if (request.url.host == "www.example.com") {
      return NavigationActionPolicy.ALLOW;
    }
    return NavigationActionPolicy.CANCEL;
  },
);

7. 自定义设置

你可以通过 InAppWebViewSettings 来自定义网页视图的行为，例如启用或禁用 JavaScript、设置缓存模式等：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  initialSettings: InAppWebViewSettings(
    javaScriptEnabled: true,
    cacheMode: CacheMode.LOAD_DEFAULT,
  ),
);

8. 处理错误

你可以通过 onLoadError 来处理页面加载错误：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  onLoadError: (InAppWebViewController controller, Uri? url, int code, String message) {
    print("Error loading $url: $message");
  },
);

9. 清理资源

在 dispose 方法中，记得清理资源：

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