如何在 flutter 上创建带有圆角的方形头像?

2024-04-07

我想创建一个类似于 CircleAvatar 的小部件,但不是圆形的。 这是圆形头像:

这就是我想要创建的头像:

我想知道是否有一个默认的小部件可以执行此操作,例如用于圆形头像的 CircleAvatar。


有很多方法可以实现它,但我只会使用一种。 包一个ClipRRect()周围的小部件child小部件(这可以是图像或任何其他相关小部件,例如我的示例中使用的容器)。然后,通过BorderRadius.circular(20.0) 价值borderRadiusClipRRect() 的属性。这是创建效果的活动代码行。 请检查下面我的示例:

ClipRRect(
  borderRadius: BorderRadius.circular(20.0),//or 15.0
  child: Container(
    height: 70.0,
    width: 70.0,
    color: Color(0xffFF0E58),
    child: Icon(Icons.volume_up, color: Colors.white, size: 50.0),
  ),
),

在这里查看结果 https://i.stack.imgur.com/2MSKe.jpg

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 flutter 上创建带有圆角的方形头像? 的相关文章

随机推荐