如何防止Text撑开SwiftUI的VStack？

当Text内容为"23:11:45"时，字体未按预期缩放，反而撑开了外层VStack。我希望VStack的最大宽度为屏幕宽度减去两侧内边距，请问该如何解决？

我的代码 #

VStack(spacing: 2) {
    Text("23:11:45") or "23:11"
        .foregroundColor(Color(uiColor: mode.underlayBackgroundColor))
        .font(.liberationMonoRegular(withSize: 46))
        .multilineTextAlignment(.center)
        .scaledToFill()
        .minimumScaleFactor(0.5)
    ProgressView(value: progress, total: 1)
        .tint(Color(uiColor: mode.underlayBackgroundColor))
        .foregroundColor(Color(uiColor: mode.underlayBackgroundColor)
        .opacity(0.3))
}
.fixedSize()
.background(.blue)

嵌套结构 #

这段VStack被嵌套在如下ScrollView中：

ScrollView {
    // 上述VStack放置于此
}
.background(.red)
.frame(maxWidth: .infinity)

效果对比 #

• Text内容为"23:11:45"时的效果：
  
• Text内容为"23:11"时的效果：
  

解决方案 #

问题根源是fixedSize()修饰符——它会强制VStack保持内容的原始尺寸，导致Text无法感知外层宽度限制，也就不会触发字体缩放。可以通过以下两种方式修改：

方案1：移除fixedSize()并设置宽度限制 #

VStack(spacing: 2) {
    Text("23:11:45")
        .foregroundColor(Color(uiColor: mode.underlayBackgroundColor))
        .font(.liberationMonoRegular(withSize: 46))
        .multilineTextAlignment(.center)
        .scaledToFill()
        .minimumScaleFactor(0.5)
        .frame(maxWidth: .infinity) // 让Text占满VStack宽度，触发缩放
    ProgressView(value: progress, total: 1)
        .tint(Color(uiColor: mode.underlayBackgroundColor))
        .foregroundColor(Color(uiColor: mode.underlayBackgroundColor).opacity(0.3))
}
.frame(maxWidth: .infinity, alignment: .center)
.padding(.horizontal, 16) // 自定义两侧内边距数值
.background(.blue)

方案2：保留垂直方向的fixedSize() #

如果需要VStack在垂直方向保持内容尺寸，仅让水平方向自适应宽度：

VStack(spacing: 2) {
    Text("23:11:45")
        .foregroundColor(Color(uiColor: mode.underlayBackgroundColor))
        .font(.liberationMonoRegular(withSize: 46))
        .multilineTextAlignment(.center)
        .scaledToFill()
        .minimumScaleFactor(0.5)
        .frame(maxWidth: .infinity)
    ProgressView(value: progress, total: 1)
        .tint(Color(uiColor: mode.underlayBackgroundColor))
        .foregroundColor(Color(uiColor: mode.underlayBackgroundColor).opacity(0.3))
}
.fixedSize(horizontal: false, vertical: true)
.padding(.horizontal, 16)
.background(.blue)

核心逻辑：通过frame(maxWidth: .infinity)让VStack和Text遵守外层的宽度限制，配合内边距控制最大宽度，这样Text就能根据可用空间触发字体缩放。

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