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

最新推荐文章于 2024-05-12 22:14:13 发布

原创最新推荐文章于 2024-05-12 22:14:13 发布 · 6.7k 阅读

1 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

14 篇文章

订阅专栏

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

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

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