如何將項目 HStack 與 VStack SwiftUI 對齊？

Question

我是swiftui的新手，盡管我嘗試了所有方法，但我無法得到任何反應。

如何對齊圖片中的所有內容？ （我已經嘗試了我所知道的一切）

   ForEach(viewModel.setupList, id:\.self){ item in
        ZStack{
            Color.colorDark
            
            HStack{
                //TO-DO: get photo
                Image("icon_homeFeedImage")
                    .resizable()
                    .frame(width: UIScreen.screenWidth*0.2, height: UIScreen.screenHeight*0.12)
                    .cornerRadius(16)
                    .padding()
                
                VStack(alignment: .leading){
                    Text(item.setupHeader)
                        .foregroundColor(.colorLight)
                        .font(.fontBoldDescription)
                        .frame(maxWidth: .infinity, alignment: .leading)
                
                    HStack{
                        HStack(alignment: .top, spacing: 10) {
                            Image("icon_mapPin")
                            Text(item.setupLocation)
                                .foregroundColor(.colorGrey1)
                                .font(.fontMiniButton)
                                .multilineTextAlignment(.leading)
                            
                        }
                        Spacer()
                        Button {
                            
                        } label: {
                            Text(Localizable.view)
                                .foregroundColor(.colorHellium)
                                .font(.fontButton)
                        }.frame(width: UIScreen.screenWidth * 0.23, height: UIScreen.screenHeight*0.05 )
                            .background(Color.colorGrey2)
                            .cornerRadius(16)
                            .padding(.bottom,12)
                    }.padding(.horizontal)
                }
            }
        }.frame(width: UIScreen.screenWidth * 0.9, height: UIScreen.screenWidth * 0.35)
            .cornerRadius(16)
    }[enter image description here][1]

我的設計：

想要的設計：

---

Answer 1

我沒有你的完整代碼，所以我無法運行你的應用程序。

但是，這是一個解決方案，嘗試使用您自己的圖像、大小和資源復制我的示例視圖。 代碼在圖片下方：

import SwiftUI

struct ContentView: View {

let heightImage = UIScreen.main.bounds.height * 0.1

var body: some View {
    ZStack {
        Color.black.opacity(0.7).edgesIgnoringSafeArea(.all)
        VStack {
            Text("Favorite")
                .font(.title)
                .fontWeight(.bold)
                .padding(.bottom)
                .foregroundColor(.white)
            ForEach(0...3, id: \.self) { _ in
                ZStack(alignment: .center) {
                    RoundedRectangle(cornerRadius: 15)
                        .fill(.black.opacity(0.5))
                        .frame(width: UIScreen.main.bounds.width * 0.9, height: UIScreen.main.bounds.height * 0.15)
                    HStack {
                        Image("swift")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: heightImage, height:  heightImage)
                            .mask(RoundedRectangle(cornerRadius: 15))
                        VStack {
                            Text("Helium Setups for Nilufer Area")
                                .foregroundColor(.white)
                                .font(.subheadline)
                                .fontWeight(.bold)
                                .lineLimit(1)
                                .multilineTextAlignment(.center )
                            HStack {
                                HStack {
                                    Image(systemName: "location.north.circle.fill")
                                        .foregroundColor(.gray)
                                    
                                    Text("Busa, TR")
                                        .foregroundColor(.gray)
                                }
                                Spacer()
                                Button {
                                    
                                } label: {
                                    Text("View")
                                        .padding()
                                        .background(.black.opacity(0.7))
                                        .foregroundColor(.teal)
                                        .cornerRadius(15)
                                        .font(.subheadline)
                                }
                            }
                        }
                            
                    }
                    .padding(.horizontal)
                }
                .frame(width: UIScreen.main.bounds.width * 0.9)
            }
        }
    }
  }
}