SwiftUI中如何在固有尺寸VStack内实现内容右对齐

需求明确：让日期字符串10.5.2020在父VStack内右对齐，但绝对不能破坏VStack的固有尺寸——也就是VStack的宽度始终由内部最宽的子视图决定，不能被强制拉伸。

常见的两种方案均不符合要求：

• 用HStack包裹日期文本并在左侧加Spacer：会让HStack占满父容器宽度，进而撑宽整个VStack
• 给日期文本设置frame(maxWidth: .infinity, alignment: .trailing)：同样会强制拉伸父VStack的宽度

试过自定义对齐指南但未成功，用GeometryReader匹配VStack宽度的方法在复杂布局下会引发问题，并非最优解。

解决方案：自定义对齐指南 #

通过定义自定义对齐指南，让日期文本对齐到VStack的右边缘，同时完全保留VStack的固有尺寸。

修改后的代码如下：

// 定义自定义对齐指南
private extension HorizontalAlignment {
    enum VStackTrailing: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[HorizontalAlignment.trailing]
        }
    }
    static let vStackTrailing = HorizontalAlignment(VStackTrailing.self)
}

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("Alignment Test")
                        Text("This is a longer text left aligned")
                        
                        // 将日期对齐到自定义的VStack右边缘参考线
                        Text("10.5.2020")
                            .alignmentGuide(.vStackTrailing) { $0[.trailing] }
                    }
                    // 给VStack本身设置对齐参考，明确右边缘位置
                    .alignmentGuide(.vStackTrailing) { $0[.trailing] }
                    .padding(16)
                    .background(Color.blue)
                    
                    Spacer(minLength: 50)
                }
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("left")
                        Text("Date should right align to here <-")
                        
                        Text("10.5.2020")
                            .alignmentGuide(.vStackTrailing) { $0[.trailing] }
                    }
                    .alignmentGuide(.vStackTrailing) { $0[.trailing] }
                    .padding(16)
                    .background(Color.blue)
                    
                    Spacer(minLength: 50)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .border(.red)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray.opacity(0.5))
    }
}

原理说明 #

1. 自定义vStackTrailing对齐指南，默认值绑定视图的右边缘
2. 给VStack本身设置该对齐指南，将VStack的右边缘作为统一对齐参考线
3. 给日期文本绑定同样的对齐指南，让它的右边缘精准对齐到VStack的右边缘

这种方式下，VStack的宽度依然由内部最宽的子视图决定，完全保留固有尺寸，同时日期文本实现了预期的右对齐效果。

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