SwiftUI中实现HStack内两个按钮等高等宽的问题

核心修复方案 #

1. 先确保自定义按钮内部布局撑满指定尺寸 #

自定义VoteButton的内部内容如果没有强制填充按钮区域，会导致按钮跟着内容收缩。修改按钮结构，让内部文本撑满整个按钮frame：

struct VoteButton: View {
    let title: String
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(title)
                .frame(maxWidth: .infinity, maxHeight: .infinity) // 强制文本填充按钮区域
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
        .frame(width: 120, height: 60) // 固定按钮基础宽高
        .contentShape(Rectangle()) // 确保点击区域覆盖整个按钮尺寸
    }
}

2. 给嵌套HStack添加强制等尺寸约束 #

HStack默认会让子视图根据内容自适应，需要强制两个按钮使用完全一致的尺寸，分两种场景处理：

场景一：iOS 16+ 用Grid替代HStack（更简单）

Grid布局原生支持列宽等高，适合这种对称布局需求：

struct VoteView: View {
    var body: some View {
        VStack {
            Grid(alignment: .center) {
                GridRow {
                    VoteButton(title: "同意", action: {})
                    VoteButton(title: "不同意", action: {})
                }
                .gridColumns(.equal) // 强制两列宽度相等
            }
            .frame(height: 60) // 统一行高
        }
    }
}

场景二：兼容iOS 16以下版本，用PreferenceKey同步尺寸

通过自定义PreferenceKey获取两个按钮的最大尺寸，再同步应用到两个按钮上：

// 定义获取视图尺寸的PreferenceKey
struct ViewSizeKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = CGSize(
            width: max(value.width, nextValue().width),
            height: max(value.height, nextValue().height)
        )
    }
}

// 修改VoteView布局
struct VoteView: View {
    @State private var buttonSize: CGSize = .zero
    
    var body: some View {
        VStack {
            HStack(spacing: 16) {
                VoteButton(title: "同意", action: {})
                    .background(
                        GeometryReader { proxy in
                            Color.clear
                                .preference(key: ViewSizeKey.self, value: proxy.size)
                        }
                    )
                    .frame(width: buttonSize.width, height: buttonSize.height)
                
                VoteButton(title: "不同意", action: {})
                    .background(
                        GeometryReader { proxy in
                            Color.clear
                                .preference(key: ViewSizeKey.self, value: proxy.size)
                        }
                    )
                    .frame(width: buttonSize.width, height: buttonSize.height)
            }
            .onPreferenceChange(ViewSizeKey.self) { newSize in
                buttonSize = newSize
            }
        }
    }
}

3. 排查父视图布局干扰 #

检查外层VStack或容器视图是否设置了layoutPriority、frame(maxWidth: .infinity, alignment: .leading)等可能挤压子视图的约束，确保父视图没有强制收缩按钮的布局优先级。

验证技巧 #

用Xcode的Debug View Hierarchy功能查看按钮的实际尺寸，确认设置的宽高是否真的生效，同时检查按钮内部内容是否存在额外的尺寸限制。

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