Flutter网页视图插件webviewx的使用

注意：webviewx插件已经被归档，不再维护。以下内容基于该插件的历史版本进行介绍。

项目信息

• Pub Package
• 注意：此插件已被归档且不再维护。官方建议寻找其他替代方案。

快速开始

基本用法

1. 创建一个WebViewXController

   在你的状态化组件中定义控制器：

   late WebViewXController webviewController;
   

2. 在构建方法中添加WebViewX组件

   设置onWebViewCreated回调以获取初始化后的控制器：

   WebViewX(
       initialContent: '<h2>Hello, world!</h2>',
       initialSourceType: SourceType.HTML,
       onWebViewCreated: (controller) => webviewController = controller,
       // ... 其他选项
   );
   

3. 与控制器交互

   可以通过控制器加载网页、返回上一页等操作：

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

重要提示

如果你需要在WebView上方添加其他小部件（例如，在Stack小部件内），你必须将这些小部件包装在一个WebViewAware小部件中。这在移动设备上不起作用，但在Web端它允许顶部的小部件拦截手势。否则，这些小部件可能无法点击，或者iframe会意外刷新/重新加载（这是一个已知问题）。

特性

小部件属性

控制器属性

示例代码

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

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

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

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

class WebViewXPage extends StatefulWidget {
  const WebViewXPage({Key? key}) : super(key: key);

  @override
  _WebViewXPageState createState() => _WebViewXPageState();
}

class _WebViewXPageState extends State<WebViewXPage> {
  late WebViewXController webviewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebViewX Demo'),
      ),
      body: WebViewX(
        initialContent: '<h2>Hello, world!</h2>',
        initialSourceType: SourceType.HTML,
        onWebViewCreated: (controller) => webviewController = controller,
        width: double.infinity,
        height: double.infinity,
        onPageFinished: (src) {
          print('Page finished loading $src');
        },
        onWebResourceError: (error) {
          print('Error loading resource: ${error.description}');
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          if (await webviewController.canGoBack()) {
            webviewController.goBack();
          } else {
            webviewController.loadContent(
              'https://flutter.dev',
              SourceType.url,
            );
          }
        },
        child: const Icon(Icons.navigate_before),
      ),
    );
  }
}

以上代码展示了如何创建一个简单的Flutter应用程序，其中包含一个WebViewX组件用于加载HTML内容或URL，并提供了基本的导航控制功能。