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中

可以看到几个关键字: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)

### 回答1: 很抱歉,我不太清楚Flutter报错Error waiting for a debug connection: The log reader stopped unexpectedly这个问题,但我建议您可以搜索Flutter官方文档,了解相关解决方案,以解决该问题。 ### 回答2: 出现"Flutter报错Error waiting for a debug connection: The log reader stopped unexpectedly"这个错误是因为Flutter出现了一些问题,导致无法建立与调试连接的通信。可能出现这个问题的原因有以下几种情况: 1. 设备连接问题:可能是设备没有正确连接到电脑,或者连接的USB线出现了问题。可以尝试重新连接设备并重启Flutter应用程序。 2. 调试环境问题:可能是Flutter SDK或开发环境出现了一些错误或配置问题。可以尝试重新安装Flutter SDK并更新开发环境到最新版本。 3. 插件冲突问题:可能是已安装的某些插件与Flutter框架不兼容,导致了错误的发生。可以尝试暂时禁用插件并重新运行应用程序,查看是否能够解决问题。 4. Flutter版本问题:可能是使用的Flutter版本与项目依赖的Flutter版本不一致。可以尝试更新或降级Flutter版本,以解决依赖问题。 总之,出现这个错误时,我们可以检查和排除以上几个可能的原因,寻找合适的解决方法。如果以上方法仍然无法解决问题,可以参考Flutter开发者社区的讨论或向官方支持渠道寻求帮助,以获取更详细的帮助和解决方案。 ### 回答3: Flutter报错Error waiting for a debug connection: The log reader stopped unexpectedly,这是由于Flutter的调试连接遇到了问题并出现错误。一般来说,这个问题可能是由于以下几个原因导致的: 首先,可能是由于设备或模拟器的连接问题引起的。您可以尝试重新启动设备或模拟器,然后重新运行Flutter应用程序,看看问题是否解决。 其次,可能是由于Flutter SDK或Dart SDK的版本不匹配导致的。您可以尝试更新Flutter SDK和Dart SDK到最新版本,然后重新构建和运行应用程序,看看问题是否解决。 另外,可能是由于您的应用程序代码中存在bug或错误导致的。您可以仔细检查您的代码,尤其是与调试连接相关的部分,看看是否有任何错误或问题,并进行相应的修复。 最后,如果以上方法都没有解决问题,您可以尝试清除Flutter项目的缓存。您可以使用命令"flutter clean"清除项目的缓存,然后重新构建和运行应用程序,看看问题是否解决。 总结来说,Flutter报错Error waiting for a debug connection: The log reader stopped unexpectedly可能是由设备连接问题、SDK版本不匹配、应用程序代码错误或缓存问题等原因引起的。您可以根据具体情况尝试不同的解决方法来解决这个问题。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值