SwiftUI中如何让文本填充容器高度？

问题原因 #

Text视图的字体字形本身带有固定的行高和基线间距，即便设置了大字体与缩放规则，文本的实际显示高度也不会自动填满其容器高度，导致蓝色背景容器与文本之间出现空隙。

解决方案 #

方案一：让文本容器占满高度并优化对齐

给Text添加frame(maxHeight: .infinity)使其容器填满HStack分配的高度，同时设置lineLimit(1)确保单行显示，蓝色背景会完全贴合HStack的高度，文本则会垂直居中于容器内。

修改后代码：

HStack {
    Image(systemName: "globe")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .background(Color.red)
    Text("Globe")
        .font(.system(size: 100))
        .minimumScaleFactor(0.1)
        .lineLimit(1)
        .frame(maxHeight: .infinity) // 让文本容器占满可用高度
        .background(Color.blue)
}.frame(height: 100)

方案二：强制文本缩放至容器高度

如果需要文本完全填满蓝色背景的高度，可以借助GeometryReader获取容器尺寸，通过scaleEffect将文本拉伸至匹配容器高度：

修改后代码：

HStack {
    Image(systemName: "globe")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .background(Color.red)
    
    GeometryReader { geo in
        Text("Globe")
            .font(.system(size: 100))
            .minimumScaleFactor(0.1)
            .lineLimit(1)
            .frame(width: geo.size.width, height: geo.size.height)
            // 计算缩放比例，让文本高度匹配容器高度
            .scaleEffect(geo.size.height / (Text("Globe").font(.system(size: 100)).sizeThatFits(.infinity).height))
            .background(Color.blue)
    }
}.frame(height: 100)

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