如何使 SwiftUI 按钮的 HStack 具有高度？

Question

我有一个简单的 SwiftUI 按钮行来模仿键盘布局。 只是无法让按钮填充 HStack 的高度。 我不知道我需要在哪里给出高度，所以它看起来像一个键盘。 无论我尝试在哪里增加高度，按钮仍然很小。

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)
        }
      }
      Spacer()
    }
  }
}

Answer 1

macOS 上的.bordered按钮样式具有硬编码大小并且拒绝垂直拉伸。 如果您需要不同的按钮高度，请使用.borderless样式或创建自己的ButtonStyle或PrimitiveButtonStyle ，然后（无论哪种方式）自己绘制背景。 例如，我得到了这个结果：

从这个游乐场：

import PlaygroundSupport
import SwiftUI

PlaygroundPage.current.setLiveView(HStack {

    // Default button style, Text label.
    Button("a", action: {})
        .background { Rectangle().stroke(.mint.opacity(0.5), lineWidth: 1).clipped() }
        .frame(maxHeight: .infinity)

    // Default button style, vertically greedy Text label.
    Button(action: {}, label: {
        Text("b")
            .frame(maxHeight: .infinity)
    })
    .background { Rectangle().stroke(.mint.opacity(0.5), lineWidth: 1).clipped() }
    .frame(maxHeight: .infinity)

    Button(action: {}, label: {
        Text("c")
            .fixedSize()
            .padding()
            .frame(maxHeight: .infinity)
            .background {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color(nsColor: .controlColor))
            }
    }).buttonStyle(.borderless)
        .background { Rectangle().stroke(.mint.opacity(0.5), lineWidth: 1).clipped() }
        .frame(maxHeight: .infinity)

}
    .background { Rectangle().stroke(.red.opacity(0.5), lineWidth: 1).clipped() }
    .frame(height: 100)
)