美文网首页
Flutter网络图片圆角设置

Flutter网络图片圆角设置

作者: Janise001 | 来源:发表于2020-05-28 15:58 被阅读0次

    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,属通用型。

    相关文章

      网友评论

          本文标题:Flutter网络图片圆角设置

          本文链接:https://www.haomeiwen.com/subject/fvhaahtx.html