SwiftUI中如何为HStack内的单个元素设置差异化垂直对齐？

我完全懂你的需求：单行文本时输入框和发送按钮一起垂直居中，多行文本时输入框保持居中，发送按钮固定在底部。不用搞复杂的高度计算，通过简单的布局调整就能实现，直接修改你的代码如下：

struct ContentView: View {
    @State var textInput: String = "Testing"

    private let inputCornerRadius: CGFloat = 24

    var body: some View {
        HStack(alignment: .bottom, spacing: 8) { // 保持HStack底部对齐
            TextField("Chat", text: $textInput, axis: .vertical)
                .lineLimit(1...9)
                .textFieldStyle(.plain)
                .frame(maxHeight: .infinity, alignment: .center) // 关键调整：让输入框占满可用高度并居中内容

            Button(action: send) {
                Image(systemName: "paperplane.fill")
                    .foregroundStyle(.background)
                    .imageScale(.medium)
                    .padding(10)
                    .background(
                        Circle()
                            .fill(Color(.label))
                        )
            }
        }
        .padding(.vertical, 8)
        .padding(.leading, 10)
        .padding(.trailing, 6)
        .background(
            RoundedRectangle(cornerRadius: inputCornerRadius, style: .continuous)
                .fill(Color(.secondarySystemBackground))
        )
        .clipShape(RoundedRectangle(cornerRadius: inputCornerRadius, style: .continuous))
        .padding(.horizontal, 10)
    }

    private func send() {}
}

原理说明： #

• 保持HStack的alignment: .bottom，确保发送按钮始终对齐到HStack的底部；
• 给TextField添加.frame(maxHeight: .infinity, alignment: .center)：
  • maxHeight: .infinity让输入框自动占满HStack的垂直可用空间；
  • alignment: .center让输入框内的文本内容在自身的垂直空间里居中显示；
• 单行场景下：HStack的高度由发送按钮的高度决定，输入框占满这个高度后内容居中，自然和按钮的中心对齐；
• 多行场景下：HStack的高度随输入框的高度扩展，输入框内容保持居中，发送按钮则固定在HStack的底部，完全匹配你的需求。

备注：内容来源于stack exchange，提问作者Charlie Fish