SwiftUI 内容在较小的 iPhone 屏幕上被截断

Question

我是 SwiftUI 的新手，所以我正在学习教程以熟悉它。但是，我的应用程序的内容在较小的屏幕（垂直和水平）上被截断了。我怎样才能防止这种情况发生？

这是我的代码：

编辑： 我在我的图片周围添加了边框，并按照您的评论和答案中的建议调整了图片的大小，但正如您所看到的，图片似乎没有space 比他们应该的多。

struct ContentView: View {
  var body: some View {
    ZStack {
      Image("background").ignoresSafeArea(.all)
      VStack {
        Spacer()
        Image("logo")
          .resizable()
          .aspectRatio(contentMode: .fit)
          .frame(width: 100)
          .border(Color.black)
        Spacer()
        HStack {
          Spacer()
          Image("card3").border(Color.black, width: 3)
          Spacer()
          Image("card4").border(Color.black, width: 3)
          Spacer()
        }
        Spacer()
        Image("dealbutton")
          .resizable()
          .aspectRatio(contentMode: .fit)
          .frame(width: 100)
          .border(Color.black)
        Spacer()
        HStack {
          Spacer()
          VStack {
            Text("Player").padding(.bottom, 10)
            Text("0").font(.largeTitle)
          }
          Spacer()
          VStack {
            Text("CPU").padding(.bottom, 10)
            Text("0").font(.largeTitle)
          }
          Spacer()
        }
        .foregroundColor(.white)
        Spacer()
      }
    }
  }
}

下面是预览在 iPod touch 上的样子：

Answer 1

您的问题与您在视图结构本身上显示的图像有关。图像以 100% 的大小呈现，无论其约束如何。这将导致其他视图被推开。解决方案是在视图本身上设置一个在可用 space 范围内匹配的设置大小。此外，您正在调整 ZStack 的大小，这也会调整 ZStack 中内容的大小。例如。

Image("logo")
    .resizeable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 100)

像这样处理您的图像将确保在渲染时将其设置为合适的大小。然后您可以让剩余的视图以预期的方式就位。如果您需要按屏幕尺寸的 % 进行缩放，您可以使用 GeometryReader 来针对不同的屏幕尺寸缩放视图。

GeometryReader { reader in 
    Image("logo")
        .resizeable()
        .aspectRatio(contentMode: .fit)
        .frame(width: reader.size.width * 0.2)
}

最后，删除你的 ZStack 并像这样设置它。

VStack {
    //Your Content
}.background(
      //Make sure to set the edgesIgnoring.. on this NOT the VStack
      Image("background").edgesIgnoringSafeArea(.all)
  )

使用堆栈时的提示

堆栈，无论是 VStack、HStack 还是 ZStack，都始终将它们的框架设置为保存在其中的内容。如果您有一个宽度为 100 且高度为 10,000 的对象，那么 Stack 也将具有这些尺寸，除非另外指定 Modifier 例如 .frame(width...) 或者甚至在您的情况下是 Image已调整大小。

假设您的同一个堆栈然后添加了一个宽度：10，高度：10 的视图，它仍然会保持与其中最大内容相同的大小。这当然与 HStack 和 VStacks 的处理方式不同，因为它们实际上是在 2D 平面上堆叠东西，而 ZStack 在 3D 平面上工作。

Answer 2

尝试使 Image("background") 可调整大小或将其设置为 ZStack 的 .background(:)。目前背景图像无法调整大小并且比屏幕大，因此它以其原始大小 显示并且 将其父 ZStack 拉伸到屏幕边界之外。由于您的内容在同一个 ZStack 中，它也超出了屏幕的范围

SwiftUI 内容在较小的 iPhone 屏幕上被截断

SwiftUI content gets cut off on smaller iPhone screens

swift

user-interface

layout

swiftui

swiftui-layout

使用堆栈时的提示