SwiftUI：如何实现HStack与VStack内元素的目标对齐效果？

我是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)
}

当前布局效果 #

目标布局效果 #

修改后的代码及说明 #

ForEach(viewModel.setupList, id:\.self){ item in
    ZStack{
        Color.colorDark
        
        // 让HStack在ZStack中垂直居中，解决整体上下偏移问题
        HStack(alignment: .center, spacing: 0) {
            Image("icon_homeFeedImage")
                .resizable()
                .frame(width: UIScreen.screenWidth*0.2, height: UIScreen.screenHeight*0.12)
                .cornerRadius(16)
                .padding(.leading, 16) // 替换默认padding，只保留左侧内边距
            
            VStack(alignment: .leading, spacing: 12) { // 调整VStack间距，让标题和下方区域更紧凑
                Text(item.setupHeader)
                    .foregroundColor(.colorLight)
                    .font(.fontBoldDescription)
                    .frame(maxWidth: .infinity, alignment: .leading)
                
                HStack(alignment: .center, spacing: 0) { // 让位置信息和按钮垂直居中对齐
                    HStack(alignment: .center, spacing: 8) { // 调整图标和文字的垂直对齐方式
                        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(.trailing, 16) // 只给右侧加内边距
            }
            .padding(.vertical, 16) // 给VStack上下加内边距，保证整体垂直空间
            .padding(.leading, 12) // VStack左侧和图片的间距
        }
    }
    .frame(width: UIScreen.screenWidth * 0.9, height: UIScreen.screenWidth * 0.35)
    .cornerRadius(16)
}

关键修改点： #

• 外层HStack添加alignment: .center，让图片和右侧内容垂直居中对齐
• 替换图片的默认padding()为.padding(.leading, 16)，避免不必要的上下内边距
• 调整VStack的spacing为12，让标题和下方区域的间距更合理
• 下方HStack设置alignment: .center，让位置信息和按钮垂直居中，同时移除按钮的.padding(.bottom,12)
• 细化内边距设置，分别给VStack加上下内边距、右侧HStack加右侧内边距，让整体布局更贴合目标样式

内容的提问来源于stack exchange，提问作者sevdagb