SwiftUI 显示/隐藏部分 [英] SwiftUI show/hide sections

问题描述

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

Im trying to build a nested layers menu, like Sketch or Photoshop. Bellow is what I did so far, using VStack with Sections to Group layers.

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

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

Now I am trying to show/hide sublayers, when tapped on the Grouped Layer arrow so that:

有人知道怎么做吗?真的很感激任何帮助！:)

Anyone know how to do that? Really appreciate any help! : )

推荐答案

我给你看一个片段，它是可行的，你可以修改以获得更好的结果.

I show you a snippet, which is workable and you can modify to see Better result.

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

这篇关于SwiftUI 显示/隐藏部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！