Flutter开发:设置image圆角的步骤

Flutter开发:设置image圆角的步骤

技术杂谈小彩虹2021-07-11 0:04:1570A+A-

这是我参与更文挑战的第12天,活动详情查看:更文挑战

在Flutter开发过程中,对于项目需求的一些基本的实现效果是层出不穷,各种基础性的设置以及效果都需要开发者很好的掌握和使用,这样在开发过程中才能快速的开发,提高开发效率和进度。Flutter开发过程中,给image组件设置圆角的效果,稍不留神就踩了坑,而且会浪费没必要的时间,耽误开发进度。那么本文就来分享一个在Flutter开发过程中比较常用的实现效果:给image组件添加圆角。

前言

首先来对比分享一下网上的无良教程关于给image组件设置圆角的方法,这种写法完全没有效果的,把它拿出来举例子是为了起警示作用:

    Center(
        child: Container(
          decoration: BoxDecoration(
            borderRadius:BorderRadius.circular(10)
          ),
          child: Image.network(
            imagePath,
            width: 150,
            height: 150,
            fit: BoxFit.cover,
            ),
        ),
      ),

读者不要被上面的错误设置方法耽误了时间,切记!

设置image圆角的方法

1、首先来分享一种单纯的以基于修饰器来实现image添加圆角的方式,但是该设置方式有一个缺点就是没有占位图,也不算是缺点吧,是要根据开发实际需求来决定选择哪种设置圆角的方式的,具体代码如下所示:

Center(
        child: Container(
          width: 150,
          height: 150,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              image: DecorationImage(
                image: NetworkImage(imagePath),
                fit: BoxFit.cover,
              )
              ),
        ),
      )

2、再来分享一种包含占位图的圆角image的设置方法,这样就有更完善的设置方式了,更加符合项目开发需求,还是根据实际需求情况来做选择设置,具体的代码如下所示:

Scaffold(
        appBar: AppBar(
          title: " ",
        ),
        body: Center(
            child: Container(
          width: 150,
          height: 150,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: FadeInImage.assetNetwork(
              placeholder: "images/ic_login.png",
              image: imagePath,
              fit: BoxFit.cover,
            ),
          ),
        )));

示例的效果图如下所示:

1.jpeg

根据上述对于给image设置圆角的知识点,在flutter开发过程中,不管是什么知识点,只要稍有不慎就会踩坑,所以开发需谨慎,根据实际情况来实现项目需求。

本次分享就到此为止,以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们