SwiftUI：实现HStack内视图居中与右侧视图首文本基线对齐

你需要实现两个布局目标：一是让显示“Swift View”的视图在容器中居中；二是让右侧的视图与第一个Text视图的firstTextBaseline对齐。以下是更简洁的实现方案，无需额外添加冗余的GeometryReader：

优化后代码 #

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

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .subCentre) {
            // 用透明颜色视图撑满父容器，定位自定义对齐基准
            Color.clear
                .alignmentGuide(.subCentre) { $0.width / 2 }
            
            HStack(alignment: .firstTextBaseline) {
                Text("Swift View")
                    .foregroundColor(.white)
                    .font(.largeTitle)
                    .padding(35)
                    .background(
                        LinearGradient(
                            colors: [.orange, .red],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .cornerRadius(20)
                    .alignmentGuide(.subCentre) { $0.width / 2 }
                
                Text("test")
            }
        }
    }
}

方案说明 #

• 用ZStack替代原有的VStack+GeometryReader组合，通过Color.clear视图自动撑满父容器，配合自定义对齐指南subCentre，直接实现“Swift View”视图的居中定位，结构更直观简洁。
• 保留原HStack的.firstTextBaseline对齐设置，确保右侧“test”文本与“Swift View”的首行基线保持对齐，满足第二个布局要求。

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