SwiftUI 内容在较小的 iPhone 屏幕上被切断 使用堆栈时的提示

如何解决SwiftUI 内容在较小的 iPhone 屏幕上被切断 使用堆栈时的提示

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

这是我的代码：

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

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 上的预览效果：

解决方法

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

,

您的问题与您在视图结构本身上显示的图像有关。图像以 100% 的大小呈现，而不管它们的限制。这将导致其他视图被推开。解决方案是在视图本身上设置一个与可用空间范围相匹配的大小。此外，您正在调整 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 的对象，那么堆栈也将具有这些尺寸，除非另外使用 Modifier（例如 .frame(width...)）指定，或者甚至在您的情况下，图像已调整大小。

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