如何在Flutter中制作飞机旋钮形状的Container？

要实现你需要的顶部类似飞机旋钮的容器形状，最灵活的方式是使用Flutter的CustomClipper自定义裁剪路径，以下是具体实现代码：

1. 自定义裁剪器类 #

class KnobTopClipper extends CustomClipper<Path> {
  final double notchRadius;

  KnobTopClipper({required this.notchRadius});

  @override
  Path getClip(Size size) {
    final path = Path();
    // 从左上角下方位置开始绘制
    path.moveTo(0, notchRadius);
    // 左上角圆角
    path.arcToPoint(
      Offset(notchRadius, 0),
      radius: Radius.circular(notchRadius),
    );
    // 顶部中间的凹陷圆弧（逆时针绘制）
    path.arcToPoint(
      Offset(size.width - notchRadius, 0),
      radius: Radius.circular(notchRadius),
      clockwise: false,
    );
    // 右上角圆角
    path.arcToPoint(
      Offset(size.width, notchRadius),
      radius: Radius.circular(notchRadius),
    );
    // 绘制右侧边到底部
    path.lineTo(size.width, size.height);
    // 绘制底部边到左下角
    path.lineTo(0, size.height);
    // 闭合路径
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

2. 在容器中使用该裁剪器 #

Container(
  height: 200,
  width: 300,
  child: ClipPath(
    clipper: KnobTopClipper(notchRadius: 30),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.blueGrey,
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 8,
            offset: Offset(0, 2),
          )
        ],
      ),
      child: const Center(child: Text("飞机旋钮样式容器")),
    ),
  ),
)

调整说明 #

• 修改notchRadius参数可以控制顶部凹陷的深度和宽度，数值越大凹陷越明显
• 如果需要更贴合参考图的细节，可以调整圆弧的半径或者添加额外的路径控制点
• 也可以将ClipPath嵌套在Card组件内部，替换上述示例中的外层Container，实现带该形状的卡片

内容的提问来源于stack exchange，提问作者Musa 1o1