Flutter中如何设计带有特殊圆角的Container组件

一、黑色AppBar配置 #

直接通过AppBar组件参数实现黑色主题、带leading和双actions图标的配置：

AppBar(
  backgroundColor: Colors.black,
  leading: IconButton(
    icon: const Icon(Icons.arrow_back, color: Colors.white),
    onPressed: () {
      // 补充leading按钮的点击逻辑
    },
  ),
  actions: [
    IconButton(
      icon: const Icon(Icons.search, color: Colors.white),
      onPressed: () {},
    ),
    IconButton(
      icon: const Icon(Icons.more_vert, color: Colors.white),
      onPressed: () {},
    ),
  ],
)

二、实现右下角非标准圆角的Container #

根据圆角复杂程度，提供两种方案：

方案1：单独角自定义圆弧圆角 #

如果仅需右下角使用和其他角不同的圆弧半径，直接用BorderRadius.only快速实现：

Container(
  width: double.infinity,
  height: 300, // 按需设置高度
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      bottomRight: const Radius.circular(60), // 替换为你需要的非标准圆角半径
      // 其他角可按需设置，比如保持直角或其他半径
      topLeft: Radius.zero,
      topRight: Radius.zero,
      bottomLeft: Radius.zero,
    ),
  ),
  child: const Center(child: Text('自定义圆角容器')),
)

方案2：复杂非标准曲线圆角 #

如果是不规则的曲线圆角（非圆弧），通过ClipPath自定义裁剪路径实现：

首先创建自定义裁剪器：

class CustomBottomRightClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 按顺序绘制路径
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height - 40);
    // 用贝塞尔曲线绘制自定义圆角，可调整控制点坐标实现不同形状
    path.quadraticBezierTo(
      size.width - 40, size.height,
      size.width - 80, size.height,
    );
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

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

然后用ClipPath包裹Container：

ClipPath(
  clipper: CustomBottomRightClipper(),
  child: Container(
    width: double.infinity,
    height: 300,
    color: Colors.white,
    child: const Center(child: Text('复杂自定义圆角容器')),
  ),
)

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