如何使用Flutter的ClipPath实现列表项左侧弧形选中效果

问题分析 #

你需要的弧形效果本质是选中项的白色区域右侧带有大弧度的外凸弧形，之前使用Radius.elliptical时传入了屏幕尺寸作为参数，导致弧度过度平缓，无法匹配目标效果。

正确实现方案 #

方式一：调整BorderRadius参数（简单快速） #

基于组件自身高度设置圆角半径，让弧度贴合组件尺寸：

Container(
  color: AppTheme.c.primary,
  width: 200,
  height: 60,
  child: Row(
    children: [
      Container(
        width: 180, // 调整宽度让弧形覆盖合适区域
        height: 60,
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(30), // 用组件高度的一半作为半径，弧度更自然
            bottomRight: Radius.circular(30),
          ),
        ),
        // 这里可添加ListTile的核心内容（图标、文本等）
        padding: const EdgeInsets.only(left: 16),
        alignment: Alignment.centerLeft,
        child: const Text("选项内容"),
      ),
    ],
  ),
)

方式二：自定义ClipPath（精准控制弧度） #

如果需要完全匹配目标效果的弧形，可通过自定义裁剪路径实现：

class ArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(0, 0);
    // 绘制右上角弧形
    path.quadraticBezierTo(
      size.width, 
      size.height / 2, 
      size.width, 
      0,
    );
    path.lineTo(size.width, size.height);
    // 绘制右下角弧形
    path.quadraticBezierTo(
      size.width, 
      size.height / 2, 
      0, 
      size.height,
    );
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

// 使用示例
Container(
  color: AppTheme.c.primary,
  width: 200,
  height: 60,
  child: ClipPath(
    clipper: ArcClipper(),
    child: Container(
      color: Colors.white,
      padding: const EdgeInsets.only(left: 16),
      alignment: Alignment.centerLeft,
      child: const Text("选项内容"),
    ),
  ),
)

补充说明 #

• 选中状态切换：通过onTap事件切换白色容器的背景色即可（未选中时用主题底色，选中时用白色）
• 兼容ListTile功能：可将白色容器替换为ListTile组件，再用ClipPath或BorderRadius包裹实现弧形效果

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