Dynami c высота для фигур в SwiftUI

Question

Вот минимальный воспроизводимый пример того, что я хочу сделать.

У меня есть массив абзацев.

var notes = [
    "One line paragraph",
    "This is a small paragraph. This is a small paragraph. This is a small paragraph. This is a small paragraph.",
    "This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph."
]

Вот как я хочу отобразить это:

Вот мой код.

struct ContentView: View {
    var notes = [
        "One line paragraph",
        "This is a small paragraph. This is a small paragraph. This is a small paragraph. This is a small paragraph.",
        "This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph. This is a big paragraph."
    ]

    var body: some View {
        VStack(alignment: .leading) {
            ForEach(self.notes, id: \.self) {note in
                HStack {
                    Capsule()
                        .fill(Color.blue)
                        .frame(width: 4.5)

                    Text(note)
                    .lineLimit(nil)
                }
                .padding()
            }

        }
    }
}

Это вывод, который я получил:

Я даже пытался добавив Spacer() в конец VStack (после ForEach), но результат остается тем же.

Я хочу знать, как изменить высоту этих синих вертикальные полосы по высоте соответствующих им пунктов , как на первом скриншоте.

Answer 1

Здесь возможен подход. Протестировано с Xcode 11.4 / iOS 13.4

var body: some View {
    VStack(alignment: .leading) {
        ForEach(self.notes, id: \.self) {note in
            HStack {
                Text(note)
                    .padding(.leading)
            }
            .overlay(Capsule()       // also can be .background
                        .fill(Color.blue)
                        .frame(width: 4.5), alignment: .leading)
            .padding()
        }
    }
}