SwiftUI中ZStack内VStack的TopTrailing对齐失效问题求助

你的问题出在VStack的frame没有匹配背景圆角矩形的尺寸，同时ZStack默认居中布局，导致.frame(alignment: .topTrailing)无法生效——这个alignment只在frame尺寸大于内容时才会起作用，而你原来的frame是贴合VStack自身内容的，自然无法让内容对齐到右上角。

这里提供两种简洁的解决方案：

方案一：给VStack设置匹配的frame尺寸 #

var body: some View {
    ZStack {
        RoundedRectangle(cornerRadius: 5.0)
            .fill(.white)
            .stroke(.gray, style: StrokeStyle(lineWidth: 2.0))
            .frame(width: 100, height: 150)
            .shadow(color: Color(.black).opacity(0.3), radius: 5)
        
        VStack(spacing: 0) {
            Text("A")
                .font(.callout)
            
            Image(systemName: "heart.fill")
                .resizable()
                .frame(width: 10, height: 10)
        }
        // 设置和背景矩形一致的宽高，指定右上角对齐
        .frame(width: 100, height: 150, alignment: .topTrailing)
        // 添加上右内边距，避免内容贴边框
        .padding(.top, 8)
        .padding(.trailing, 8)
    }
}

方案二：使用Overlay叠加（更推荐） #

直接在圆角矩形上用overlay叠加VStack，自动继承父视图的尺寸，无需重复设置宽高：

var body: some View {
    RoundedRectangle(cornerRadius: 5.0)
        .fill(.white)
        .stroke(.gray, style: StrokeStyle(lineWidth: 2.0))
        .frame(width: 100, height: 150)
        .shadow(color: Color(.black).opacity(0.3), radius: 5)
        // 指定右上角对齐叠加内容
        .overlay(alignment: .topTrailing) {
            VStack(spacing: 0) {
                Text("A")
                    .font(.callout)
                
                Image(systemName: "heart.fill")
                    .resizable()
                    .frame(width: 10, height: 10)
            }
            .padding(.top, 8)
            .padding(.trailing, 8)
        }
}

两种方案都能让你的文字+心形VStack精准定位到圆角矩形的右上角，方案二更符合SwiftUI的布局思维，减少重复代码。

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