skip to Main Content

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.

enter image description here

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! : )

2

Answers


  1. 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) }
            }
        }
     }
    
    Login or Signup to reply.
  2. you can do it like this, i just did it for first section…and of course you should also animate the triangle… 😉 but that is your task 😉

    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()
        }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search