如何使用动态文本将 alignment 保留在列表中 - SwiftUI

Question

I've got a list of items that display a title, a subheading and their distance. The subheading and title can both change in size and may be smaller or large depending on data. The problem is I want the Text(distance) to remain in the same position regardless of the heading or subheading size.

    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)
        }
    }

I've got some circles in there too that are based on the design, but they can be ignored. My issue is towards the bottom of the HStack. Trying to add padding etc. hasn't worked and causes strange renders of the view.

Answer 1

I would have added this as a comment, however, I am not sure what you mean by keeping the Text("\(distance)") the same position.

You may be able to use a ZSTack and then set the .offset of the Text field, but this would mean that the distance text may overlap the other text