SwiftUI 显示/隐藏部分

Question

我正在尝试构建嵌套图层菜单，例如 Sketch 或 Photoshop。 Bellow 是我迄今为止所做的，使用 VStack 和 Sections to Group 图层。

import SwiftUI

struct NestedList: View {
    var body: some View {


        ScrollView {

        VStack {

            Section (header:   HStack {
                          Image(systemName: "arrowtriangle.down")
                              .accentColor(.black)
                          Text("Layer Group 1")

                      }) {

            HStack {
                Image(systemName: "arrowtriangle.right")
                    .accentColor(.black)
                Text("Layer 1")

            }

              HStack {
                          Image(systemName: "arrowtriangle.right")
                              .accentColor(.black)
                          Text("Layer 1")

                      }



            }


            Section (header:   HStack {
                          Image(systemName: "arrowtriangle.down")
                              .accentColor(.black)
                          Text("Layer Group 2")

                      }) {

            HStack {
                Image(systemName: "arrowtriangle.right")
                    .accentColor(.black)
                Text("Layer 1")

            }

              HStack {
                          Image(systemName: "arrowtriangle.right")
                              .accentColor(.black)
                          Text("Layer 1")

                      }


                 }
            }
        }
    }
}

struct NestedList_Previews: PreviewProvider {
    static var previews: some View {
        NestedList()
    }
}

现在我正在尝试显示/隐藏子图层，当点击分组图层箭头时：

有人知道怎么做吗？非常感谢任何帮助！ :)

Answer 1

我给你看一个sn-p，它是可行的，你可以修改以获得更好的结果。

struct Node : Identifiable{
    var id = UUID()
    var value: String = ""
    var children :[Node] = []
    var isSubNode : Bool {
        return children.count != 0
    }
}

struct NodeView: View {
    var node: Node
    var level: Int
    @State var showChildren: Bool = false
    
    var body: some View {
        Section(header:   HStack {
            ForEach(0..<level){ _ in Image(systemName:"arrowtriangle.up").foregroundColor(Color.white)}
            Image(systemName: showChildren ? "arrowtriangle.down" : node.isSubNode ? "arrowtriangle.right" : "arrowtriangle.up")
                .foregroundColor(node.isSubNode  ? .black: .white)
            Text(node.value)
        }.onTapGesture {
            if self.node.isSubNode {
                self.showChildren.toggle()
            }
        }) {
            if showChildren {
                ForEach(node.children, id: \.id){
                    NodeView(node: $0, level:  self.level + 1).frame(width: 400, alignment: .leading)
                }
            }
        }
    }
}

struct NestedList: View {
    var rootNodes: [Node] = [Node(value: "Layer Group1", children: [Node(value: "Layer 1" , children: [Node(value: "Layer2", children: [Node(value:"Layer 3", children: [Node(value: "Layer 4")])])]), Node(value: "Layer 1")]),
                             Node(value: "Layer Group2", children: [Node(value: "Layer 1", children: [Node(value:"Layer 2")]), Node(value: "Layer 1")]),
    ]
    
    var body: some View {
        ScrollView {
            ForEach(rootNodes, id: \.id){NodeView(node: $0, level: 0).frame(width: 400, alignment: .leading) }
        }
    }
 }

Answer 2

你可以这样做，我只是为第一部分做的......当然你也应该为三角形制作动画......;）但这是你的任务;）

struct NestedList: View {

    @State var collapsedSection1 = false

    var body: some View {


        ScrollView {

            VStack {
                Section (header:   HStack {
                    Image(systemName: "arrowtriangle.down")
                        .accentColor(.black)
                    Text("Layer Group 1")

                }) {
                    if collapsedSection1 {
                        EmptyView()
                    } else {
                        Group {
                            HStack {
                                Image(systemName: "arrowtriangle.right")
                                    .accentColor(.black)
                                Text("Layer 1")

                            }

                            HStack {
                                Image(systemName: "arrowtriangle.right")
                                    .accentColor(.black)
                                Text("Layer 1")

                            }
                        }
                    }
                }.onTapGesture {
                    withAnimation {
                        self.collapsedSection1.toggle()
                    }
                }

                Section (header:   HStack {
                    Image(systemName: "arrowtriangle.down")
                        .accentColor(.black)
                    Text("Layer Group 2")

                }) {

                    HStack {
                        Image(systemName: "arrowtriangle.right")
                            .accentColor(.black)
                        Text("Layer 1")

                    }

                    HStack {
                        Image(systemName: "arrowtriangle.right")
                            .accentColor(.black)
                        Text("Layer 1")

                    }


                }
            }
        }
    }
}

struct NestedList_Previews: PreviewProvider {
    static var previews: some View {
        NestedList()
    }
}