Swiftui如何在開始時對齊VStack

我在 VStack 上使用背景影像，我需要從 .leading 開始顯示內容。

我的代碼

struct HomeView: View {
    
    private var threeColumnGrid = [GridItem(.flexible(), spacing: 0), GridItem(.flexible(), spacing: 0), GridItem(.flexible(), spacing: 0), GridItem(.flexible(), spacing: 0)]
    
    var body: some View {
        NavigationView {
            VStack {
                
                ZStack {
                    Image("frontcard")
                        .resizable()
                        .scaledToFit()
                }
                .frame(width: .infinity, height: 230)
                .padding(.horizontal, 10)
                
                VStack (alignment: .leading){
                    Text("Company Name")
                        .font(.system(size: 13))
                        .fontWeight(.bold)
                    
                    Text("Abdul Umaiz Khan")
                        .font(.system(size: 12))
                        .fontWeight(.bold)
                    
                    HStack{
                        Text("Policy No : ").font(.system(size: 11))   Text("60021").font(.system(size: 11)).fontWeight(.bold)
                        
                        Text("Class : ").font(.system(size: 11))   Text("0002").font(.system(size: 11)).fontWeight(.bold)
                        
                        Text("Cert No : ").font(.system(size: 11))   Text("383").font(.system(size: 11)).fontWeight(.bold)
                        
                        Text("Age : ").font(.system(size: 11))   Text("23").font(.system(size: 11)).fontWeight(.bold)
         
                    }
                    HStack{
                        
                        Text("Cnic : ").font(.system(size: 11))   Text("42201-5223212-3").font(.system(size: 11)).fontWeight(.bold)
                        
                        Text("Userid : ").font(.system(size: 11))   Text("2015-ABCA-3").font(.system(size: 11)).fontWeight(.bold)
                        
                        
                    }
                    
                    Spacer()
   
                }
                .frame(width: .infinity, height: 230)
                .background(Image("backcard")
                    .resizable()
                    .scaledToFill()
                )
                
                Spacer()
                
            }
            .navigationTitle("Company Name")
            .navigationBarTitleDisplayMode(.inline)
     
        }
    }
}

在影像中，開始有差距我已經標記它我需要從影像開始顯示公司名稱意味著 VStack 的領先。

uj5u.com熱心網友回復：

問題來自影像縮放以適應特定高度。這是一個沒有影像的解決方案。

另請注意，您可以.font在整體上使用修飾符HStack。

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                
                Color.blue
                    .cornerRadius(15)
                    .frame(height: 230)
                
                ZStack(alignment: .topLeading) {
                    Color.gray.opacity(0.5)
                        .cornerRadius(15)
                        .frame(height: 230)
                    
                    VStack (alignment: .leading){
                        Text("Company Name")
                            .font(.system(size: 13))
                            .bold()
                        
                        Text("Abdul Umaiz Khan")
                            .font(.system(size: 12))
                            .bold()

                        HStack {
                            Text("Policy No : ")   Text("60021").bold()
                            Text("Class : ")   Text("0002").bold()
                            Text("Cert No : ")   Text("383").bold()
                            Text("Age : ")   Text("23").bold()
                        }
                        .font(.system(size: 11))
                        
                        HStack {
                            Text("Cnic : ")   Text("42201-5223212-3").bold()
                            Text("Userid : ")   Text("2015-ABCA-3").bold()
                        }
                        .font(.system(size: 11))

                        Spacer()
                        
                    }
                    .padding(8)
                }
                .frame(height: 230)
                
                Spacer()
                
            }
            .padding()
            
            .navigationTitle("Company Name")
            .navigationBarTitleDisplayMode(.inline)
            
        }
    }
}

uj5u.com熱心網友回復：

默認情況下，SwiftUI 將視圖布局在框架的中心，但通常框架與內部的視圖大小相同。在您設定的情況下，您.frame(width: .infinity, height: 230)的框架比包含視圖更大。設定.frame(width: .infinity, height: 230, alignment: .leading)應該可以解決問題。

uj5u.com熱心網友回復：

將根 VStack 放在一個新的 HStack 中，并在新 HStack 的末尾寫入 Spacer()。

標籤：迅速 迅捷

上一篇：如何正確分配/初始化弱變數？（迅速）

下一篇：無法推斷flatMap中的型別