Flutter网页视图插件fl_webview的使用

fl_webview 是一个用于在Flutter应用程序中嵌入网页视图的强大插件。它不仅支持加载URL，还提供了丰富的事件监听和自定义设置选项。本文将详细介绍如何使用 fl_webview 插件，并提供完整的示例代码。

iOS WebView本地化配置

在iOS上使用WebView时，如果需要支持多语言，可以在项目的 Info.plist 文件中添加以下键值对：

<key>CFBundleAllowMixedLocalizations</key>
<true/>

这将允许WebView根据设备的语言设置自动切换到相应的本地化资源。

使用 fl_webview

基本用法

以下是一个基本的 FlWebView 示例，展示了如何加载一个URL并处理各种回调事件：

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

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  final String url = 'https://flutter.dev';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FlWebView Example')),
      body: FlWebView(
        load: LoadUrlRequest(url),
        loadingBar: FlWebLoadingBar(color: Colors.red),
        webSettings: WebSettings(),
        delegate: FlWebViewDelegate(
          onPageStarted: (controller, url) {
            print('Page started loading: $url');
          },
          onPageFinished: (controller, url) {
            print('Page finished loading: $url');
          },
          onProgress: (controller, progress) {
            print('Loading progress: $progress%');
          },
          onSizeChanged: (controller, webViewSize) {
            print('WebView size changed: ${webViewSize.frameSize}');
          },
          onScrollChanged: (controller, webViewSize, offset, positioned) {
            print('WebView scroll changed: $offset');
          },
          onNavigationRequest: (controller, request) {
            print('Navigation requested: ${request.url}');
            return true;
          },
          onGeolocationPermissionsShowPrompt: (_, origin) async {
            print('Geolocation permission prompt for: $origin');
            // Handle location permission here
            return await getPermission(Permission.locationWhenInUse);
          },
          onShowFileChooser: (_, params) async {
            print('File chooser parameters: ${params.toMap()}');
            // Handle file selection here
            FileType fileType = FileType.any;
            if (params.acceptTypes.toString().contains('image')) {
              fileType = FileType.image;
            }
            if (params.acceptTypes.toString().contains('video')) {
              fileType = FileType.video;
            }
            FilePickerResult? result = await FilePicker.platform.pickFiles(
                type: fileType,
                allowMultiple: params.mode == FileChooserMode.openMultiple);
            final list = result?.files.where((item) => item.path != null).map((item) => item.path!).toList();
            return list ?? [];
          },
          onUrlChanged: (controller, url) {
            print('URL changed to: $url');
          },
        ),
        onWebViewCreated: (controller) async {
          String userAgentString = 'userAgentString';
          final value = await controller.getNavigatorUserAgent();
          print('navigator.userAgent: $value');
          userAgentString = '$value = $userAgentString';
          final userAgent = await controller.setUserAgent(userAgentString);
          print('Set userAgent: $userAgent');
        },
      ),
    );
  }

  Future<bool> getPermission(Permission permission) async {
    final status = await permission.request();
    return status.isGranted;
  }
}

自适应高度

为了使WebView的高度自适应内容，可以使用 FlAdaptHeightWevView 组件：

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

class AdaptHeightWebViewExample extends StatelessWidget {
  final String url = 'https://flutter.dev';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Adapt Height WebView Example')),
      body: FlAdaptHeightWevView(
        maxHeight: 1000,
        builder: (onSizeChanged, onScrollChanged, onWebViewCreated) =>
            BaseFlWebView(
          load: LoadUrlRequest(url),
          onWebViewCreated: onWebViewCreated,
          delegate: FlWebViewDelegate(
            onSizeChanged: onSizeChanged,
            onScrollChanged: onScrollChanged,
          ),
        ),
      ),
    );
  }
}

ScrollView嵌套WebView

当需要在一个可滚动的容器中嵌套WebView时，可以使用 ExtendedFlWebViewWithScrollView 组件：

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

class ScrollViewWithWebViewExample extends StatelessWidget {
  final String url = 'https://flutter.dev';

  @override
  Widget build(BuildContext context) {
    double webHeight = MediaQuery.of(context).size.height -
        MediaQuery.of(context).padding.top -
        kToolbarHeight;

    return Scaffold(
      appBar: AppBar(title: Text('ScrollView with WebView Example')),
      body: ExtendedFlWebViewWithScrollView(
        contentHeight: webHeight,
        scrollViewBuilder: (controller, canScroll, webView) {
          return CustomScrollView(
            controller: controller,
            physics: canScroll
                ? const BouncingScrollPhysics()
                : const NeverScrollableScrollPhysics(),
            slivers: [
              SliverToBoxAdapter(child: webView),
              SliverList.builder(
                itemBuilder: (context, index) {
                  return Container(
                    height: 100,
                    width: double.infinity,
                    color: index.isEven ? Colors.lightBlue : Colors.amberAccent,
                    child: Center(child: Text('Item $index')),
                  );
                },
                itemCount: 30,
              ),
            ],
          );
        },
        webViewBuilder: (onSizeChanged, onScrollChanged, onWebViewCreated) {
          return BaseFlWebView(
            load: LoadUrlRequest(url),
            delegate: FlWebViewDelegate(
              onSizeChanged: onSizeChanged,
              onScrollChanged: onScrollChanged,
            ),
            onWebViewCreated: onWebViewCreated,
            webSettings: WebSettings(javascriptMode: JavascriptMode.unrestricted),
          );
        },
      ),
    );
  }
}

总结

通过上述示例代码，您可以轻松地在Flutter应用中集成 fl_webview 插件，并实现加载网页、处理回调事件、自适应高度以及在ScrollView中嵌套WebView等功能。希望这些示例能帮助您更好地理解和使用 fl_webview 插件。