Como exibir dados hierárquicos com SwiftUI 4

Quem de vocês nunca enfrentou o problema de exibir estruturas hierárquicas em um aplicativo?

SwiftUI oferece essa possibilidade com apenas algumas linhas de código, usando as visualizações Lists e OutlineGroup . Neste artigo, mostrarei como fazer isso em algumas etapas.

Suponha que precisamos exibir informações hierárquicas em uma exibição de lista, permitindo que o usuário oculte e mostre diferentes seções da hierarquia.

Por exemplo, queremos navegar na seguinte parte de um sistema de arquivos, que inclui diretórios e arquivos. Esta é uma árvore hierárquica típica.

Em seguida, inicie e inicie o Xcode para criar o novo projeto de aplicativo chamado HierarchicalDemo:

O primeiro passo é a criação de uma estrutura que modele um nó da árvore hierárquica. No inspetor de projetos, no grupo Modelo , criamos um arquivo swift chamado NodeInfo.swift e definimos a estrutura NodeInfo :

Cada nodo tem um nome, uma imagem e uma cor que o representam dependendo se é um diretório ou um arquivo, pode ter nodos filhos. A estrutura está em conformidade com o protocolo identificável , de modo que cada instância pode ser identificada exclusivamente na exibição de lista.

struct NodeInfo: Identifiable{
    var id = UUID()
    var name: String
    var image: String
    var color: Color
    var children: [NodeInfo]?
 }

struct NodeCell: View {
    var nodeItem: NodeInfo
    var body: some View {
        HStack{
            Image(systemName: nodeItem.image)
                .resizable()
                .scaledToFit()
                .frame(width: 25,height: 25)
                .foregroundColor(nodeItem.color)
            Text(nodeItem.name)
        }
    }
}

Agora temos um modelo para um nó da hierarquia e uma exibição para uma linha na exibição de lista. O próximo passo é definir na estrutura ContentView o array constante NodeItems que implementa a árvore do sistema de arquivos, acima:

let nodeItems: [NodeInfo] =
    [NodeInfo(name: "ROOT", image: "folder",color: .orange, children:
            [NodeInfo(name:"Documents", image: "folder.circle",color: .blue, children:[NodeInfo(name: "Accounting", image: "folder.circle",color: .blue, children: [NodeInfo(name: "rental.doc", image: "doc.circle",color: .cyan),NodeInfo(name: "invoice1.doc", image: "doc.circle", color: .cyan),NodeInfo(name: "invoice2.doc", image: "doc.circle",color: .cyan)])]),
             NodeInfo(name: "Photo", image: "folder.circle",color: .blue, children: [NodeInfo(name: "Selfie", image: "folder.circle",color:.blue,children: [NodeInfo(name: "john.png", image: "photo.circle",color: .green),NodeInfo(name: "Julie.png", image: "photo.circle",color: .green)]),NodeInfo(name: "mybirthday.png", image: "photo.circle",color: .green)]),
             NodeInfo(name: "Video", image: "folder.circle",color:.blue, children: [NodeInfo(name: "Holiday", image: "folder.circle",color:.blue,children: [NodeInfo(name: "mountins.wav", image: "video.circle",color: .orange),NodeInfo(name: "sea.wav", image: "video.circle",color:.orange)]),NodeInfo(name: "birthday.mp3", image: "video.circle.fill",color:.orange),NodeInfo(name: "cat.wav", image: "video.circle",color:.orange)]),
             NodeInfo(name: "booking.pdf", image: "doc.circle",color: .green)])]

Como queremos que a lista tenha um cabeçalho personalizado, em ContentView.swift definimos uma estrutura SectionHeader :

struct SectionHeader: View{
    var nodeItem: NodeInfo
    var body: some View{
        HStack{
            Image(systemName: nodeItem.image)
                .resizable()
                .scaledToFit()
                .frame(width: 25, height: 25)
            Text(nodeItem.name)
                .font(.title2.bold())
        }
        .foregroundColor(nodeItem.color)
    }
}

Agora é hora de construir nossa lista hierárquica. No corpo do contentView digitamos o código abaixo:

var body: some View {
        List{
            ForEach(nodeItems) { item in
                
                Section(header: SectionHeader(nodeItem: item)){
                    
                    OutlineGroup(item.children ?? [NodeInfo](), children: \.children){child in
                        
                       NodeCell(nodeItem: child)
                        
                    }
                }
            }
        }
        .listStyle(InsetListStyle())
    }

E este é o resultado final: