Выравнивание прокрутки

Question

У меня есть следующее:

            VStack(alignment: .leading) {

                ScrollView(.vertical, showsIndicators: false) {

                    VStack(alignment: .leading, spacing: 30) {
                        ForEach(0 ..< meals.count) { count in
                            HStack(alignment: .center,spacing: 120){
                                VStack{
                                    Text("\(count + 1) ")
                                    .foregroundColor(Color.black)
                                    .padding(.horizontal, 8)
                                    .padding(.vertical, 5)
                                    .background(
                                        Capsule()
                                            .fill(Color.black)
                                            .opacity(0.20)
                                    )
                                }

                                VStack{
                                    Text("\(self.meals[count]) ")
                                    .foregroundColor(Color.black)
                                }

                                VStack{
                                    Image(systemName: "pencil")
                                    .foregroundColor(Color.black)
                                    .font(.system(size: 20))
                                    .background(Color.yellow)
                                }

                            }
                        }
                    }
                    .frame(width: UIScreen.main.bounds.width) // set a fixed width
//                        .background(Color.green)
                }
                .frame(height: 185)
                .frame(maxWidth: 400)
                .padding(.top, -200)
            }

Как сделать так, чтобы значок карандаша оставался справа? Я попытался поставить alignment: .trailing, но это не сработало.

Я видел пример с геометрией, но затем представление с прокруткой становится странным, мне это нужно. Кроме того, как я могу убедиться, что ширина между элементами остается одинаковой на всех устройствах?

Answer 1

Вместо жесткого кодирования используйте Spacer(), который напоминает подпункты пружины pu sh.

Примечание: вам не нужно VStack только для одного подпредставления, поэтому его можно удалить для простоты.

Вот итоговая строка:

HStack { // .center is by default, so also remove
    Text("\(count + 1) ")
        .foregroundColor(Color.black)
        .padding(.horizontal, 8)
        .padding(.vertical, 5)
        .background(
            Capsule()
                .fill(Color.black)
                .opacity(0.20)
        )

    Spacer()           // << here !!

    Text("\(self.meals[count]) ")
        .foregroundColor(Color.black)

    Spacer()           // << here !!

    Image(systemName: "pencil")
        .foregroundColor(Color.black)
        .font(.system(size: 20))
        .background(Color.yellow)
}