SwiftUI：如何避免字体增大时Text组件顶部线条下移？

问题根源在于你的红色背景容器默认使用居中对齐，当顶部文本字体增大时，内部整体布局会被容器居中，导致顶部文本下移；同时文本本身的字体行高也会带来额外留白，加剧位移。以下是具体解决方案：

修改步骤 #

1. 给红色背景容器设置顶部左对齐，让内部内容从左上角开始布局，而非居中
2. 给顶部文本添加单行限制，避免换行导致布局突变
3. 强制顶部文本在可用空间内贴顶，抵消字体行高的额外留白

修改后完整代码 #

import SwiftUI

struct SquareText: View {
    @State private var fontSize: CGFloat = 22
    
    var body: some View {
        VStack {
            HStack {
                VStack(alignment: .leading) {
                    Text("Text 1")
                        .font(.system(size: fontSize, weight: .bold))
                        .lineLimit(1) // 确保单行，避免换行导致布局变化
                        .frame(maxHeight: .infinity, alignment: .top) // 强制文本贴在VStack顶部
                    Spacer()
                    Text("Long Text 2")
                }
                Spacer()
            }
            .foregroundColor(.white)
            .padding()
            .background { Color.red }
            .frame(maxWidth: 350, maxHeight: 190, alignment: .topLeading) // 容器顶部左对齐，避免内容居中下移
            .clipShape(RoundedRectangle(cornerRadius: 20))
            .centeredHorizontally()
            .padding()
                        
            HStack {
                Text("Font Size: \(fontSize.formatted())")
                Slider(value: $fontSize, in: 22...100, step: 1)
            }
            .padding()
        }
    }
}

// Centered Horizontally View Modifier
struct CenteredHorizontally: ViewModifier {
    func body(content: Content) -> some View {
        HStack {
            Spacer()
            content
            Spacer()
        }
    }
}
extension View {
    func centeredHorizontally() -> some View {
        modifier(CenteredHorizontally())
    }
}

效果说明 #

• .frame(maxWidth: 350, maxHeight: 190, alignment: .topLeading)：让红色容器内的内容固定从左上角开始布局，彻底解决居中导致的下移问题
• .lineLimit(1)：防止文本因字体过大换行，避免布局高度突变
• .frame(maxHeight: .infinity, alignment: .top)：让顶部文本在自身可用空间内始终贴顶，抵消字体自带的顶部留白

如果仍有轻微位移，可以根据字体大小微调顶部内边距，例如添加.padding(.top, -4)（数值按需调整）。

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