Flutter教程实现WebView网页加载

在Flutter中实现WebView网页加载时遇到了一些问题：

  1. 使用webview_flutter插件加载网页时，部分网站显示空白页，但直接浏览器访问正常，该如何排查和解决？
  2. WebView如何监听页面加载进度，并在顶部显示进度条？
  3. 需要处理WebView中的JavaScript交互，Flutter如何与网页JS双向通信？
  4. 安卓和iOS的WebView表现不一致（如缓存策略或渲染效果），有什么跨平台兼容的方案？
  5. 如何禁止WebView的长按弹出菜单或强制缩放功能？
3 回复

要在Flutter中使用WebView加载网页，首先确保安装了webview_flutter插件。步骤如下：

  1. 在pubspec.yaml中添加依赖：
dependencies:
  webview_flutter: ^4.0.0

然后运行flutter pub get。

  1. 在代码中导入并使用WebView：
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebPage extends StatefulWidget {
  @override
  _MyWebPageState createState() => _MyWebPageState();
}

class _MyWebPageState extends State<MyWebPage> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView 示例')),
      body: WebView(
        initialUrl: 'https://www.baidu.com', // 加载的网页地址
        onWebViewCreated: (WebViewController webController) {
          _controller = webController;
        },
      ),
    );
  }
}

这段代码创建了一个简单的WebView页面，加载百度首页。注意，从webview_flutter 4.0.0开始，Android需要配置网络权限，需在AndroidManifest.xml中加入以下内容：

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

如果出现加载失败，还需检查是否正确配置了WebView相关设置（如混合内容支持）。

更多关于Flutter教程实现WebView网页加载的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用webview_flutter插件可以轻松加载网页。首先确保已添加依赖，在pubspec.yaml中加入：

dependencies:
  webview_flutter: ^4.1.0

然后运行flutter pub get。

代码示例：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter WebView')),
        body: WebViewExample(),
      ),
    );
  }
}

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

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://www.example.com', // 替换为你想加载的网址
      onWebViewCreated: (WebViewController webViewController) {
        _controller = webViewController;
      },
    );
  }
}

这段代码创建了一个简单的WebView，加载指定网址。如果需要与网页交互或操作，可以通过WebViewController完成。记得处理权限和错误情况以提高稳定性。

Flutter实现WebView网页加载

Flutter中可以使用webview_flutter插件来实现WebView功能，以下是实现步骤：

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 WebViewExample extends StatefulWidget {
  const WebViewExample({super.key});

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://flutter.dev'), // 替换为你想加载的网址
      )
      ..setJavaScriptMode(JavaScriptMode.unrestricted); // 启用JavaScript
  }

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

3. 进阶功能

加载进度指示器

late final WebViewController controller;
double loadingPercentage = 0;

@override
void initState() {
  super.initState();
  controller = WebViewController()
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {
          setState(() {
            loadingPercentage = progress.toDouble();
          });
        },
      ),
    )
    ..loadRequest(Uri.parse('https://flutter.dev'));
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Flutter WebView')),
    body: Stack(
      children: [
        WebViewWidget(controller: controller),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100,
          ),
      ],
    ),
  );
}

处理导航

controller.setNavigationDelegate(
  NavigationDelegate(
    onNavigationRequest: (NavigationRequest request) {
      if (request.url.contains('blocked.com')) {
        return NavigationDecision.prevent; // 阻止加载特定网址
      }
      return NavigationDecision.navigate; // 允许加载
    },
  ),
);

注意事项

  1. Android平台需要在AndroidManifest.xml中添加网络权限：
<uses-permission android:name="android.permission.INTERNET"/>
  1. iOS需要在Info.plist中添加：
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>
</dict>
  1. 对于复杂的WebView需求，可能需要使用平台视图功能。
回到顶部