如何在SwiftUI的LazyVGrid中实现文本大小始终一致的布局？

问题描述 #

我尝试在网格中布局一些数字，目标是让所有文本的大小保持一致。但由于视图尺寸是动态的，我无法直接指定字体大小，因此使用了GeometryReader，代码如下：

struct OneRow: View {
    let proxy: GeometryProxy
    let columns = [GridItem(.fixed(proxy.size.width * 7 / 15), spacing: 0), GridItem(.fixed(proxy.size.width * 3 / 15), spacing: 0),
                       GridItem(.fixed(proxy.size.width * 3 / 15), spacing: 0), GridItem(.fixed(proxy.size.width * 2 / 15), spacing: 0)]

     var body: some View {
        LazyVGrid(columns: columns, alignment: .leading, spacing: 0) {
            Text(dayWeather.date.formatted(.dateTime.weekday(.abbreviated)))
                .styledText(font: font, color: textColor)
                .frame(height: proxy.size.height * 13 / 15 / 6.5, alignment: .leading)
                .border(.black)

            Text("\(dayWeather.highTemperature.converted(to: temperatureUnit.unitTemperature).weatherFormatted())")
                .styledText(font: font, color: textColor)
                .frame(height: proxy.size.height * 13 / 15 / 6.5, alignment: .leading)
                .border(.black)

            Text("\(dayWeather.lowTemperature.converted(to: temperatureUnit.unitTemperature).weatherFormatted())")
                .styledText(font: font, color: textColor)
                .frame(height: proxy.size.height * 13 / 15 / 6.5, alignment: .leading)
                .border(.black)

            Image(systemName: dayWeather.symbolName)
                .aspectRatio(contentMode: .fit)
                .imageScale(family == .systemLarge ? .large : .small)
                .foregroundColor(textColor)
                .border(.black)
        }
    }
}

起初我尝试设置文本的固定宽度，但发现因文本长度可变而无法生效。之后我改为固定高度，但仍出现单数字温度的字号比双数字温度更大的问题。请问在整体表格尺寸可变的情况下，实现文本大小始终一致的正确方法是什么？

解决方案 #

核心思路：统一计算固定字体大小，禁用文本自动缩放 #

问题根源在于当前的font参数未基于可用空间计算固定值，导致文本根据自身长度自动调整字号。解决步骤如下：

1. 基于GeometryProxy计算统一字体大小
   在OneRow内部，根据proxy提供的可用高度，计算出固定的字体尺寸，确保所有文本使用同一大小：

private var calculatedFontSize: CGFloat {
    // 取行高的70%-80%作为字体大小，预留空间避免文本溢出
    let rowHeight = proxy.size.height * 13 / 15 / 6.5
    return rowHeight * 0.75
}

private var unifiedFont: Font {
    Font.system(size: calculatedFontSize, weight: .regular)
}

2. 替换所有文本的font参数为统一字体
   将所有styledText(font: font)替换为styledText(font: unifiedFont)，确保所有文本使用同一个固定大小的字体，彻底避免因文本长度差异导致的字号变化。

3. 优化文本Frame布局
   给文本添加maxWidth: .infinity，让文本在列宽范围内左对齐，同时保持固定高度，避免文本拉伸：

Text(dayWeather.date.formatted(.dateTime.weekday(.abbreviated)))
    .styledText(font: unifiedFont, color: textColor)
    .frame(maxWidth: .infinity, height: proxy.size.height * 13 / 15 / 6.5, alignment: .leading)
    .border(.black)

4. 可选：调整GridItem布局逻辑
   如果固定列宽在极端尺寸下出现问题，可以将.fixed改为.flexible(minimum: ...)，结合最小宽度限制保证布局合理性，同时不影响字体大小的统一设置：

let columns = [
    GridItem(.flexible(minimum: 60), spacing: 0),
    GridItem(.flexible(minimum: 40), spacing: 0),
    GridItem(.flexible(minimum: 40), spacing: 0),
    GridItem(.flexible(minimum: 30), spacing: 0)
]

关键说明 #

• 禁止依赖文本的自动缩放行为（比如默认的minimumScaleFactor），必须明确指定固定字体大小。
• 字体大小的计算要基于行的可用高度，确保在视图尺寸变化时，字号能同步适配且保持统一。

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