Flutter Agora SDK如何实现视频通话中视频画面的圆角显示？

我之前做Flutter视频通话项目时也踩过这个坑！问题出在你用的SurfaceView是原生平台视图（Android侧的SurfaceView），它是绘制在Flutter Widget渲染层下方的，所以外层Container的borderRadius根本没法裁剪到它的显示内容——看起来容器是圆角，但底层的视频还是方的透出来了。

下面给你两个实用的解决方案：

方案一：用ClipRRect直接裁剪视频视图 #

这是最直接有效的方法，ClipRRect是Flutter专门用来裁剪圆角的Widget，它能直接作用于子Widget（包括平台视图）。你只需要把原来的视频视图用ClipRRect包裹起来，设置好对应的圆角半径就行。

修改你代码中的视频容器部分：

Container(
  width: 158,
  height: 220,
  decoration: const BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(20.0)),
    color: Color(0x66333333),
  ),
  child: ClipRRect(
    borderRadius: const BorderRadius.all(Radius.circular(20.0)),
    child: _localSwitchRender 
        ? rtc_remote_view.SurfaceView(
            uid: widget.remoteUid.first,
            renderMode: VideoRenderMode.FILL,
          ) 
        : rtc_local_view.SurfaceView(
            renderMode: VideoRenderMode.Hidden,
            zOrderMediaOverlay: true,
          ),
  ),
)

方案二：叠加遮罩层（备选方案） #

如果某些平台下ClipRRect效果不佳，你可以在视频视图上方叠加一个带圆角镂空的遮罩容器。原理是用一个和视频容器大小一致的容器，背景设为不透明，中间镂空出圆角区域，模拟视频的圆角效果：

Stack(
  children: [
    // 原视频视图
    _localSwitchRender 
        ? rtc_remote_view.SurfaceView(
            uid: widget.remoteUid.first,
            renderMode: VideoRenderMode.FILL,
          ) 
        : rtc_local_view.SurfaceView(
            renderMode: VideoRenderMode.Hidden,
            zOrderMediaOverlay: true,
          ),
    // 遮罩层
    Container(
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(20.0)),
        // 颜色要和遮罩外层的背景色一致
        color: Colors.black,
      ),
      foregroundDecoration: const BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(20.0)),
        border: Border.fromBorderSide(BorderSide(
          color: Colors.transparent,
          width: 20, // 宽度需和圆角半径匹配，确保镂空区域正确
        )),
      ),
    ),
  ],
)

额外提示 #

• 记得调整VideoRenderMode（比如用VideoRenderMode.FILL），让视频内容填满裁剪后的区域，避免出现黑边或者内容不全的情况。
• 如果你用的是iOS平台的视频视图，这个问题同样存在，ClipRRect也能有效解决。

内容的提问来源于stack exchange，提问作者Shaun Croft