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

Question

我用下面的一个简单例子来说明我遇到的问题。这一切都归结为正确地将VStacks 与文本对齐到 a 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")
                }
            }
        }
    }
}

标签： swiftui

Answer 1

这是一种方法。我将Circle和相应的文本放入 anHStack以保持它们对齐。我让其他Circle人管理线路。Circle这使它们与s垂直对齐。

如果要继续此操作，则下一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"])
       ])
    }
}