SwiftUi - 填充宽屏

Question

TL;DR：

我无法在宽屏 (13:6) 手机上将图像精确地绘制到全屏上。如果我观察安全区域，则错误是（可以预见的）欠扫描。使用.edgesIgnoringSafeArea()（出乎意料地）在另一个方向上走得太远了。

更新

Apple DTS 建议这是一个错误，向我退还了一次支持事件，并邀请我提交错误报告。它正在https://feedbackassistant.apple.com/feedback/8192204 进行中

告诫讲师

我对@9​​87654337@ 的假设可能是错误的。我在最后解决这个问题。

代码

我可以把它放在这里，它甚至不会减慢你的速度

struct ContentView: View {
    var body: some View {
        Image("testImage").resizable().scaledToFill()
//        .edgesIgnoringSafeArea(.all)
    }
}

测试图片

测试图像是横向矩形，比例为 13:6，与宽手机类似。 （例如 iPhone X 的 812:375 比例。）灰色边缘不是图像的一部分。

它标记了其子帧，对应于窄（旧）电话 (16:9) 和键盘 (4:3)。

运行时结果

Xcode 项目设置明确仅适用于键盘和手机。

对于窄手机和所有平板电脑，上面的代码观察安全区域，按照我的预期呈现测试图像：

但在宽屏手机上，我无法让红色矩形与屏幕边缘重合。

宽屏电话

没有调用.edgesIgnoringSafeArea()，即我们正在观察安全区域。自然地，我们的图像被映射到全屏的一个子集。

通过调用.edgesIgnoringSafeArea()。我预计这会完全填满屏幕，但它会过度扫描：

这是 Xcode 视图层次结构调试器对前一个的看法：图像被映射到比全屏更大 的矩形。为什么？

事件顺序

如果我颠倒修饰符的顺序，并调用.edgesIgnoringSafeArea() 之前 .scaledToFill()，我会得到纵横比失真，.scaledToFill() 应该防止这种情况。 （请参阅屏幕截图中的圆圈变成椭圆。）解释这些操作是如何组成的，以及它们为什么不通勤，可能对回答我的主要问题大有帮助。

解决方法

我认为上述方法应该可行，但我不明白为什么不可行。 在宽屏手机上的作用 是消除.scaledToFill 修饰符。然后你得到这个。但它之所以有效，是因为测试图像已经与显示器的宽高比完全相同——这不是一个非常通用的解决方案。

按比例填充

在风景图像和显示的受限域中，我希望对 13:6 测试图像进​​行缩放填充的操作相当于（具有以下语义）：

1. 在目标（容器）矩形中居中测试图像，大小以完全适合容器。

• 我一直期待忽略安全区域意味着“目的地”将是全屏，但这可能是我犯错的地方。

1. 扩大测试图像，保持比例和中心，直到一对边与容器的边重合。

• 对于较窄的显示器，左右边缘首先会合，顶部和底部将位于目标矩形内。

1. 但现在不要停下来。这将是缩放以适应，或信箱。
2. 展开直到您的顶部和底部与容器的顶部和底部重合。

• 对于较窄的显示器，这意味着两边的内容都会被裁剪
• 对于 13:6 显示，所有四个图像边缘将同时与显示边缘重合。

Answer 1

我不知道为什么 .edgesIgnoringSafeArea() 不能正常工作，但这里有一个可以帮助您的解决方法。

    GeometryReader { geo in
       Image("testImage")
          .resizable()
          .scaledToFill()
          .frame(width: geo.size.width, height: geo.size.height)
    }
    .edgesIgnoringSafeArea(.all)

更新： 这是不使用 GeometryReader 的另一种方法：

Image("testImage")
    .resizable()
    .scaledToFill()
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    .edgesIgnoringSafeArea(.all)