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

flutter_inline_webview_macos 是一个用于在 macOS 上显示原生 WebView 的 Flutter 插件。这个插件目前处于测试阶段，开发者可以在此阶段提供反馈和贡献。

开始使用

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_inline_webview_macos: ^0.1.0 # 确保使用最新版本

运行 flutter pub get 来安装新的依赖项。

2. 示例代码

以下是一个完整的示例，展示了如何在应用中集成并使用该插件来加载和控制 WebView。

import 'package:flutter/material.dart';
import 'package:flutter_inline_webview_macos/flutter_inline_webview_macos.dart';
import 'package:flutter_inline_webview_macos/flutter_inline_webview_macos_controller.dart';
import 'package:flutter_inline_webview_macos/flutter_inline_webview_macos/types.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _hide = true;

  InlineWebViewMacOsController? _controller;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            children: [
              if (_hide)
                Column(
                  children: [
                    InlineWebViewMacOs(
                      key: widget.key,
                      width: 500,
                      height: 300,
                      onWebViewCreated: (controller) {
                        _controller = controller;
                        // Uncomment to load a URL on creation
                        // _controller!.loadUrl(
                        //     urlRequest: URLRequest(
                        //         url: Uri.parse("https://google.com")));
                      },
                    ),
                    TextButton(
                        onPressed: () async {
                          await _controller!.loadUrl(
                              urlRequest: URLRequest(
                                  url: Uri.parse("https://youtube.com/")));
                        },
                        child: const Text('Load "youtube.com"')),
                    TextButton(
                        onPressed: () async {
                          await _controller!.loadUrl(
                              urlRequest: URLRequest(
                                  url: Uri.parse("https://google.com")));
                        },
                        child: const Text('Load "google.com"')),
                    TextButton(
                        onPressed: () async {
                          final url = await _controller!.getUrl();
                          print(url);
                        },
                        child: const Text("Get current URL")),
                  ],
                ),
              if (!_hide) const SizedBox(),
              TextButton(
                  onPressed: () {
                    setState(() {
                      _hide = !_hide;
                    });
                  },
                  child: Text("Toggle hide ${!_hide}")),
            ],
          ),
        ),
      ),
    );
  }
}

3. 功能说明

• InlineWebViewMacOs：这是核心组件，用于显示 WebView。
• onWebViewCreated：回调函数，当 WebView 创建完成时调用，并返回控制器对象。
• loadUrl：通过控制器加载指定 URL。
• getUrl：获取当前 WebView 加载的 URL。

4. 注意事项

• 由于此插件仍处于测试阶段，可能会存在一些未解决的问题或功能限制。
• 如果遇到问题或有任何建议，请访问 GitHub Issues 提交反馈。

希望这个指南能帮助你顺利集成 flutter_inline_webview_macos 插件到你的项目中！