SwiftUI实现HStack中View与多行Text首行垂直居中对齐

要实现Button高度与多行Text第一行高度一致（适配动态字体），可以通过获取目标字体的单行文本高度来动态设置Button高度，核心思路是利用同字体样式的单行文本度量高度，替代硬编码值。

实现步骤与代码 #

1. 定义PreferenceKey用于传递高度值
2. 通过隐藏的单行文本获取目标字体的行高
3. 将获取到的高度应用到Button的frame中

完整代码示例：

import SwiftUI

// 自定义PreferenceKey，用于传递文本行高
struct TextLineHeightPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct AdaptiveButtonHeightView: View {
    let title: String
    @State private var textLineHeight: CGFloat = 0
    
    var body: some View {
        HStack(alignment: .top, spacing: 4.0) {
            // 多行文本视图
            Text(title)
                .font(.title3)
                .fontWeight(.medium)
                .frame(maxWidth: .infinity, alignment: .leading)
                .border(Color.gray)
            
            // 高度自适应的Button
            Button(action: {}) {
                Text("See More")
                    .font(.caption)
            }
            .frame(height: textLineHeight, alignment: .center)
            .border(Color.gray)
        }
        // 添加隐藏的单行文本，用于获取目标字体的行高
        .overlay(
            Text(" ") // 任意字符都可，仅用于度量高度
                .font(.title3)
                .fontWeight(.medium)
                .hidden()
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .preference(key: TextLineHeightPreferenceKey.self, value: proxy.size.height)
                    }
                )
        )
        // 监听高度变化并更新Button高度
        .onPreferenceChange(TextLineHeightPreferenceKey.self) { newHeight in
            textLineHeight = newHeight
        }
    }
}

// 预览
struct AdaptiveButtonHeightView_Previews: PreviewProvider {
    static var previews: some View {
        AdaptiveButtonHeightView(title: "这是一段可能会显示多行的测试文本，用来验证按钮高度是否能和文本第一行保持一致，同时适配系统字体大小调整。")
            .padding()
    }
}

方案优势 #

• 动态适配：自动响应系统字体大小调整（包括辅助功能的动态类型）
• 无需硬编码：完全基于实际字体度量计算高度，避免适配问题
• 样式一致：隐藏文本与主文本使用相同字体样式，确保高度完全匹配

内容的提问来源于stack exchange，提问作者Jeff C.