SwiftUI中如何让右上角Text视图锚定右侧并向左扩展？

当前代码中右上角文本使用硬编码offset定位，长文本时会从中心扩展导致内容遮挡。要实现文本锚定右侧、保持边缘间距、短文本位置不变、长文本向左延伸的效果，可通过以下修改实现：

修改后的完整代码 #

import SwiftUI
import PlaygroundSupport

struct CityView: View {
    var body: some View {
        ZStack(alignment: .topTrailing) { // 设置ZStack默认对齐到右上角
            Image(uiImage: UIImage(named: "barcelona.png")!)
                .resizable()
                .aspectRatio(contentMode: .fill)
            
            VStack(alignment: .leading) {
                Text("Barcelona")
                    .font(.system(size: 16, weight: .medium))
                    .padding(.trailing, 75.0)
                    .foregroundStyle(Color.black)
               
                Text("Spain")
                    .font(.system(size: 13, weight: .regular))
                    .foregroundStyle(Color.secondary)
            }
            .frame(maxWidth: .infinity, maxHeight: 49)
            .background(Color.white)
            .offset(y: 76)
            
            // 优化后的右上角文本视图
            Text("Most Fly-thru")
                .font(.system(size: 13, weight: .medium))
                .foregroundStyle(Color.white)
                .padding(.horizontal, 8)
                .frame(maxHeight: 32)
                .background(
                    Capsule()
                        .foregroundStyle(Color.primary.opacity(0.8))
                )
                .padding([.top, .trailing], 8) // 用padding控制与卡片边缘的间距，替代硬编码offset
        }
        .frame(width: 166, height: 201)
        .clipShape(RoundedRectangle(cornerRadius: 12))
        .overlay {
            RoundedRectangle(cornerRadius: 12)
                .stroke(Color.gray, lineWidth: 1.2)
        }
        .padding()
    }
}

PlaygroundPage.current.setLiveView(CityView())

关键修改说明 #

• 设置ZStack对齐方式：添加alignment: .topTrailing，让右上角文本默认锚定卡片右上角区域，彻底摆脱硬编码偏移的局限性。
• 用padding替代offset：通过.padding([.top, .trailing], 8)控制文本与卡片顶部、右侧的固定间距，确保无论文本长度如何，右侧始终保持一致的边距。
• 自适应宽度与扩展方向：文本背景的Capsule会根据内容长度自适应宽度，结合ZStack的右上角对齐，长文本会自然向左延伸，不会出现从中心扩展导致的遮挡问题。

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