Flutter网络图片圆角设置

2020-05-28  本文已影响0人  Janise001

Flitter中图片的路径获取有好几种,现仅讨论网络图片。
图片圆角通常使用的有两种,一种是四角圆弧图片,还有一种圆形图片,在Swift中直接使用layer中的cornerRadius设置圆角,在flutter中我目前接触的分为两种:
直接使用圆形控件设置网络图片为背景图片

CircleAvatar(
                radius: 圆弧数值,
                backgroundImage: NetworkImage(imageUrl),
              )
展示

可设置矩形图片宽高和圆角半径,这种方法也可以实现上面一种的展示,但是代码量较多,如需要代码高度复用时可使用

ClipRRect(
                borderRadius: BorderRadius.circular(圆角半径),
                child: FadeInImage.assetNetwork(
                  placeholder: '图片加载失败时展示的图片',
                  image: imageUrl,
                  width: 宽度,
                  height: 高度,
                  fit: BoxFit.cover,
                ),
              )
展示

建议使用第二种,将其封装后使用,因为有placeholder,属通用型。

上一篇 下一篇

猜你喜欢

热点阅读