如何使用動態文本將 alignment 保留在列表中 - SwiftUI

Question

我有一個顯示標題、副標題及其距離的項目列表。 副標題和標題的大小都可以改變，並且可以根據數據變小或變大。 問題是無論標題或副標題大小如何，我都希望文本（距離）保持在相同的 position 中。

    var body: some View {
        VStack {
            Divider()
            HStack {
                Circle()
                    .fill(index < 7 ? .blue : .white)
                    .frame(width: 10, height: 10)
                    .padding(.leading, 4)

                Circle()
                    .fill(getColor(index: index))
                    .scaledToFit()
                    .frame(height: 35)
                    .clipShape(Circle())

                HStack {
                    VStack (alignment: .leading) {
                        Text(title)
                            .fontWeight(.medium)
                            .minimumScaleFactor(20)
                            .foregroundColor(.black)

                        Text(subheading)
                            .font(.subheadline)
                            .lineLimit(2)
                            .foregroundColor(.secondary)
                            .multilineTextAlignment(.leading)
                    }
                }
                Text("\(distance)")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                
                Spacer()
                Spacer()
            }.frame(maxWidth: .infinity)
        }
    }

我也有一些基於設計的圓圈，但可以忽略它們。 我的問題是針對 HStack 的底部。 嘗試添加填充等無效，並導致視圖呈現奇怪的效果。

Answer 1

我會添加這個作為評論，但是，我不確定你所說的保持Text("\(distance)")相同 position 是什么意思。

您可以使用ZSTack ，然后設置文本字段的.offset ，但這意味着距離文本可能會與其他文本重疊