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

Posted 2023-03-17

【中文标题】SwiftUI 内容在较小的 iPhone 屏幕上被截断

【英文标题】：SwiftUI content gets cut off on smaller iPhone screens

【发布时间】：2021-07-13 23:21:24

【问题描述】：

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

这是我的代码：

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

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("dealbutton").resizable()

好吧，刚试过，但它只是让dealbutton几乎占据了整个屏幕......我认为问题更多与ZStack的框架不限于边界屏幕。但我不确定如何解决这个问题。

您的“战争”和“交易”图像是否被裁剪为我们看到的文本大小，或者它们周围是否有空白的透明空间？换句话说，如果您使用.border 在它们周围添加边框，是否会显示它们正对着卡片和按钮？

@jnpdx 我尝试按照您的建议在图像周围添加边框，它会在卡片和按钮的正上方显示边框。

【参考方案1】：

您的问题与您在视图结构本身上显示的图像有关。图像以 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 的对象，那么 Stack 也将具有这些尺寸，除非另外指定 Modifier，例如 .frame(width...)，或者在您的情况下，甚至是调整大小的图像。

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

【讨论】：

我尝试将您在第一个代码 sn-p 中建议的内容应用于我的两个图像（徽标和交易按钮），但它似乎不起作用。屏幕布局看起来几乎完全相同，只是我可以将图像稍微放大或缩小。

也将其添加到您的卡片中。最后，移除 ZStack 并将.background(Image("background")) 修饰符设置为VStack

非常感谢您对堆栈如何获得其大小以及如何确保图像保持在范围内的深入解释。我认为你是对的，将Image("background") 用作 VStack 的背景图像而不是将图像放在 ZStack 中是最有意义的。我不接受您的回答的主要原因是因为不需要调整任何其他图像的大小；我所要做的就是修复背景图像，这正是另一个答案所建议的。但是您的回答仍然非常具有解释性和帮助性，这就是我给它一个赞成票的原因:)

【参考方案2】：

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