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()
                }
            }
        }
    }
}