SwiftUI中如何自动对齐元素并优化布局宽度？

问题解决目标 #

• 修复圆形头像与标题文本的垂直对齐偏差
• 让内容元素自动占满水平可用空间，避免向中间收缩
• 用自适应布局替代手动数值调整，适配后续动态数据

修改后完整代码 #

struct ContentView: View {
    @StateObject private var viewModel = WebViewModel()
    @State private var urlString = ""

    var body: some View {
        VStack {
            ScrollView {
                ForEach(viewModel.contents) { content in
                    HStack(alignment: .center, spacing: 12) {
                        if let urlString = content.imageThumbnail {
                            ImageView(urlString: urlString)
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 100, height: 100)
                                .clipShape(RoundedRectangle(cornerRadius: 5))
                        }

                        VStack(alignment: .leading, spacing: 8) {
                            if let profilePicURLString = content.userProfilePic {
                                ImageView(urlString: profilePicURLString)
                                    .frame(width: 20, height: 20)
                                    .clipShape(Circle())
                            }

                            if let title = content.title {
                                Text(title)
                                    .font(.system(size: 12))
                                    .foregroundColor(.black)
                                    .lineLimit(4)
                            }
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)
                    }
                    .padding(.horizontal)
                    .padding(.vertical, 8)
                }
            }

            Spacer()

            HStack(spacing: 8) {
                TextField("Enter URL", text: $urlString)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .frame(maxWidth: .infinity)

                Button("Load") {
                    viewModel.loadPage(urlString: urlString)
                }
                .buttonStyle(.borderedProminent)
            }
            .padding()
            .background(Color.white)
            .cornerRadius(10)
            .shadow(radius: 1)
            .padding(.bottom, 20)
        }
        .padding(.horizontal)
    }
}

关键修改点说明 #

• 解决水平收缩：给右侧内容VStack添加.frame(maxWidth: .infinity, alignment: .leading)，强制它占满HStack剩余水平空间，不再向中间聚拢
• 修复垂直对齐：移除头像外层多余的HStack和固定高度限制，去掉标题的手动左侧padding，让头像和文本自然左对齐；用spacing参数统一控制元素间距，替代手动数值调整
• 提升布局稳定性：主图改用.fill模式避免拉伸变形，移除底部HStack的固定高度，让输入框和按钮自适应高度；所有间距用系统参数控制，适配不同设备和动态数据

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