flutter如何嵌入webview

在Flutter中如何嵌入WebView组件？目前尝试了官方推荐的webview_flutter插件，但在Android和iOS平台上遇到了一些兼容性问题。具体表现为：

  1. Android端加载部分网页时出现白屏
  2. iOS上手势滑动容易与网页内部滚动冲突
    请问有没有成熟的解决方案或优化建议？是否需要考虑其他第三方库？
2 回复

在Flutter中嵌入WebView，可使用webview_flutter插件。步骤如下：

  1. 添加依赖到pubspec.yaml；
  2. 导入包；
  3. 使用WebView组件，设置initialUrl等属性。 注意：Android需设置minSdkVersion≥19，iOS需在Info.plist中配置网络权限。

更多关于flutter如何嵌入webview的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中嵌入WebView可以使用官方推荐的webview_flutter插件。以下是具体实现步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  webview_flutter: ^4.4.2

运行 flutter pub get 安装依赖。

2. 基本使用示例

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

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://flutter.dev'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView示例')),
      body: WebViewWidget(controller: controller),
    );
  }
}

3. 主要功能配置

controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted) // 启用JavaScript
  ..setBackgroundColor(const Color(0x00000000)) // 设置背景色
  ..setNavigationDelegate(NavigationDelegate(
    onProgress: (int progress) {
      // 加载进度
    },
    onPageStarted: (String url) {
      // 页面开始加载
    },
    onPageFinished: (String url) {
      // 页面加载完成
    },
    onWebResourceError: (WebResourceError error) {
      // 加载错误
    },
    onNavigationRequest: (NavigationRequest request) {
      // 导航请求拦截
      return NavigationDecision.navigate;
    },
  ))
  ..loadRequest(Uri.parse('https://example.com'));

4. Android配置

在 android/app/src/main/AndroidManifest.xml 中添加网络权限：

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

5. iOS配置

在 ios/Runner/Info.plist 中添加：

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

这样就完成了WebView的嵌入，可以加载网页内容了。

回到顶部