Swiftui 如何在不同堆栈之间水平对齐多个对象

我用下面一个简单的例子来说明我的问题。这一切归结为将

VStack

s与

圆圈中的文本正确对齐。这就是我想要得到的形象。有没有什么方法可以不使用硬编码的填充物而正确对齐


这是生成左图像的代码

struct MyAlignedView: View {
    var body: some View {
        HStack {
            VStack(alignment: .center, spacing: 10) {
                Circle()
                    .frame(width: 20, height: 20)
                Text("|")
                Circle()
                    .frame(width: 20, height: 20)
                Text("|")
                Circle()
                    .frame(width: 20, height: 20)
            }
            
            VStack {
                VStack{
                    Text("stack 1")
                }
                
                VStack{
                    Text("stack 2")
                    Text("text2")
                    Text("more text")
                }
                
                VStack{
                    Text("stack 3")
                    Text("text3")
                }
            }
        }
    }
}

这里有一个方法。我将
圆圈
和相应的文本放入
HStack
以保持对齐。我让每隔一个
圈
来管理这些行。这使它们与
圆
s垂直对齐

如果继续此操作，则下一个
圆将有两行，如果是最后一行，则有一行和一个空格

struct ContentView: View {
    var body: some View {
        HStack {
            VStack(alignment: .center, spacing: 0) {
                HStack {
                    Circle()
                        .frame(width: 20, height: 20)
                    Text("stack 1")
                        .frame(width: 80, height: 40)
                }
                HStack {
                    VStack {
                        Text("|")
                        Circle()
                            .frame(width: 20, height: 20)
                        Text("|")
                    }
                    VStack {
                        Text("stack 2")
                        Text("text2")
                        Text("more text")
                    }
                    .frame(width: 80, height: 40)
                }
                HStack {
                    Circle()
                        .frame(width: 20, height: 20)
                    VStack {
                        Text("stack 3")
                        Text("text3")
                    }
                    .frame(width: 80, height: 40)
                }
            }
        }
    }
}



有很多冗余需要管理。这可以放入一个循环中，该循环可以自动确定要添加和/或隐藏哪些行：

struct TextLines {
    let lines: [String]
}

struct BulletPoints: View {
    let textLines: [TextLines]
        
    var body: some View {
        HStack {
            VStack(alignment: .center, spacing: 0) {
                ForEach(0 ..< textLines.count) { idx in
                    HStack {
                        VStack {
                            if !idx.isMultiple(of: 2) {
                                Text("|")
                            }
                            Circle()
                                .frame(width: 20, height: 20)
                            if !idx.isMultiple(of: 2) {
                                Text("|").opacity(idx == self.textLines.count - 1 ? 0 : 1)
                            }
                        }
                        VStack {
                            ForEach(self.textLines[idx].lines, id: \.self) { line in
                                Text(line)
                            }
                        }
                        .frame(width: 80, height: 40)
                    }
                }
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        BulletPoints(textLines: [
           .init(lines: ["stack1"]),
           .init(lines: ["stack 2", "text2", "more text"]),
           .init(lines: ["stack 3", "text3"]),
           .init(lines: ["stack 4"])
       ])
    }
}

struct文本行{
让行：[字符串]
}
结构点：视图{
让文本行：[文本行]
var body：一些观点{
HStack{
VStack（对齐：。中心，间距：0）{
ForEach（0..

我会在
VStack
中尝试三个
HStack
视图。对于有两行的视图，首先将它们放在“VStack”中。@koen我知道你的意思，但这会弄乱“|”符号