如何在颤动中显示.9.png格式的图片？答案

【问题标题】：How to display .9.png format of a picture in flutter?如何在颤动中显示.9.png格式的图片？
【发布时间】：2018-01-02 06:11:03
【问题描述】：

这是我的代码：

new Image.asset('images/launcher/border_highlight.9.png', fit: BoxFit.fill)));

当我改变图片的宽高时，显示效果很差，但在原生android中显示正常。

flutter 不支持 .9 的图片吗？有没有其他方法可以达到同样的效果？

【问题讨论】：

标签： android dart flutter

【解决方案1】：

Flutter 支持类似的概念，但不直接支持 9-patch 文件，因此它实际上适用于任何图像。

例如，我这里有一张 50x50 的图片，button.png：

当在 Photoshop 中放大到 1200% 时，我们可以看到我们想要定义为“中心”的区域，以便对其进行拉伸。我在每条边缘 15px 处绘制了一些蓝色引导线：

要在 Flutter 中使用它，我们可以使用 centerSlice 属性并传入一个 Rect，它基本上定义了我在 Photoshop 中绘制的矩形，即宽度和高度都从 15px 到 35px：

        Image.asset(
          "images/button.png",
          height: 100,
          width: 350,
          centerSlice: Rect.fromLTRB(15, 15, 35, 35),
        )

结果如下（对比不传入centerSlice，而是传入fit: BoxFit.fill）：

【讨论】：

【解决方案2】：

如果您知道九块图像中间部分的坐标，则可以在图像小部件上设置centerSlice 属性。我们目前不会自动从图像中读取这些坐标。如果有任何关于 Android 如何做到这一点的文档，我们可以考虑这样做，请不要犹豫，提交功能请求。

【讨论】：

看起来坐标只是边缘上的黑线：radleymarx.com/ux/simple-guide-to-9-patch

【解决方案3】：

目前 Flutter 支持

JPEG、PNG、GIF、动画 GIF、WebP、动画 WebP、BMP 和 WBMP

另见https://github.com/flutter/engine/blob/e7a294770012800fc8a43494fe646659b496ea49/lib/ui/painting.dart#L21

【讨论】：

感谢您的回答。 Android九补丁（.9.png）是一种特殊的png格式，见http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch。 Flutter 中的替代方式是什么？
抱歉，不知道。
我猜你可以手动分割图像并为它们使用不同的缩放参数，但这当然不如九个补丁好。