1

我是 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 上的预览效果： iPod 触摸预览

4

2 回答 2

2

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

于 2021-04-19T20:12:27.630 回答
1

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

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

像这样处理您的图像将确保在渲染时将其设置为适当的大小。然后，您可以让剩余的视图以预期的方式放置到位。如果您需要将其缩放为屏幕尺寸的百分比，您可以使用 aGeometryReader来缩放不同屏幕尺寸的视图。

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...)，在您的情况下，甚至是调整大小的图像。

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

于 2021-04-19T19:12:13.093 回答