flutter 圆角设置

最新推荐文章于 2025-05-26 17:57:48 发布

wukuy

最新推荐文章于 2025-05-26 17:57:48 发布

阅读量1.9k

点赞数

分类专栏： flutter

flutter 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用Flutter的ClipRRect, BoxDecoration与ClipOval等组件创建圆角和圆形头像，通过不同参数设置，如borderRadius和BoxShape，实现多样化头像展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

① ClipOval

new ClipOval(
    child: new Image.asset(Utils.getImgPath('ali_connors')),
  )

② CircleAvatar

new CircleAvatar(
    radius: 36.0,
    backgroundImage: AssetImage(
      Utils.getImgPath('ali_connors'),
    ),
  )

③ BoxDecoration BoxShape.circle

 new Container(
    width: 72.0,
    height: 72.0,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
        image: AssetImage(
          Utils.getImgPath('ali_connors'),
        ),
      ),
    ),
  )

圆角头像
① ClipRRect

new ClipRRect(
    borderRadius: BorderRadius.circular(6.0),
    child: new Image.asset(Utils.getImgPath('ali_connors')),
  )

② BoxDecoration BoxShape.rectangle

new Container(
    width: 88.0,
    height: 88.0,
    decoration: BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.circular(6.0),
      image: DecorationImage(
        image: AssetImage(
          Utils.getImgPath('ali_connors'),
        ),
      ),
    ),

参考: https://segmentfault.com/a/1190000015149101?utm_source=index-hottest