SwiftUI图表标签设计问题：文本未与竖线居中对齐求助

你当前的问题是竖线和下方文本未居中对齐，核心原因是原布局的对齐逻辑错误，竖线和文本没有绑定到同一水平居中位置。以下是修正后的实现方案：

修正后完整代码 #

struct WeeklyFormatterView: View {
    let texts = ["S", "M", "T", "W", "T", "F", "S"]
    var body: some View {
        VStack(spacing: 4) {
            // 顶部横线+竖线组合
            HStack(spacing: 0) {
                // 第一个标签的竖线
                Rectangle()
                    .frame(width: 1, height: 5)
                    .foregroundColor(.black)
                
                // 循环生成间隔的横线和后续标签的竖线
                ForEach(0..<texts.count-1, id: \.self) { _ in
                    Rectangle()
                        .frame(height: 1)
                        .foregroundColor(.gray)
                        .frame(maxWidth: .infinity)
                    
                    Rectangle()
                        .frame(width: 1, height: 5)
                        .foregroundColor(.gray)
                }
            }
            
            // 底部文本标签行
            HStack(spacing: 0) {
                ForEach(texts, id: \.self) { text in
                    Text(text)
                        .font(.system(size: 9))
                        .frame(maxWidth: .infinity) // 让每个文本占满等宽空间，自动居中
                }
            }
        }
        .padding(.horizontal)
    }
}

关键改动说明 #

• 将竖线和文本分为上下两个平行的HStack结构，确保每个竖线的水平位置与下方文本完全对应
• 每个文本标签通过frame(maxWidth: .infinity)强制占满等宽空间，实现自动居中
• 顶部的横线通过frame(maxWidth: .infinity)填充相邻竖线之间的全部宽度，保证分隔线连贯

这样就能实现竖线与文本完全居中对齐的效果，符合目标样式要求。

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