SwiftUI Text视图固定宽度，换行时仅底部扩展实现方案

问题描述 #

在第一个示例中，文本被固定在屏幕某个位置；当添加更多字符时（第二个示例），Text视图的高度会同时向上和向下扩展。请问有没有办法让Text视图增加高度时，只向下延伸，不影响顶部位置？

第一个示例

第二个示例

当前使用的Text视图代码如下：

import SwiftUI

struct ContentView: View {
    var body: some View {
        // ZStack 用于设置背景色
        ZStack {
            Color.teal.opacity(0.3)
                .ignoresSafeArea()
            GeometryReader { proxy in
                Image(.snareDrum)
                    .resizable()
                    .scaledToFit()
                    .frame(width: proxy.size.width * 0.80, height: proxy.size.height * 0.80)
                    .background {
                        Color.white
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            Text("Lorem ipsum dolor, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent tristique magna sit amet purus.")
                .lineLimit(nil)
                .multilineTextAlignment(.center)
                .frame(width: 200)
                .fixedSize(horizontal: false, vertical: true)
                .background(.red)
                .position(x: 195, y: 210)
        }
    }
}

#Preview {
    ContentView()
}

解决方案 #

问题根源是position(x:y:)会把视图的中心点固定在指定坐标，所以高度变化时会自动向上下两边扩展。要实现只向下延伸，需要把视图的顶部锚点固定在目标位置，而非中心点。

方法1：用alignmentGuide配合frame

将Text放入frame(maxHeight: .infinity)容器，通过对齐指南把顶部固定在目标y坐标：

Text("Lorem ipsum dolor, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent tristique magna sit amet purus.")
    .lineLimit(nil)
    .multilineTextAlignment(.center)
    .frame(width: 200)
    .fixedSize(horizontal: false, vertical: true)
    .background(.red)
    .frame(maxHeight: .infinity, alignment: .top)
    .alignmentGuide(.top) { _ in 210 }

方法2：替换position为offset+frame

先让Text顶部对齐父容器顶部，再通过offset移动到目标位置，高度增加时只会向下延伸：

Text("Lorem ipsum dolor, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent tristique magna sit amet purus.")
    .lineLimit(nil)
    .multilineTextAlignment(.center)
    .frame(width: 200, alignment: .top)
    .fixedSize(horizontal: false, vertical: true)
    .background(.red)
    .offset(y: 210)

原理说明 #

• position(x:y:)以视图中心点为锚点，尺寸变化时会向两侧扩展；
• 将顶部设为锚点（通过alignment或alignmentGuide），高度增加时只会从顶部向下延伸，顶部位置保持固定。

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