SwiftUI中如何让HStack子视图均等扩展？计算器布局问题

一、让键盘行扩展至全屏宽度 #

问题核心是父容器或行容器未正确声明填充可用空间。你需要确保：

• 整个键盘的根容器（如外层VStack）添加.frame(maxWidth: .infinity)，让它占满屏幕宽度
• 每一行的HStack同样设置.frame(maxWidth: .infinity)，禁止给行设置固定宽度，让它自适应父容器的最大宽度
• 行内的按钮都设置.frame(maxWidth: .infinity, maxHeight: .infinity)，填充所在行的空间

示例基础结构：

struct CalculatorKeyboard: View {
    var body: some View {
        VStack(spacing: 12) {
            // 顶部操作行
            HStack(spacing: 12) {
                Button("AC") { /* 逻辑 */ }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.gray.opacity(0.2))
                    .cornerRadius(8)
                Button("+/-") { /* 逻辑 */ }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.gray.opacity(0.2))
                    .cornerRadius(8)
                Button("%") { /* 逻辑 */ }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.gray.opacity(0.2))
                    .cornerRadius(8)
                Button("/") { /* 逻辑 */ }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.orange)
                    .cornerRadius(8)
            }
            .frame(maxWidth: .infinity, maxHeight: 60)

            // 数字键区域
            VStack(spacing: 12) {
                // 数字行1
                HStack(spacing: 12) {
                    Button("7") { /* 逻辑 */ }
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.gray.opacity(0.1))
                        .cornerRadius(8)
                    Button("8") { /* 逻辑 */ }
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.gray.opacity(0.1))
                        .cornerRadius(8)
                    Button("9") { /* 逻辑 */ }
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.gray.opacity(0.1))
                        .cornerRadius(8)
                    Button("×") { /* 逻辑 */ }
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.orange)
                        .cornerRadius(8)
                }
                .frame(maxWidth: .infinity, maxHeight: 60)

                // 其他数字行...
            }
        }
        .frame(maxWidth: .infinity)
        .padding(16)
    }
}

二、让"0"键宽度为"."键的两倍 #

推荐两种简洁实现方式：

方式1：利用LayoutPriority #

给0键设置更高的布局优先级，让它抢占双倍可用空间：

// 包含0和.的行
HStack(spacing: 12) {
    Button("0") { /* 逻辑 */ }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .layoutPriority(2) // 优先级高于其他键
        .background(Color.gray.opacity(0.1))
        .cornerRadius(8)
    Button(".") { /* 逻辑 */ }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .layoutPriority(1)
        .background(Color.gray.opacity(0.1))
        .cornerRadius(8)
    Button("=") { /* 逻辑 */ }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .layoutPriority(1)
        .background(Color.orange)
        .cornerRadius(8)
}
.frame(maxWidth: .infinity, maxHeight: 60)

方式2：使用Grid布局（更直观可控） #

用Grid替代嵌套的HStack/VStack，通过gridCellColumns设置0键占2列，其他键占1列：

Grid(horizontalSpacing: 12, verticalSpacing: 12) {
    // 顶部操作行
    GridRow {
        Button("AC") { /* 逻辑 */ }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray.opacity(0.2))
            .cornerRadius(8)
        Button("+/-") { /* 逻辑 */ }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray.opacity(0.2))
            .cornerRadius(8)
        Button("%") { /* 逻辑 */ }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray.opacity(0.2))
            .cornerRadius(8)
        Button("/") { /* 逻辑 */ }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.orange)
            .cornerRadius(8)
    }

    // 数字行1
    GridRow {
        Button("7") { /* 逻辑 */ }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray.opacity(0.1))
            .cornerRadius(8)
        Button("8") { /* 逻辑 */ }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray.opacity(0.1))
            .cornerRadius(8)
        Button("9") { /* 逻辑 */ }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray.opacity(0.1))
            .cornerRadius(8)
        Button("×") { /* 逻辑 */ }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.orange)
            .cornerRadius(8)
    }

    // 0键所在行
    GridRow {
        Button("0") { /* 逻辑 */ }
            .gridCellColumns(2) // 关键：设置占2列
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray.opacity(0.1))
            .cornerRadius(8)
        Button(".") { /* 逻辑 */ }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray.opacity(0.1))
            .cornerRadius(8)
        Button("=") { /* 逻辑 */ }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.orange)
            .cornerRadius(8)
    }
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.padding(16)

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