Flutter Image 图片显示样式 BoxFit

常见用法如下:
Image.asset("assets/images/ic_qrcode_preview_tiny.png",
          height: 30.0, width: 30.0,
          fit: BoxFit.cover);
网络图片fit属性也实用

BoxFit.fill:充满父容器。

BoxFit.contain:尽可能大,保持图片分辨率。

BoxFit.cover:充满容器,可能会被截断。

BoxFit.none:图片居中显示,不改变分大小,可能会被截断。

BoxFit.fitWidth:图片填满宽度,高度可能会被截断

BoxFit.fitHeight:图片填满高度,宽度可能会被截断

BoxFit.scaleDown:图片可以完整显示,但是可能不能填充满。


更多详解:
喜欢可以加Q群号:913934649,点赞,评论;

简书: https://www.jianshu.com/u/88db5f15770d

csdn:https://me.youkuaiyun.com/beyondforme

掘金:https://juejin.im/user/5e09a9e86fb9a016271294a7

Flutter 中实现图片圆角效果有多种方法,以下是几种常见且实用的方式: ### 使用 `ClipRRect` 组件实现圆角图片 `ClipRRect` 是一个非常直观的组件,它允许对子组件进行裁剪,以实现圆角效果。适用于网络图片或本地图片资源。 ```dart ClipRRect( borderRadius: BorderRadius.circular(50), // 设置圆角半径 child: Image.network( "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg", width: 100, height: 100, fit: BoxFit.cover, ), ) ``` ### 使用 `Container` 的 `decoration` 属性 通过 `Container` 的 `decoration` 属性,结合 `ShapeDecoration` 和 `DecorationImage`,可以实现圆角图片效果。这种方式适合对图片进行更复杂的样式设置。 ```dart Container( decoration: ShapeDecoration( image: DecorationImage( image: AssetImage("images/landscape1.jpeg"), fit: BoxFit.fitWidth, ), shape: RoundedRectangleBorder( borderRadius: BorderRadiusDirectional.circular(20), ), ), width: double.maxFinite, height: 300, child: Align( child: Padding( padding: const EdgeInsets.all(8.0), child: Text( "Container decoration实现圆角(radius = 20)", style: TextStyle(color: Colors.white), ), ), alignment: Alignment.bottomCenter, ), ) ``` ### 使用 `Card` 组件实现圆角图片 `Card` 组件也可以用来实现圆角图片,通过设置 `shape` 属性来定义圆角,并且通过 `clipBehavior` 来控制裁剪行为。 ```dart Card( shape: RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(10)), clipBehavior: Clip.antiAlias, child: Image.asset( "图片路径", width: double.maxFinite, ), ) ``` ### 使用 `ImageProvider` 实现圆角或圆形图片 除了上述组件外,还可以使用 `ImageProvider` 结合其他组件来实现圆角或圆形图片。`ImageProvider` 提供了灵活的方式来加载和处理图像资源,尤其适合需要自定义图像加载和显示逻辑的场景。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值