Xcode 模拟器中的垂直方向和横向方向不同

Question

当我运行我的代码并启动模拟器时，垂直方向看起来不错，但是当我转向横向时，显示的名称会被切断。

import SwiftUI
struct ContentView: View {
    @Environment(\.horizontalSizeClass) var hSizeClass
    @Environment(\.verticalSizeClass) var vSizeClass
    var body: some View {
        if hSizeClass == .compact && vSizeClass == .regular {
            compactDesign()
        }else {
            regularDesign()
        }
    } }
struct compactDesign: View {
    var body: some View{
        ZStack {
            Color.green.edgesIgnoringSafeArea(.all)
            VStack(){
                Image("Icono")
                    .resizable()
                    .frame(width: 80, height: 80, alignment: .center)
                    .clipShape(Circle())
                Text("María Ramirez")
                    .font(.largeTitle)
                    .foregroundColor(.white)
                    .bold()
                Text("Calle #123")
                    .foregroundColor(.white).font(.title).italic()
            }
        }
    } }
struct regularDesign: View {
    var body: some View{
        ZStack {
            Color.blue.edgesIgnoringSafeArea(.all)
            HStack(){
                Image("Icono")
                    .resizable()
                    .frame(width: 80, height: 80, alignment: .center)
                VStack(alignment: .leading, spacing: 10){
                    Text("María Ramirez")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                        .bold()
                        .clipShape(Circle())
                    Text("Calle #123")
                        .foregroundColor(.white).font(.title).italic()
                }
            }
        }
    } }
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    } }

Answer 1

你需要小心你的修饰符。您将 .clipShape() 放在 Text() 上，而不是 Image。另外，与您的代码保持一致。如果您在一行上链接修饰符，请在其他行上执行相同的操作。如果您将它们放在不同的行中，请将它们保持在不同的行中。它使您的代码更易于理解。最后，当使用我们没有的图像发布这样的代码时，请用 Rectangle() 代替它，以便我们自己更容易运行。

struct regularDesign: View {
    var body: some View{
        ZStack {
            Color.blue.edgesIgnoringSafeArea(.all)
            HStack {
                Image("Icono")
                    .resizable()
                    .frame(width: 80, height: 80, alignment: .center)
                    .clipShape(Circle()) // <- To here
                VStack(alignment: .leading, spacing: 10){
                    Text("María Ramirez")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                        .bold()
                        //.clipShape(Circle()) <- Move This
                    Text("Calle #123")
                        .foregroundColor(.white)
                        .font(.title)
                        .italic()
                }
            }
        }
    }
}

Xcode 模拟器中的垂直方向和横向方向不同

Vertical orientation and landscape orientation are different in the Xcode simulator

iphone

xcode

ios

swift

swiftui