Flutter网页视图展示插件webviewx2的使用

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

Flutter网页视图展示插件webviewx2的使用

1. 创建一个WebViewXController在你的状态化组件中

late WebViewXController webviewController;

2. 在构建方法中添加WebViewX widget，并设置onWebViewCreated回调以在WebView初始化时获取控制器

WebViewX(
    initialContent: '<h2> Hello, world! </h2>',
    initialSourceType: SourceType.HTML,
    onWebViewCreated: (controller) => webviewController = controller,
    ...
    ... other options
);

3. 与控制器交互（运行示例应用查看一些用例）

webviewController.loadContent(
    'https://flutter.dev',
    SourceType.url,
);

webviewController.goBack();

webviewController.goForward();
...
...

关键功能和 属性

Widget 属性
  • String? initialContent: 初始WebView内容
  • SourceType initialSourceType: 初始WebView内容类型（url, urlBypass or html）
  • String? userAgent: 用户代理
  • double width: 组件宽度
  • double height: 组件高度
  • Function(WebViewXController controller)? onWebViewCreated: 初始化时执行的回调
  • Set<EmbeddedJsContent> jsContent: 包含嵌入JavaScript代码的对象
  • Set<DartCallback> dartCallBacks: 包含从JavaScript调用的Darts回调函数的对象
  • bool ignoreAllGestures: 是否忽略所有手势
  • JavascriptMode javascriptMode: 允许或禁止JavaScript执行
  • AutoMediaPlaybackPolicy initialMediaPlaybackPolicy: 规定是否允许媒体内容自动播放
  • void Function(String src)? onPageStarted: 页面开始加载时执行的回调
  • void Function(String src)? onPageFinished: 页面加载完成时执行的回调
  • NavigationDelegate? navigationDelegate: 点击WebView内容时执行的回调
  • void Function(WebResourceError error)? onWebResourceError: 加载资源错误时执行的回调
  • WebSpecificParams webSpecificParams: Web特定参数对象
  • MobileSpecificParams mobileSpecificParams: Mobile特定参数对象
Controller 属性
  • loadContent(URL, SourceType.URL): 加载URL并允许iframe嵌入
  • loadContent(URL, SourceType.URL_BYPASS): 加载URL不支持iframe嵌入
  • loadContent(URL, SourceType.URL_BYPASS, headers: {'x-something': 'value'}): 加载URL不支持iframe嵌入，带headers
  • loadContent(HTML, SourceType.HTML): 从字符串加载HTML
  • loadContent(HTML, SourceType.HTML, fromAssets: true): 从资产加载HTML
  • canGoBack(): 检查是否可以回退历史记录
  • goBack(): 回退历史记录
  • canGoForward(): 检查是否可以前进历史记录
  • goForward(): 前进历史记录
  • reload(): 重新加载当前内容
  • ignoringAllGestures: 获取是否忽略所有手势
  • setIgnoreAllGestures(value): 设置是否忽略所有手势
  • evalRaw Javascript(JS): 执行原始JavaScript代码
  • evalRaw Javascript(JS, inGlobalContext: true): 在全局上下文中执行原始JavaScript代码
  • callJsMethod(METHOD_NAME, PARAMS_LIST): 调用JavaScript方法
  • getContent(): 获取WebView内容
  • getScrollX(): 获取X轴滚动位置
  • getScrollY(): 获取Y轴滚动位置
  • scrollBy(int x, int y): 按照指定坐标滚动
  • scrollTo(int x, int y): 滚动到指定坐标
  • getTitle(): 获取内页标题
  • clearCache(): 清除缓存

限制和注意事项

  • 这个包旨在结合移动和Web的最佳实践，但在Web和移动之间存在差异。
  • 在开发过程中，默认渲染器是html。现在(Flutter 2, Dart 2.12)，默认渲染器是canvaskit。建议使用html渲染器。
  • 使用--web-renderer html命令来运行和构建。

示例代码

import 'package:flutter/material.dart';

import 'webview_page.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WebViewX Example App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const WebViewXPage(),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


在Flutter中，webviewx2 是一个用于展示网页内容的插件。它基于腾讯的 X5 内核，适用于 Android 平台，提供了更好的性能和兼容性。下面是一个如何在 Flutter 项目中使用 webviewx2 的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  webviewx2: ^latest_version  # 请替换为最新的版本号

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

接下来，在 Android 项目的 build.gradle 文件中添加对腾讯 X5 内核的支持。编辑 android/app/build.gradle 文件，确保你的 android 配置部分包含以下内容：

android {
    ...
    defaultConfig {
        ...
        ndk {
            abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
        }
    }
    ...
}

并且，你需要在 android/app/src/main/AndroidManifest.xml 中添加必要的权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

    ...
</manifest>

请注意，这些权限可能因应用需求而异，并且在实际应用中需要谨慎处理用户隐私。

现在，你可以在 Flutter 代码中使用 webviewx2 插件。以下是一个简单的示例，展示如何在 Flutter 应用中嵌入一个 WebView：

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

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

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

class WebViewX2Page extends StatefulWidget {
  @override
  _WebViewX2PageState createState() => _WebViewX2PageState();
}

class _WebViewX2PageState extends State<WebViewX2Page> {
  late WebViewX2Controller _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebViewX2 Example'),
      ),
      body: WebViewX2(
        initialUrl: 'https://www.example.com',
        onWebViewCreated: (WebViewX2Controller webViewController) {
          _controller = webViewController;
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 示例：在WebView中加载新的URL
          await _controller.loadUrl('https://www.google.com');
        },
        tooltip: 'Load new URL',
        child: Icon(Icons.open_in_new),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含一个 WebView，初始加载的 URL 是 https://www.example.com。我们还添加了一个浮动操作按钮（FAB），点击它可以加载一个新的 URL（在这个例子中是 https://www.google.com）。

请注意，由于 webviewx2 插件依赖于腾讯的 X5 内核，它可能不适用于所有设备和场景。确保在实际应用中充分测试，并根据需要进行适配。

回到顶部