Flutter WebView适配问题：视频无法匹配容器尺寸

针对使用webview_flutter加载视频URL时出现的内容适配问题，可通过以下步骤解决：

1. 统一容器与URL参数尺寸 #

当前代码中SizedBox容器尺寸为140x140，但传给URL的参数是100x100，尺寸不匹配会导致内容缩放异常。修改_buildVideoWebView，将容器尺寸和URL参数统一：

Widget _buildVideoWebView(
  int index,
  String lotId,
) {
  const targetSize = 140.0;
  return SizedBox(
    height: targetSize,
    width: targetSize,
    child: DnaWebViewInterface(
      key: webVideoKey[index],
      url: getDiamondVideoFileUrl(
        lotId,
        height: targetSize,
        width: targetSize,
      ),
    ),
  );
}

2. 配置WebView的视口与缩放规则 #

调整DnaWebViewInterfaceState中的WebViewController配置，禁用缩放并注入JS强制页面适配容器：

late final WebViewController _webViewController = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  // 设置桌面端UA，避免移动端页面适配逻辑干扰
  ..setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36')
  ..loadRequest(Uri.parse(widget.url))
  ..setNavigationDelegate(
    NavigationDelegate(
      onProgress: (int progress) {
        _progressValueNotifier.value = progress / 100;
      },
      onPageFinished: (_) {
        _progressValueNotifier.value = 1;
        // 注入JS调整页面布局适配WebView
        _webViewController.runJavaScript('''
          // 重置视口，禁止缩放
          document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
          // 移除页面默认边距
          document.body.style.margin = '0';
          document.body.style.padding = '0';
          // 定位视频容器并调整尺寸（替换为实际的视频容器选择器）
          const videoContainer = document.querySelector('video') || document.querySelector('.video-container');
          if(videoContainer) {
            videoContainer.style.width = '100%';
            videoContainer.style.height = '100%';
            videoContainer.style.objectFit = 'cover'; // 按设计需求选择cover/contain
            // 如果设计是圆形视频，添加圆角
            videoContainer.style.borderRadius = '50%';
            videoContainer.style.overflow = 'hidden';
          }
        ''');
      },
    ),
  )
  ..setZoomEnabled(false) // 禁用WebView自带缩放
  ..setBackgroundColor(CoreColor.neutral100);

3. 确保WebView占满容器 #

确认WebViewWidget已通过Positioned.fill完全填充父容器，避免出现留白或溢出。如果仍有布局问题，可添加ConstrainedBox强制约束：

Positioned.fill(
  child: ConstrainedBox(
    constraints: const BoxConstraints.expand(),
    child: WebViewWidget(
      controller: _webViewController,
      gestureRecognizers: {
        Factory<OneSequenceGestureRecognizer>(
          () => EagerGestureRecognizer(),
        ),
      },
    ),
  ),
)

关键说明 #

• 视口设置：通过JS重置视口参数，确保页面按WebView容器尺寸渲染，禁止用户缩放
• 视频容器调整：通过JS定位视频元素，设置width:100%和height:100%让视频占满容器，objectFit控制视频的填充方式（cover会裁剪视频适配容器，contain会完整显示视频并留边）
• 圆形样式：如果设计要求圆形视频，添加borderRadius:50%和overflow:hidden实现

内容的提问来源于stack exchange，提问作者Farhana Naaz Ansari