SwiftUI在iPhone 7和iPhone 14上的填充

Question

我正在构建一个相对简单的闪存卡应用程序使用SwiftUI。我有一个垂直堆栈，里面有zStacks和hStacks。我认为我的填充应用是正确的，但困扰我的一个奇怪之处是，当我在模拟器的iPhone 14上运行这个应用程序时，它看起来应该是：

​

​

但是，当我在自己的设备(即iPhone 7 )上运行它时，填充并不应用于视图的尾部和前缘(左和右)，而是垂直地应用于填充：

​

​

填充在这里应用于代码中：

  var body: some View {
ZStack {
  Color("MyGray")
    .edgesIgnoringSafeArea(.all)
  VStack {
    
    ZStack {
      topCard
      bottomCard
    }.padding(10)
    
    VStack {
      ZStack {
        RoundedRectangle(cornerRadius: 20.0)
        Picker(selection: $selectedTopic, label: Text(topicPickerLabel)) {
        }
      }
      
      ZStack {
        RoundedRectangle(cornerRadius: 20.0)
        Picker(selection: $shownSelected, label: Text(shownPickerLabel)) {
          }
      }
      
      ZStack {
        RoundedRectangle(cornerRadius: 20.0)
        Picker(selection: $guessSelected, label: Text(guessPickerLabel)) {
          }
      }
    }.padding(10)
    
    HStack {
      ZStack {
        RoundedRectangle(cornerRadius: 20.0)
        Button("FLIP               ") {
        }
      }
      Spacer()
      ZStack {
        RoundedRectangle(cornerRadius: 20.0)
        Button("NEXT               ") {
        }
      }
    }.padding(10)
    
  }
  .padding()
}

如果有人对这件事有什么看法，我将不胜感激。最有可能的情况是我做错了什么，毕竟我是个新手！但也许这仅仅是iOS 15.6在断言自己？提前感谢！

Answer 1

你能用和示例代码一样的感觉来测试它吗？

我在您的代码中找不到可能有问题的地方，但我认为在某个地方出现了问题，因为有太多的Z堆栈重叠。

​

​

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        VStack {
            Rectangle()
                .fill(.white)
                .overlay(Text("Pick a Topic to study below."))
                .padding(10)
            
            VStack {
                RoundedRectangle(cornerRadius: 20.0)
                    .fill(.white)
                    .overlay(Text("topicPickerLabel"))
                
                RoundedRectangle(cornerRadius: 20.0)
                    .fill(.white)
                    .overlay(Text("shownPickerLabel"))

                RoundedRectangle(cornerRadius: 20.0)
                    .fill(.white)
                    .overlay(Text("guessPickerLabel"))
            }.padding(10)
            
            HStack {
                RoundedRectangle(cornerRadius: 20.0)
                    .fill(.white)
                    .overlay(
                        Button("FLIP               ") {}
                    )
                Spacer()
                RoundedRectangle(cornerRadius: 20.0)
                    .fill(.white)
                    .overlay(
                        Button("NEXT               ") {}
                    )
            }.padding(10)
        }
        .edgesIgnoringSafeArea(.all)
        .padding()
        .background(.gray)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 14 Pro")
        ContentView()
            .previewDevice("iPhone SE (3rd generation)")
    }
}