SwiftUI显示/隐藏部分

Question

我正在尝试构建一个嵌套的图层菜单，例如Sketch或Photoshop。 到目前为止，贝娄是我所做的，将VStack与Sections分组在一起。

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

我向您展示了一个可行的代码段，您可以对其进行修改以查看更好的结果。

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