SwiftUI布局咨询：固定容器内底部居右红文本不重叠适配方案

场景1：主文本单行显示 #

如果主文本仅需单行展示，用HStack即可简单实现需求：

struct FixedContainerView: View {
    let mainText: String
    let redText: String
    
    var body: some View {
        HStack(alignment: .bottom, spacing: 4) {
            // 主文本：占满剩余空间，超长时尾部截断
            Text(mainText)
                .lineLimit(1)
                .truncationMode(.tail)
                .frame(maxWidth: .infinity, alignment: .leading)
            
            // 红色文本：固定在右下角
            Text(redText)
                .foregroundColor(.red)
        }
        .frame(width: 200, height: 60)
        .border(.gray) // 仅用于可视化容器边界，实际使用可移除
    }
}

关键逻辑： #

• HStack设置alignment: .bottom，让两个文本对齐容器底部，红色文本自然处于右下角位置
• 主文本通过frame(maxWidth: .infinity)占据容器内除红色文本外的所有空间
• lineLimit(1)和truncationMode(.tail)确保主文本超长时自动截断并显示省略号
• spacing: 4避免两个文本紧贴，可根据需求调整间距

场景2：主文本多行显示 #

如果主文本需要多行展示，需借助GeometryReader和PreferenceKey获取红色文本宽度，为主文本预留空间：

struct FixedContainerView: View {
    let mainText: String
    let redText: String
    @State private var redTextWidth: CGFloat = 0
    
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            // 主文本：给红色文本预留空间，超长时尾部截断
            Text(mainText)
                .truncationMode(.tail)
                .padding(.trailing, redTextWidth + 4)
            
            // 红色文本：固定在右下角，同时获取自身宽度
            Text(redText)
                .foregroundColor(.red)
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .preference(key: TextWidthKey.self, value: proxy.size.width)
                    }
                )
        }
        .frame(width: 200, height: 60)
        .border(.gray) // 仅用于可视化容器边界，实际使用可移除
        .onPreferenceChange(TextWidthKey.self) {
            redTextWidth = $0
        }
    }
}

// 自定义PreferenceKey用于传递文本宽度
struct TextWidthKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

关键逻辑： #

• ZStack设置alignment: .bottomTrailing，让红色文本固定在容器右下角
• 用GeometryReader包裹红色文本，通过PreferenceKey获取其宽度值
• 主文本设置padding(.trailing)，值为红色文本宽度加间距，确保内容不会覆盖红色文本
• 主文本未设置lineLimit，会在容器高度范围内自动换行，超出高度时尾部截断

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