如何在LabeledContent中随字体大小动态切换HStack与VStack

可以通过监听系统动态字体尺寸，结合DynamicTypeSize判断并切换布局方式，同时建议移除固定宽度设置，避免字体放大后内容截断。

修改后的代码示例 #

struct TextRowView: View {
    let title: String
    let value: String
    
    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
    
    var body: some View {
        // 根据动态字体大小阈值切换布局
        if dynamicTypeSize >= .accessibility3 {
            // 大字体时采用VStack垂直布局：value在上，title在下
            VStack(alignment: .leading, spacing: 4) {
                Text(value)
                Text(title)
                    .bold()
            }
        } else {
            // 常规字体时保留LabeledContent默认的HStack水平布局
            LabeledContent {
                Text(value)
            } label: {
                Text(title)
                    .bold()
            }
        }
    }
}

关键说明 #

• 利用@Environment(\.dynamicTypeSize)获取当前系统动态字体尺寸，可根据需求调整切换阈值（比如改为.accessibility1更早触发垂直布局）。
• 移除固定width参数，让文本自适应可用空间，避免大字体下内容被截断。
• 垂直布局时保持左对齐，兼顾可读性和视觉一致性，符合无障碍设计的最佳实践。

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