美文网首页
flutter 设置圆角图片三种方式

flutter 设置圆角图片三种方式

作者: yancy_小璃 | 来源:发表于2019-08-07 11:36 被阅读0次
123.png

1.ClipRRect可设置添加默认图片

ClipRRect(

    borderRadius: BorderRadius.circular(10),

    child: FadeInImage.assetNetwork(

      placeholder: 'assets/images/pic_mes_blank.png',

      image:

          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565157302904&di=0b4e458fd1a51902c2fdad733da23c3a&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',

      width: double.infinity,

      fit: BoxFit.cover,

      height: ScreenUtil().setWidth(150.0),

    )),

2.BoxDecoration


Container(

                  width: double.infinity,

                  height: ScreenUtil().setWidth(150.0),

                  decoration: BoxDecoration(

                      borderRadius: BorderRadius.circular(10),

                      image: DecorationImage(

                        image: NetworkImage(

                            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565157302904&di=0b4e458fd1a51902c2fdad733da23c3a&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg'),

                        fit: BoxFit.cover,

                      ))

                  ),

3.ShapeDecoration


Container(

                  width: double.infinity,

                  height: ScreenUtil().setWidth(150.0),



                  decoration: ShapeDecoration(

                      shape: BeveledRectangleBorder(

                      borderRadius: BorderRadius.circular(10)

                      ),

                      image: DecorationImage(

                        image: NetworkImage(

                          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565157302904&di=0b4e458fd1a51902c2fdad733da23c3a&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4610b912c8fcc3cef70d70409845d688d53f20f7.jpg',),

                        fit: BoxFit.cover,

                      )),

                  ),

相关文章

  • flutter 设置圆角图片三种方式

    1.ClipRRect可设置添加默认图片 2.BoxDecoration 3.ShapeDecoration

  • Image

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

  • Flutter知识点总结一

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

  • flutter设置圆角图片

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

  • 优化图片圆角CornerRadius设置

    a) 通常设置图片圆角有两种方式 1.代码设置 2.xib/storyboard设置 b) 优化方式 (采用绘图)...

  • iOS-UIImageView圆角设置

    iOS开发中图片圆角设置是最常见的需求,圆角符合人类视觉安全体验,让人感觉舒适,设置圆角也是非常简单,有五种方式来...

  • iOS 设置图片圆角的三种方式

    方式一:通过 layer 设置圆角最简单的一种,但是影响性能,一般在正常的开发中使用很少 方式二:使用贝塞尔曲线U...

  • iOS 图片添加阴影效果

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

  • Flutter网络图片圆角设置

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

  • iOS中设置圆角的方式

    设置圆角的三种方式 1.设置视图的layer.cornerRadius属性 内存消耗16.9对uiview或uii...

网友评论

      本文标题:flutter 设置圆角图片三种方式

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