Flutter嵌入腾讯X5内核浏览网页插件webview_flutter_x5的使用

Flutter嵌入腾讯X5内核浏览网页插件webview_flutter_x5的使用

简介

webview_flutter_x5 是一个用于 Flutter 的插件，它允许开发者在应用中嵌入 WebView，并支持腾讯 X5 内核。在 Android 平台上，它利用了腾讯 X5 内核来增强网页渲染能力。

功能特点：

• 支持 Android 和 iOS 平台。
• 提供基于腾讯 X5 内核的高性能 WebView。
• 支持 JavaScript 操作。
• 可配置权限请求。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  webview_flutter_x5: ^latest_version

运行以下命令以更新依赖：

flutter pub get

2. 初始化 X5 内核

在 Flutter 应用启动时，需要初始化 X5 内核。可以通过调用 WebviewFlutterX5.initX5 方法完成初始化。

import 'package:webview_flutter_x5/webview_flutter_x5.dart';

void initX5() async {
  await WebviewFlutterX5.initX5(
    needPermissionCallback: (List<String> permissions) async {
      List<Permission> permissionList = [];
      for (final item in permissions) {
        if (item == 'camera') {
          permissionList.add(Permission.camera);
        } else if (item == 'storage') {
          permissionList.add(Permission.storage);
        }
      }
      if (permissionList.isNotEmpty) {
        Map<Permission, PermissionStatus> statuses = await permissionList.request();
        print('权限状态: $statuses');
      }
    },
  );
}

3. 创建 WebView 页面

创建一个简单的 WebView 页面，加载指定的 URL。

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

class WebviewPage extends StatefulWidget {
  final String url;

  WebviewPage(this.url);

  [@override](/user/override)
  _WebviewPageState createState() => _WebviewPageState();
}

class _WebviewPageState extends State<WebviewPage> {
  final Completer<WebViewController> _completer = Completer<WebViewController>();
  bool loading = true;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化 X5 内核（仅限 Android）
    if (Platform.isAndroid) {
      WebView.platform = SurfaceAndroidWebView();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebView(
          initialUrl: widget.url,
          onWebViewCreated: _completer.complete,
          javascriptMode: JavascriptMode.unrestricted,
          onPageStarted: (url) {
            print('页面开始加载: $url');
          },
          onPageFinished: (url) {
            print('页面加载完成: $url');
            setState(() {
              loading = false;
            });
          },
          navigationDelegate: (NavigationRequest request) {
            print('导航请求: ${request.url}');
            return NavigationDecision.navigate;
          },
        ),
        loading ? Center(child: CircularProgressIndicator()) : Container(),
      ],
    );
  }
}

4. 配置 Android 平台

在 Android 项目中，确保 minSdkVersion 至少为 19，并启用 Hybrid Composition。

打开 android/app/build.gradle 文件，修改 minSdkVersion：

android {
    defaultConfig {
        minSdkVersion 19
    }
}

在 main.dart 中启用 Hybrid Composition：

import 'dart:io';

import 'package:webview_flutter_x5/webview_flutter_x5.dart';

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

class WebViewExampleState extends State<WebViewExample> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 启用 Hybrid Composition
    if (Platform.isAndroid) {
      WebView.platform = SurfaceAndroidWebView();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://flutter.dev',
    );
  }
}

5. 运行示例

运行以下代码以查看效果：

import 'dart:async';
import 'dart:io';

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({this.title = ''});

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化 X5 内核
    WebviewFlutterX5.initX5();
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => WebviewPage('https://www.baidu.com')),
                );
              },
              child: Text('打开百度'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => WebviewPage('https://www.google.com')),
                );
              },
              child: Text('打开谷歌'),
            ),
          ],
        ),
      ),
    );
  }
}

完整示例代码

以下是完整的示例代码，包括初始化、权限请求、WebView 页面等部分。

import 'dart:async';
import 'dart:io';

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({this.title = ''});

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化 X5 内核
    WebviewFlutterX5.initX5();
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => WebviewPage('https://www.baidu.com')),
                );
              },
              child: Text('打开百度'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => WebviewPage('https://www.google.com')),
                );
              },
              child: Text('打开谷歌'),
            ),
          ],
        ),
      ),
    );
  }
}

class WebviewPage extends StatefulWidget {
  final String url;

  WebviewPage(this.url);

  [@override](/user/override)
  _WebviewPageState createState() => _WebviewPageState();
}

class _WebviewPageState extends State<WebviewPage> {
  final Completer<WebViewController> _completer = Completer<WebViewController>();
  bool loading = true;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化 X5 内核（仅限 Android）
    if (Platform.isAndroid) {
      WebView.platform = SurfaceAndroidWebView();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebView(
          initialUrl: widget.url,
          onWebViewCreated: _completer.complete,
          javascriptMode: JavascriptMode.unrestricted,
          onPageStarted: (url) {
            print('页面开始加载: $url');
          },
          onPageFinished: (url) {
            print('页面加载完成: $url');
            setState(() {
              loading = false;
            });
          },
          navigationDelegate: (NavigationRequest request) {
            print('导航请求: ${request.url}');
            return NavigationDecision.navigate;
          },
        ),
        loading ? Center(child: CircularProgressIndicator()) : Container(),
      ],
    );
  }
}