swiftui - 如何在不同 Stack 之间水平对齐多个对象

Question

我在下面用一个简单的例子来说明我遇到的问题。这一切都归结为将 VStack 与文本正确对齐到 Circle。这就是我想要达到的效果。有没有什么方法可以在不使用硬编码填充的情况下正确对齐事物？

这是生成左图的代码

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

Answer 1

这是一种方法。我将 Circle 和相应的文本放入 HStack 中以保持它们对齐。我让所有其他 Circle 管理线条。这使它们与 Circle 垂直对齐。

如果您继续这样做，下一个 Circle 将有两行，如果是最后一个，则为一行和一个空格。

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