Flutter内嵌WebView插件flutter_inappwebview_ios的使用

当然，以下是一个关于如何在Flutter项目中使用flutter_inappwebview_ios插件来嵌入WebView的示例代码。请注意，这个插件主要用于iOS，但也有对Android的支持（通过flutter_inappwebview）。为了简化，我们将重点放在iOS上，同时确保代码也适用于Android（如果你需要的话）。

首先，确保你已经在pubspec.yaml文件中添加了依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^5.3.2+4  # 这个版本同时支持iOS和Android

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

接下来，在你的Flutter项目中创建一个新的Dart文件，比如webview_page.dart，并在其中实现WebView功能：

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

class WebViewPage extends StatefulWidget {
  final String url;

  WebViewPage({required this.url});

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

class _WebViewPageState extends State<WebViewPage> {
  InAppWebViewController? _webViewController;
  InAppWebViewGroupOptions _groupOptions = InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      useShouldOverrideUrlLoading: true,
      mediaPlaybackRequiresUserGesture: true,
    ),
    ios: IOSInAppWebViewOptions(
      allowsInlineMediaPlayback: true,
    ),
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse(widget.url)),
        initialOptions: _groupOptions.crossPlatform!,
        onWebViewCreated: (InAppWebViewController controller) {
          _webViewController = controller;
        },
        onLoadStart: (InAppWebViewController controller, String url) {
          print("onLoadStart $url");
        },
        onLoadStop: (InAppWebViewController controller, String url) async {
          print("onLoadStop $url");
          // Optionally, you can hide the loading indicator here
        },
        onProgressChanged: (InAppWebViewController controller, int progress) {
          print("onProgressChanged $progress");
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          if (_webViewController != null) {
            _webViewController!.goBack();
          }
        },
        tooltip: 'Go back',
        child: Icon(Icons.arrow_back),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _webViewController?.dispose();
  }
}

在你的主应用文件（比如main.dart）中，你可以导航到这个WebView页面：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => WebViewPage(url: 'https://www.example.com')),
            );
          },
          child: Text('Open WebView'),
        ),
      ),
    );
  }
}

这个示例展示了如何创建一个包含WebView的页面，并在点击按钮时导航到该页面。WebView页面加载指定的URL，并提供了一些基本的回调（如加载开始、加载停止和进度改变）。

请确保在iOS项目中配置适当的权限和设置，比如在Info.plist中添加必要的键和值来允许WebView加载内容。

此外，由于flutter_inappwebview插件已经合并了iOS和Android的支持，因此在实际项目中，你可能不需要单独使用flutter_inappwebview_ios。上述代码适用于iOS和Android平台。