SwiftUI ListView 11 - ListView 제목 펼칠 수 있게

리스트뷰 제목을 누르면 세부 항목이 나오게 하는 방법

 

 

 

import SwiftUI

 

struct Place: Identifiable{

    let id = UUID()

    let name: String

    let hikes: [Hike]

}

 

struct Hike: Identifiable{

    let id = UUID()

    let name: String

}

 

 

private func getAllPlaceWithHikes() ->[Place]{

    return[

    Place(name: "서울", hikes: [Hike(name: "북한산"),Hike(name: "한강"),Hike(name: "남산")]),

    Place(name: "경기도", hikes: [Hike(name: "운정호수"),Hike(name: "구미공원"),Hike(name: "중미산")])

    ]

}

 

 

struct ContentView: View {

    @State private var places = getAllPlaceWithHikes()

    @State private var selectedName: String?

    @State private var expanded: Bool = false

    

    var body: some View {

        List(places){place in

            VStack (alignment:.leading){

                HStack {

                    Text(place.name)

                        .fontWeight(.bold)

                        .padding(.bottom, 10)

                        .padding(.top, 10)

                    

                    Spacer()

                    Image(systemName: selectedName == place.name ? "chevron.down" : "chevron.right")

                }

                .contentShape(Rectangle())

                .onTapGesture(perform: {

                    expanded.toggle()

                    selectedName = expanded ? place.name: nil

                })

                

                if selectedName == place.name {

                    ForEach(place.hikes){hike in

                        Text(hike.name)

                        Spacer()

                    }

                }

          

            }

            

        }

    }

}

 

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

 

 

리스트뷰의 제목만 표시

 

 

선택한 항목의 세부내용이 표시됨