SwiftUI中如何实现垂直文本与上方矩形的对齐？

问题原因 #

你当前的实现是先绘制水平布局的线条和文本，再整体旋转90度。旋转操作在视图布局完成后执行，导致父容器的对齐规则无法正确作用于旋转后的视图，最终出现未靠右置顶的问题。

解决方案 #

通过调整旋转锚点、优化布局结构、修正容器对齐方式来解决：

• 把旋转锚点设为左上角（.topLeading），让旋转后的视图位置更易控制
• 直接绘制垂直线条，避免多余旋转带来的布局混乱
• 让外层HStack以顶部对齐，确保垂直文本和左侧内容顶部对齐
• 修正旋转后的对齐指南，适配坐标系变化

修改后的完整代码 #

struct ArticleHeaderView<ViewModel: ArticleHeaderViewModeling & ObservableObject>: View {
    let viewModel: ViewModel
    var body: some View {
        HStack(alignment: .top) { // 设置HStack顶部对齐
            VStack(alignment: .leading) {
                titleText()
                dateText()
                if viewModel.isShowingAuthorText {
                    authorText()
                }
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.trailing, 8)
            
            verticalTextView()
                .alignmentGuide(.top) { $0[.bottom] } // 修正旋转后的顶部对齐逻辑
        }
        .frame(maxWidth: .infinity, alignment: .topTrailing) // 整个头部容器靠右置顶
    }
    
    // MARK: Private
    private func titleText() -> some View {
        Text(viewModel.titleText)
            .font(Font.custom("Suisse Int'l Mono", size: 26))
            .foregroundColor(.black)
            .padding(.top, 40)
    }
    
    private func dateText() -> some View {
        Text(viewModel.dateText)
            .font(Font.custom("Suisse Int'l Mono", size: 12))
            .foregroundColor(.black)
            .lineSpacing(16)
            .padding(.top, .Spacer.md)
    }
    
    private func authorText() -> some View {
        Text(viewModel.authorText)
            .font(Font.custom("Suisse Int'l Mono", size: 12))
            .foregroundColor(.black)
            .lineSpacing(16)
            .padding(.top, .Spacer.md)
    }
    
    private func verticalTextView() -> some View {
        VStack(spacing: 8) { // 用VStack直接排列竖线和文本，无需先水平布局再旋转
            Rectangle()
                .fill(.gray)
                .frame(width: 1, height: 16) // 直接绘制垂直短线
            Text(viewModel.verticalText)
                .font(Font.custom("Suisse Int'l Mono", size: 12))
                .fixedSize()
                .foregroundColor(.black)
        }
        .rotationEffect(Angle(degrees: -90), anchor: .topLeading) // 以左上角为锚点旋转-90度
        .offset(x: 16) // 微调偏移，确保位置符合预期
    }
}

额外说明 #

• 旋转角度用-90度是为了实现文本垂直向上的样式（如果需要向下排列，改成90度即可）
• .offset(x: 16)的数值可以根据实际显示效果调整，让竖线和文本的位置更精准
• 外层的.frame(maxWidth: .infinity, alignment: .topTrailing)确保整个头部视图靠右置顶，垂直文本自然跟随对齐

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