如何在SwiftUI中实现对齐的偏移文本视图？

你当前的实现用了固定的offset(x: offset)，这个偏移是基于文本自身中心计算的——文本越长，左边缘就越靠左，自然没法对齐到同一条黑色线条。

要让所有文本从图标右侧的固定位置（黑色线条处）开始，你需要把文本的左边缘和图标右边缘绑定，而不是偏移文本中心。修改你的View扩展即可：

extension View {
    func textView(text: String, spacing: CGFloat) -> some View {
        self
            // 以图标右边缘为对齐基准
            .overlay(alignment: .trailing) {
                Text(text)
                    .fixedSize()
                    .bold()
                    // 文本左边缘和图标右边缘保持指定间距
                    .offset(x: spacing)
            }
    }
}

调用时把原来的offset参数换成spacing（即黑色线条与图标右边缘的距离）：

VStack {
    Image(systemName: "dock.arrow.up.rectangle")
        .resizable()
        .scaledToFit()
        .frame(width: 30.0, height: 30.0)
        .textView(text: "FullSizeView", spacing: 20.0)

    Image(systemName: "xmark.circle")
        .resizable()
        .frame(width: 30.0, height: 30.0)
        .textView(text: "Quit", spacing: 20.0)
}

核心逻辑 #

• 用.overlay(alignment: .trailing)把文本的锚点锁定在图标的右边缘
• 通过offset(x: spacing)让文本左边缘和图标右边缘保持固定距离，无论文本长度如何，起始位置完全一致
• 图标始终保持在红色中心线上，不会被文本的布局影响

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