如何在 HStack 中分隔不同宽度的文本，以便文本中心在 SwiftUI 中正确定位

Question

我创建了一个有 5 个“步骤”的滑块。因此用户可以在“0”到“步骤 1”和“步骤 2”等之间滑动。每个步骤根据滑块的宽度均匀分布。

滑块的外观如下：

| -------- | -------- |--------| -------- |

每个“|”是一个步骤。我想将文本直接对齐在每个“|”下方最左边和最右边的文本要对齐

.leading

 和 

.trailing

。问题是文本长度略有不均匀。因此，有些文本可以是 3 个字母，其他文本可以是 7-8 个字母。如果我使用 HStack 来分隔文本，它无法将中心与中间 3 个步骤的步骤正确对齐。

对齐文本以使文本中心位于台阶正下方的最佳方法是什么。

谢谢

Answer 1

我在评论中建议您在每个标签上设置

frame(maxWidth: .infinity)

。不幸的是，事情并不那么简单，因为第一个和最后一个标签只需要其他标签一半的空间。

另一个复杂之处是，在添加刻度线时，您可能需要添加少量的水平填充，否则滑块按钮不会与开头和结尾的标记对齐。

解决的一种方法是使用

GeometryReader

 来测量可用宽度。然后，您可以将标签分布在此宽度上，允许以您喜欢的任何方式进行水平填充。这是一个例子：

struct ContentView: View {
    let tickPadding: CGFloat = 12
    @State private var value = 0.0

    var body: some View {
        Slider(
            value: $value,
            in: 1...5,
            step: 1,
            label: {}
        )
        .frame(maxWidth: 300)
        .background {
            HStack(spacing: 0) {
                Rectangle().frame(width: 2)
                Spacer()
                Rectangle().frame(width: 2)
                Spacer()
                Rectangle().frame(width: 2)
                Spacer()
                Rectangle().frame(width: 2)
                Spacer()
                Rectangle().frame(width: 2)
            }
            .foregroundStyle(.pink)
            .padding(.horizontal, tickPadding)
        }
        .padding(.bottom, 30)
        .background {
            GeometryReader { proxy in
                let cellWidth = (proxy.size.width - (tickPadding * 2)) / 4
                HStack(spacing: 0) {
                    Text("First").frame(width: (cellWidth / 2) + tickPadding, alignment: .leading)
                    Text("Second").frame(width: cellWidth)
                    Text("Third").frame(width: cellWidth)
                    Text("Fourth").frame(width: cellWidth)
                    Text("Last").frame(width: (cellWidth / 2) + tickPadding, alignment: .trailing)
                }
                .font(.subheadline)
                .frame(maxHeight: .infinity, alignment: .bottom)
            }
        }
    }
}