美文网首页
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网络图片圆角设置

    Flitter中图片的路径获取有好几种,现仅讨论网络图片。图片圆角通常使用的有两种,一种是四角圆弧图片,还有一种圆...

  • Image

    直接圆角图片 设置圆角图片度数 设置圆角图片带灰色圆角边框 设置圆角图片带灰色圆角边框带阴影

  • flutter设置圆角图片

    需求: 图片加圆角 在网上看了许多的文章,都是使用如下代码 ,然而无效.... 2.使用装饰器可以实现圆角效果,但...

  • Glide设置RoundedCorners & CenterCr

    问题 需要对网络图片进行圆角裁剪和居中裁剪 只设置圆角,如下: 只设置居中剪裁 两者同时设置,则最后设置的才会生效...

  • iOS 图片添加阴影效果

    Code 圆形图片设置阴影(补充) < 设置图片圆角阴影

  • Flutter知识点总结一

    一、设置图片的圆角 由于图片不能直接设置圆角,所以我们需要采用其它方式来设置: 1、使用ClipRRect进行设置...

  • flutter常用控件用法收藏

    flutter圆角效果实现 outlineButton 头部折叠动画效果 flutter按钮shape设置 Flu...

  • Flutter圆角设置组件

    flutter能设置圆角的组件:ClipRRect、ClipOval、CircleAvatar、BoxDecora...

  • ReactNative自定义Avatar&Badge组件

    功能 显示本地图片以及网络图片 使用名字的字母作为图像 默认placeholder 显示border 设置圆角大小...

  • 实现圆角图片

    //设置圆角图片或者圆形图片 privateBitmapSettingBitmap(Bitmap bitmap) ...

网友评论

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

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