SwiftUI show/hide sections - Photoshop

ManeManero
November 16, 2019
253 views
0 votes
2 Answers

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

Answers

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

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

Please signup or login to give your own answer.

Click here to cancel reply.

SwiftUI show/hide sections – Photoshop

Answers