Android12+真机SingleChildScrollView中视口外WebView无响应问题

问题场景 #

• 用flutter_html渲染包含长文本和多个iframe的文章，自定义扩展通过InAppWebView加载YouTube、TikTok等第三方嵌入内容
• 页面外层用SingleChildScrollView包裹以支持滚动
• 异常表现：初始在视口内的WebView全设备（含模拟器）正常工作；但Android12+真机上，初始不在视口内、需要滚动后才能看到的WebView会出现无响应，Android9真机、iOS设备及所有模拟器均无此问题

原因分析 #

Android 12（API 31）及以上版本对视图的后台生命周期做了严格优化：当组件初始不可见（不在视口内）时，系统会暂停或延迟其核心初始化流程，包括WebView的渲染引擎启动、资源加载。而SingleChildScrollView不会主动触发不可见子组件的完整生命周期回调，加上InAppWebView自身的初始化逻辑，导致WebView被滚动到视口内时无法正常恢复工作。

另外，flutter_html的自定义扩展在渲染不可见组件时，InAppWebView的onLoadStart、onPageFinished等核心回调可能被Android 12+的后台进程限制策略抑制，进一步导致WebView无响应。

解决方案 #

1. 给InAppWebView加可见性监听，延迟初始化 #

用visibility_detector包监听WebView的可见状态，只有当组件进入视口后才初始化WebView，避免系统后台抑制：

import 'package:visibility_detector/visibility_detector.dart';

// 自定义iframe扩展的build方法
@override
Widget build(BuildContext context) {
  bool _isInitialized = false;
  return VisibilityDetector(
    key: Key('iframe-${widget.attributes['src']}'),
    onVisibilityChanged: (info) {
      if (info.visibleFraction > 0.5 && !_isInitialized) {
        setState(() => _isInitialized = true);
      }
    },
    child: _isInitialized
        ? InAppWebView(
            initialUrlRequest: URLRequest(url: Uri.parse(widget.attributes['src']!)),
            // 你的WebView配置
          )
        : Container(
            height: 200, // 占位高度，防止滚动时布局跳变
            color: Colors.grey[200],
            child: const Center(child: CircularProgressIndicator()),
          ),
  );
}

2. 调整InAppWebView的Android专属配置 #

在initialSettings中强制WebView即使不可见也初始化核心引擎：

InAppWebView(
  initialSettings: InAppWebViewSettings(
    androidHardwareAcceleration: true,
    androidWebSettings: AndroidWebSettings(
      useWideViewPort: true,
      loadsImagesAutomatically: true,
      // 取消WebView的"不绘制"标记，强制初始化
      setWillNotDraw(false),
    ),
  ),
  // 其他配置
)

3. 替换SingleChildScrollView为懒加载列表 #

如果文章内容可以拆分，用CustomScrollView配合SliverList实现懒加载，只渲染当前视口附近的组件，减少系统资源占用：

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          // 根据index渲染文本段落或iframe组件
          return _buildContentItem(index);
        },
        childCount: contentSegments.length,
      ),
    ),
  ],
)

4. 更新依赖到最新稳定版 #

确保flutter_html和flutter_inappwebview使用最新稳定版，修复已知的兼容性问题：

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_html: ^3.0.0 # 或最新稳定版
  flutter_inappwebview: ^6.0.0 # 或最新稳定版
  visibility_detector: ^0.4.0+2

验证方法 #

1. 执行flutter pub get更新依赖
2. 替换原有的自定义iframe扩展实现
3. 在Android12+真机上测试滚动加载WebView的场景，确认无响应问题消失

内容的提问来源于stack exchange，提问作者3nws