如何在Flutter中自定义图片形状？实现指定底部圆角边框效果

我希望为图片实现如图所示的底部边框效果，目前尝试用ClipRRect组件实现，代码如下：

ClipRRect(
  borderRadius: const BorderRadius.only(
      bottomLeft: Radius.circular(50),
      bottomRight: Radius.circular(50)),
  // Image border
  child: SizedBox.fromSize(
    size: Size.fromRadius(48), // Image radius
    child: Image.network(data['displayPic'],
        fit: BoxFit.cover),
  ),
)),

解决方案 #

ClipRRect的作用是裁剪图片圆角，没法直接添加边框。要实现图中的底部边框效果，推荐两种简单的实现方式：

方式一：Container包裹加边框装饰 #

把裁剪后的图片放进Container里，通过decoration设置底部边框，同时让边框圆角和图片裁剪圆角匹配：

Container(
  decoration: BoxDecoration(
    borderRadius: const BorderRadius.only(
      bottomLeft: Radius.circular(50),
      bottomRight: Radius.circular(50),
    ),
    border: const Border(
      bottom: BorderSide(
        color: Colors.blue, // 自定义边框颜色
        width: 4, // 自定义边框宽度
      ),
    ),
  ),
  child: ClipRRect(
    borderRadius: const BorderRadius.only(
      bottomLeft: Radius.circular(50),
      bottomRight: Radius.circular(50),
    ),
    child: SizedBox.fromSize(
      size: Size.fromRadius(48),
      child: Image.network(
        data['displayPic'],
        fit: BoxFit.cover,
      ),
    ),
  ),
)

方式二：Stack叠加边框层 #

用Stack在图片底部放一个带圆角的容器作为边框，能更灵活控制边框的位置和样式：

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    ClipRRect(
      borderRadius: const BorderRadius.only(
        bottomLeft: Radius.circular(50),
        bottomRight: Radius.circular(50),
      ),
      child: SizedBox.fromSize(
        size: Size.fromRadius(48),
        child: Image.network(
          data['displayPic'],
          fit: BoxFit.cover,
        ),
      ),
    ),
    // 底部边框
    Container(
      height: 4, // 边框高度
      width: 96, // 和图片直径一致（48*2）
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(50),
          bottomRight: Radius.circular(50),
        ),
        color: Colors.blue, // 自定义边框颜色
      ),
    ),
  ],
)

你可以根据需求调整颜色、宽度和圆角数值，两种方式都能实现图中的效果。

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