SwiftUI中如何让加号图标与文本对齐？

我需要让按钮中的加号图标与文本垂直居中对齐，当前图标偏上，不符合预期效果。

初始效果 #

当前代码 #

struct ContentView: View {
    var body: some View {
        VStack{
            HStack{
                Text("FamilyBite")
                    .font(Font.largeTitle)
                    .fontWeight(Font.Weight.black)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding()
            }
            Button(action: signIn) {
                Image(systemName: "plus.circle.fill")
                    .foregroundColor(Color.black)
                    .frame(width: 10.0, height: 10.0, alignment: .leadingFirstTextBaseline)
                    .padding()
                Text("Create a delivery")
                    .frame(minWidth:0, maxWidth: .infinity, minHeight: 20, maxHeight: 70, alignment: .center)
                    .font(Font.system(size: 20))
                    .fontWeight(Font.Weight.semibold)
                    .padding()
                    .foregroundColor(Color.black)
                    
            }
            .padding()
            .background(Color.white)
            .cornerRadius(10)
            .shadow(color: .gray, radius: 2, x: 0, y: 2)
            Spacer()
        }
    }
}

目标效果 #

解决方法 #

调整按钮内部的布局逻辑，移除多余的frame限制，显式设置垂直对齐方式：

struct ContentView: View {
    var body: some View {
        VStack{
            HStack{
                Text("FamilyBite")
                    .font(.largeTitle)
                    .fontWeight(.black)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding()
            }
            Button(action: signIn) {
                // 显式设置HStack垂直居中对齐，调整图标与文本的间距
                HStack(alignment: .center, spacing: 8) {
                    Image(systemName: "plus.circle.fill")
                        .foregroundColor(.black)
                        .font(.system(size: 24)) // 直接设置图标大小，避免固定frame压缩图标
                    Text("Create a delivery")
                        .font(.system(size: 20))
                        .fontWeight(.semibold)
                        .foregroundColor(.black)
                }
                .padding() // 统一给整体加padding，避免子视图重复设置
            }
            .padding()
            .background(Color.white)
            .cornerRadius(10)
            .shadow(color: .gray, radius: 2, x: 0, y: 2)
            Spacer()
        }
    }
    
    // 补充缺失的signIn方法
    func signIn() {}
}

修改要点 #

• 给按钮内部的HStack设置alignment: .center，确保图标与文本垂直居中对齐
• 移除图标上的固定小尺寸frame，改用font方法控制图标大小，避免图标变形或对齐异常
• 删除文本上多余的frame限制，让文本自然适应布局，配合HStack实现居中
• 统一给HStack添加padding，简化布局结构，保持内边距一致

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