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

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

上一个用到的一个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中

Flutter 报错centerSlice was used with a BoxFit that does not guarantee that the image is fully visible_第1张图片

可以看到几个关键字: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里。如下图:

Flutter 报错centerSlice was used with a BoxFit that does not guarantee that the image is fully visible_第2张图片

可以看到130行打的断点没有走,走到176行断点,说明运行正常,再往下走,断点回到decoration_image.dart里,Flutter 报错centerSlice was used with a BoxFit that does not guarantee that the image is fully visible_第3张图片

断言判断条件为true。

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

最终效果图

Flutter 报错centerSlice was used with a BoxFit that does not guarantee that the image is fully visible_第4张图片

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
  );

走断点

Flutter 报错centerSlice was used with a BoxFit that does not guarantee that the image is fully visible_第5张图片

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

Flutter 报错centerSlice was used with a BoxFit that does not guarantee that the image is fully visible_第6张图片可以看到129、130行,返回的FittedSizes是(source:(0,0),destination:(0,0))这就导致了decoration_image.dart里的399行的sourceSize也是(0,0),也就导致assert为false

Flutter 报错centerSlice was used with a BoxFit that does not guarantee that the image is fully visible_第7张图片

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

Flutter 报错centerSlice was used with a BoxFit that does not guarantee that the image is fully visible_第8张图片

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

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

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

你可能感兴趣的:(Flutter)