主页 / coding / 问题 / 79193645
Accepted
Guig
Asked: 2024-11-16 02:56:36 +0800 CST

当使用 `.position` 时，为什么当父框架变宽时我的 SwiftUI View 会向上移动？

  • 772

我正在尝试将视图定位在其父视图中的特定框架内：

struct TestView: View {
  var body: some View {
    ZStack {
      // some backgroung
      Rectangle().foregroundColor(Color.gray.opacity(0.4)).scaledToFill()

      // control view that doesn't use .position. It's always centered
      Rectangle()
        .foregroundColor(.green)
        .frame(width: 100, height: 100)

      // the view I'm trying to position
      Rectangle()
        .foregroundColor(.blue)
        .frame(width: 100, height: 100)
        .position(x: 60, y: 60)
    }
  }
}

我希望蓝色视图始终位于左上角，偏移 10px。

当我的框架是正方形时，此方法有效：

#Preview {
  TestView()
    .frame(width: 300, height: 300)
}

在此处输入图片描述

但如果我把框架扩大一点，视野就会向上移动：

#Preview {
  TestView()
    .frame(width: 350, height: 300)
}

在此处输入图片描述

我真的很困惑为什么我的视图没有停留在左上角的 10px 以内，以及为什么当框架更宽时它会向上移动（如果有的话我会期望 X 轴发生变化）。

1 个回答

  1. Best Answer

    这是因为scaledToFill()。当您将其应用于灰色 时Rectangle，矩形首先会调整为理想大小，即 10x10pt 正方形。然后缩放以填充可用空间。

    当窗口的宽度大于其高度时，灰色“方块”将缩放至超出窗口的高度。尝试.border(.red)向 中添加ZStack- 您只会看到两侧的红色边框，而不会看到顶部和底部边框。这意味着 的原点ZStack在窗口之外，因为ZStack会自行调整大小以适应其中的每个视图。

    下面是一个相当夸张的图表来说明正在发生的事情：

    在此处输入图片描述

    蓝色矩形是窗口，红色正方形是Rectangle，scaledToFill虚线勾勒出的蓝色Rectangle明显“向上移动”。

    类似地，当窗口的高度大于其宽度时，正方形将被缩放以超出窗口的宽度。.border(.red)现在将只显示顶部和底部边框，但不显示侧面的边框。

    .frame(idealWidth: 100, idealHeight: 50)您可以在之前设置其他理想尺寸，例如scaledToFill。现在您可以看到它正在缩放一个 100x50pt 的矩形，并且只有当窗口框架的 W:H 比为 2:1 时，它才能“正常工作”。

    scaledToFill()如果您只是想要一个覆盖整个窗口的矩形，那么您根本不需要。s Rectangle（实际上是所有内置的Shapes）将尝试占用尽可能多的可用空间。

    • 3

相关问题