如何让SwiftUI中HStack内的Button填充高度以适配键盘布局？

你的问题核心是KeyRow中的HStack没有占满父视图分配的高度，同时Button本身也没有充分利用HStack提供的空间。以下是具体修改方案：

修改步骤 #

1. 给KeyRow里的HStack添加.frame(maxHeight: .infinity)，让它完全填充上层VStack设置的100高度；
2. 给Button添加.frame(maxWidth: .infinity, maxHeight: .infinity)，确保按钮占满HStack分配的空间；
3. （可选）给按钮添加背景色，方便直观验证填充效果。

修改后的完整代码 #

struct KeyboardView: View {
  let rows = [String.keyboardFKeyRow, String.keyboardNumKeyRow, String.alpha1KeyRow, String.alpha2KeyRow, String.alpha3KeyRow, String.arrowKeyRow]
  var body: some View {
    VStack() {
      KeyRow(labels: String.keyboardFKeyRow).frame(height: 100)
      KeyRow(labels: String.keyboardNumKeyRow).frame(height: 100)
      KeyRow(labels: String.alpha1KeyRow).frame(height: 100)
      KeyRow(labels: String.alpha2KeyRow).frame(height: 100)
      KeyRow(labels: String.alpha3KeyRow).frame(height: 100)
      KeyRow(labels: String.arrowKeyRow).frame(height: 100)
    }
  }
}

struct KeyRow: View {
  var labels: [String]
  
  var body: some View {
    HStack() {
      Spacer()
      ForEach(labels, id: \.self) { label in
        Button {
          print("Key Clicked")
        } label: {
          Text(label.capitalized)
            .font(.body)
            .frame(minWidth: 60, maxWidth: 80, minHeight: 80, maxHeight: .infinity)
        }
        // 让按钮占满可用空间
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        // 可选：添加背景色查看填充效果
        .background(Color.gray.opacity(0.2))
        .cornerRadius(8)
      }
      Spacer()
    }
    // 让HStack占满父视图的高度
    .frame(maxHeight: .infinity)
  }
}

原理说明 #

• 上层VStack给每个KeyRow设置了height:100，但KeyRow里的HStack默认不会自动填充这个高度，需要显式设置maxHeight: .infinity来获取全部可用高度；
• Button默认会根据内部Text的大小来确定自身尺寸，添加maxWidth和maxHeight为.infinity后，按钮会扩展到HStack分配给它的最大空间；
• 保留Text的minWidth/minHeight是为了保证按钮有最小尺寸，避免内容过小时按钮缩得太小。

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