SwiftUI中如何让指定视图居中且旁置另一视图并保持基线对齐？

要实现第一个Text在VStack中水平居中，第二个Text紧贴其右侧且保持.firstTextBaseline对齐，同时适配文本内容变化的需求，推荐使用overlay结合对齐指南的方案，无需静态偏移或内边距：

// 假设已定义largeFont和smallFont
let largeFont = Font.system(size: 24)
let smallFont = Font.system(size: 16)

VStack {
    Text("Text")
        .font(largeFont)
        .overlay(
            Text("more")
                .font(smallFont),
            alignment: .trailingFirstTextBaseline
        )
}

方案说明 #

• 主Text依靠VStack默认的水平居中特性，自然处于容器中间位置
• overlay方法将第二个Text叠加在主Text上，指定的.trailingFirstTextBaseline对齐方式同时满足两个要求：
  1. 让第二个Text紧贴主Text的右侧边缘
  2. 保持两者的首行基线对齐
• 该方案完全自适应文本内容变化，布局会根据文本的固有尺寸自动调整，不会出现内容变动后布局错位的问题

如果需要自定义两个文本的间距，可以在overlay的Text外层嵌套HStack并设置spacing：

VStack {
    Text("Text")
        .font(largeFont)
        .overlay(
            HStack(spacing: 4) { // 自定义间距
                EmptyView()
                Text("more")
                    .font(smallFont)
            },
            alignment: .trailingFirstTextBaseline
        )
}

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