Cara menampilkan data hierarkis dengan SwiftUI 4

Siapa di antara Anda yang tidak pernah menghadapi masalah menampilkan struktur hierarki dalam aplikasi?

SwiftUI menawarkan kemungkinan ini hanya dengan beberapa baris kode, menggunakan tampilan Lists dan OutlineGroup . Pada artikel ini saya akan menunjukkan kepada Anda bagaimana melakukannya dalam beberapa langkah.

Misalkan kita perlu menampilkan informasi hierarki dalam tampilan Daftar, memungkinkan pengguna untuk menyembunyikan dan menampilkan bagian hierarki yang berbeda.

Misalnya, kami ingin menavigasi bagian berikut dari sistem file, yang mencakup direktori dan file. Ini adalah pohon hierarki yang khas.

Kemudian mulai dan luncurkan Xcode untuk membuat proyek Aplikasi baru bernama HierarchicalDemo:

Langkah pertama adalah pembuatan struktur yang memodelkan simpul pohon hierarkis. Di inspektur proyek, di bawah grup Model , kami membuat file cepat bernama NodeInfo.swift dan menentukan struktur NodeInfo :

Setiap node memiliki nama, gambar, dan warna yang mewakilinya tergantung pada apakah itu direktori atau file, dapat memiliki node anak. Strukturnya sesuai dengan protokol yang dapat diidentifikasi , sehingga setiap instance dapat diidentifikasi secara unik dalam tampilan Daftar.

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

Sekarang kami memiliki model untuk simpul hierarki dan tampilan baris dalam tampilan Daftar. Langkah selanjutnya adalah mendefinisikan dalam struktur ContentView array konstan NodeItems yang mengimplementasikan pohon sistem file, di atas:

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

Karena kami ingin daftar memiliki header khusus, di ContentView.swift kami mendefinisikan struct 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)
    }
}

Sekarang saatnya untuk membangun daftar hierarki kita. Pada contentView body kita ketikkan kode di bawah ini:

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

Dan inilah hasil akhirnya: