Flutter常用组件图片组件

图片组件

图片组件是显示图像的组件,Image 组件有很多构造函数,这里我们只给大家讲两个
Image.asset, 本地图片(加载工程内的图片)
Image.network 远程图片(加载网络图片)

名称类型&说明
alignmentAlignment & 图片的对齐方式
color 和colorBlendMode设置图片的背景颜色,通常和 colorBlendMode 配合一起使用,这样可以是图片颜色和背景色混。上面的图片就是进行了颜色的混合,绿色背景和图片红色的混合
fitBoxFit & fit 属性用来控制图片的拉伸和挤压,这都是根据父容器来的。BoxFit.fill:全图显示,图片会被拉伸,并充满父容。BoxFit.contain:全图显示,显示原比例,可能会有空隙。BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。一般常用BoxFit.cover

这是主要用的,当然width和height也不说了,就是一个double的值(double还是float来忘了,反正是个小数值)

我们实现了如下效果:

在这里插入图片描述

代码为:

Container(
        child: Center(
          child: Container(
            child: Image.network(
              "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
              alignment: Alignment.topLeft,
              color: Colors.red,
              colorBlendMode: BlendMode.colorDodge,
              fit: BoxFit.cover,
            ),
            width: 300.0,
            height: 400.0,
            decoration: BoxDecoration(color: Colors.yellow),
          ),
        ),
      )

其余的效果大家就自己去试试吧。不过要加载本地图片的话,要配置好文件,一定要get一下,不然可能会出现一些问题。

Flutter 实现圆角以及实现圆形图片

我们的代码为:

Center(
        child: Container(
          width: 300.0,
          height: 300.0,
          decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(150),  //这里也可以用shape来实现
            image: DecorationImage(
                image: new
                NetworkImage('https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg'),
                    fit: BoxFit.cover
                )
            ),
          ),
        );

在这里插入图片描述
当然实现圆角图片还有其余的方式,比如:CircleAvatar,ClipOval等;不过后者要实现圆形图片,要设置width和height相等,不然就是一个椭圆呈现在面前。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值