Flutter网页视图展示插件fk_webview的使用

Flutter网页视图展示插件fk_webview的使用

插件信息

Pub Awesome Flutter Awesome Flutter License

fk_webview 是基于 flutter_inappwebview 的二次封装，用于在 Flutter 应用中展示网页视图。

使用说明

安装

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

dependencies:
  fk_webview: <last_version>

运行 flutter pub get 更新依赖。

配置
iOS

要支持 HTTP 请求，需要禁用 Apple Transport Security (ATS) 功能。以下是两种方式：

  1. 仅针对特定域名禁用 ATS： 在 Info.plist 文件中添加以下代码：

    <key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>www.yourserver.com</key>
    <dict>
      <!-- 允许子域名 -->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!-- 允许不安全的 HTTP 请求 -->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!-- 指定最低的 TLS 版本 -->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>

  2. 完全禁用 ATS： 在 Info.plist 文件中添加以下代码：

    <key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

其他可选属性：

  • <key>NSAllowsLocalNetworking</key>：设置为 true 以支持加载本地网络资源。
  • <key>NSAllowsArbitraryLoadsInWebContent</key>：针对从 WebView 发出的网络请求。
Android

支持 HTTP 请求，需在 res/xml/network_security_config.xml 中配置如下代码：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

然后在 AndroidManifest.xml 中引用该配置：

<application
    android:networkSecurityConfig="@xml/network_security_config"
    ... >
    ...
</application>

如果需要支持 <input type="file" accept="image/*" capture> 标签，还需在 AndroidManifest.xml 中配置文件提供器：

<provider
    android:name="com.pichillilorenzo.flutter_inappwebview.InAppWebViewFileProvider"
    android:authorities="${applicationId}.flutter_inappwebview.fileprovider"
    android:exported="false"
    android:grantUriPermissions="true">
    <meta-data
        android:name="android.support.FILE_PROVIDER_PATHS"
        android:resource="@xml/provider_paths" />
</provider>

更多配置请参考 flutter_inappwebview。

使用方法

初始化 FkWebView
import 'package:fk_webview/fk_webview.dart';

FKWebView(
  initialUrl: 'yoururl', // 初始 URL
  initialData: '<html><body><h1>test</h1></body></html>', // 初始 HTML 数据
  initialFile: 'assets/html/index.html', // 初始本地文件路径
  config: FKWebViewConfig(), // 配置选项
);
FKWebViewConfig
class FKWebViewConfig {
  // 配置项可以在这里定义
}

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 fk_webview 插件：

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

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

  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>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
              child: Text('打开网页'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) {
                      return FWebViewPage(
                        showNavBarItem: false, // 是否显示导航栏
                        immersive: true, // 是否沉浸式模式
                        isSafeArea: false, // 是否启用 SafeArea
                        urlBuilder: (_) {
                          return Future.value("https://www.baidu.com"); // 动态加载 URL
                        },
                      );
                    },
                  ),
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

更多关于Flutter网页视图展示插件fk_webview的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网页视图展示插件fk_webview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


fk_webview 是一个用于在 Flutter 应用中嵌入网页视图的插件。它基于原生的 WebView 实现，提供了丰富的功能来加载和显示网页内容。以下是如何在 Flutter 项目中使用 fk_webview 的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 fk_webview 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  fk_webview: ^latest_version

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

2. 导入包

在你的 Dart 文件中导入 fk_webview 包。

import 'package:fk_webview/fk_webview.dart';

3. 使用 FkWebView 组件

你可以在你的 Flutter 应用中使用 FkWebView 组件来展示网页内容。

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

class WebViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: FkWebView(
        initialUrl: 'https://www.example.com',
        onPageStarted: (String url) {
          print('Page started loading: $url');
        },
        onPageFinished: (String url) {
          print('Page finished loading: $url');
        },
        onWebResourceError: (WebResourceError error) {
          print('Error: ${error.description}');
        },
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: WebViewExample(),
));

4. 配置 Android 和 iOS

fk_webview 插件在 Android 和 iOS 上都需要进行一些配置。

Android

在 android/app/src/main/AndroidManifest.xml 文件中，确保你添加了以下权限：

<uses-permission android:name="android.permission.INTERNET" />

iOS

在 ios/Runner/Info.plist 文件中，确保你添加了以下配置：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

5. 运行应用

现在你可以运行你的 Flutter 应用，并看到 FkWebView 加载并显示指定的网页内容。

6. 其他功能

fk_webview 还提供了许多其他功能，例如：

  • JavaScript 支持：你可以通过 javascriptMode 参数来启用或禁用 JavaScript。
  • 自定义 User Agent：你可以通过 userAgent 参数来设置自定义的 User Agent。
  • 加载本地 HTML：你可以通过 initialFile 参数来加载本地的 HTML 文件。
FkWebView(
  initialUrl: 'https://www.example.com',
  javascriptMode: JavascriptMode.unrestricted,
  userAgent: 'MyCustomUserAgent',
);

7. 处理导航

你可以通过 navigationDelegate 来处理网页的导航请求，例如拦截某些 URL 或执行自定义操作。

FkWebView(
  initialUrl: 'https://www.example.com',
  navigationDelegate: (NavigationRequest request) {
    if (request.url.contains('blocked')) {
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  },
);

8. 处理 JavaScript 交互

你可以通过 javascriptChannels 来与网页中的 JavaScript 进行交互。

FkWebView(
  initialUrl: 'https://www.example.com',
  javascriptChannels: <JavascriptChannel>[
    JavascriptChannel(
        name: 'MyChannel',
        onMessageReceived: (JavascriptMessage message) {
          print(message.message);
        }),
  ].toSet(),
);

9. 处理 WebView 的生命周期

你可以通过 onWebViewCreated 回调来获取 WebViewController，从而控制 WebView 的生命周期。

FkWebView(
  initialUrl: 'https://www.example.com',
  onWebViewCreated: (WebViewController controller) {
    // 你可以在这里保存 controller 并在其他地方使用
  },
);

10. 处理 WebView 的缩放

你可以通过 gestureRecognizers 来处理 WebView 的缩放和滚动行为。

FkWebView(
  initialUrl: 'https://www.example.com',
  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
    Factory<OneSequenceGestureRecognizer>(
      () => EagerGestureRecognizer(),
    ),
  ].toSet(),
);
回到顶部