Flutter 报错centerSlice was used with a BoxFit that does not guarantee that the image is fully visible

本文探讨了在图片处理过程中,特别是在使用特定尺寸进行图片拉伸时遇到的错误情况。通过对比正常与错误情况下的代码实例,详细分析了图片尺寸、切片边界与输出尺寸之间的关系,以及这些因素如何共同作用于图片的最终呈现效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们在做图片拉伸的时候会出现这个报错,查了很多资料都解释不多,这次用代码跟踪并整理一下什么情况下会报错

上一个用到的一个192x78的png,记住这个尺寸!!!

1.正常情况

  Image image = new Image.asset(
    'asset/images/icon_bubble1.png',
    width: 183,
    height: 79,
    centerSlice: Rect.fromLTWH(10, 1, 10, 5),
    //centerSlice: Rect.fromLTWH(0, 0, 0, 0),
  );

  return new Scaffold(
    appBar: new AppBar(title: new Text("Image Test"),
      centerTitle: true,),
    body:
    image
  );

注意这里183和79俩尺寸

跑起来打断点,走进decoration_image.dart中

可以看到几个关键字:outputSize、inputSize、sliceBorder、fittedSizes.source、sourceSize,记住这几个关键字

这里解释一下,outputSize的初始值是代码中的(183,79),inputSize的初始值是png的像素大小,sliceBorder是在390、391行根据inputSize和咱们输入的centerSlice来计算得出的,然后outputSize和inputSize又在393、394行根据sliceBorder改变了,最终得到图中显示的size。再往下走,会进入FittedSizes,点击进入applyBoxFit这个方法,跳到box_fit.dart里。如下图:

可以看到130行打的断点没有走,走到176行断点,说明运行正常,再往下走,断点回到decoration_image.dart里,

断言判断条件为true。

这里说明一下scale默认为1.0,所以这里的399行得出的sourceSize其实就是inputSize,而402行outputSize又把sliceBorder加回去了,又变成初始的outputSize值(183,79)了。destinationSize在这里暂时没有影响,所以不管了。

最终效果图

2.错误情况

把上边代码的width:183改成182

Image image = new Image.asset(
    'asset/images/icon_bubble1.png',
    width: 182,
    height: 79,
    centerSlice: Rect.fromLTWH(10, 1, 10, 5),
    //centerSlice: Rect.fromLTWH(0, 0, 0, 0),
  );

  return new Scaffold(
    appBar: new AppBar(title: new Text("Image Test"),
      centerTitle: true,),
    body:
    image
  );

走断点

注意看385行,outputSize的width是0.0,接着往下走断点,跳到box_fit.dart里

可以看到129、130行,返回的FittedSizes是(source:(0,0),destination:(0,0))这就导致了decoration_image.dart里的399行的sourceSize也是(0,0),也就导致assert为false

可以看到是因为sliceBorder的宽度与outputSize初始的宽度相等,在393行计算新的outputSize的宽度相减<=0导致的,这里182与183正好是个临界值

如上图所示,左斜线部分是centerSlice圈出来的范围,右斜线部分是sliceBorder的size,整个虚线是png,也就是初始inputSize的范围,实线是设置的png大小,也就是outputSize。当outputSize小于等于sliceBorder的时候就会报错!!

编辑------------------------------------------------------------------------------------------------------------------------------------------------------------------

简单粗暴的计算判断:保证图片真实大小(inputsize) 减去 centersize 的大小之后,小于  设定的图片大小(outputsize)

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值