问题
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! : )
回答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) }
}
}
}
回答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()
}
}
来源：https://stackoverflow.com/questions/58891876/swiftui-show-hide-sections