[SwiftUI] DisclosureGroup, OutlineGroup 간단히 알아보기

SwiftUI의 DisclosureGroup과 OutlineGroup은 iOS14.0부터 사용할 수 있는 뷰.

 

DisclosureGroup과 OutlineGroup은 각각 아래와 같이 생김.

둘다 계층이 있는 리스트 형식을 지원.

똑같이 생겼..지만 구현 및 동작에서 약간의 차이가 있음.

DisclosureGroup / OutlineGroup

 

DisclosureGroup

DisclosureGroup은

isExpanded라는 Binding<Bool>을 받아서, 동적으로 그룹을 열거나 닫도록 컨트롤할 수 있음.

그리고 자식뷰로 DisclosureGroup을 또 넣어서 계층을 더 표현할 수 있음.

struct DisclosureGroupPractice: View {
    let data = ["Hello", "World"]
    let subData = ["Enjoy", "Development", "With Swift"]
    @State var isExpandedRoot: Bool = true
    @State var isExpandedSub: Bool = true
    
    var body: some View {
        Form {
            DisclosureGroup("DisclosureGroup", isExpanded: $isExpandedRoot) {
                ForEach(data, id: \.self) { item in
                    Text("\(item)")
                }
                DisclosureGroup("DisclosureGroup Sub", isExpanded: $isExpandedSub) {
                    ForEach(subData, id: \.self) { item in
                        Text("\(item)")
                    }
                }
            }
        }
    }
}

 

 

OutlineGroup

OutlineGroup은

Data가 identifiable하고 id가 hashable한 값을 넣어주면, DisclosureGroup의 뷰와 같이 표현해주고,

children도 Data로 함께 표현할 수 있음.

(=자식 그룹을 표현하기 위해 OutlineGroup안에 또 OutlineGroup을 넣어주지 않음)

단점으로는 DisclosureGroup처럼 isExpanded를 컨트롤할 수는 없고, 처음엔 항상 닫힌 상태로 그려짐.

 

데이터 예시. 

메뉴 아래에 서브메뉴가 있는 형태의 구조체.

struct MenuItem: Hashable, Identifiable {
    var id = UUID().uuidString
    var name: String
    var children: [MenuItem]? = nil
}

 

뷰 예시.

struct OutlineGroupPractice: View {
    let data: [MenuItem] = [
        MenuItem(name: "통장",
                 children: [
                    MenuItem(name: "입출금통장"),
                    MenuItem(name: "개인사업자통장"),
                    MenuItem(name: "모임통장"),
                    MenuItem(name: "세이프박스")
                 ]),
        MenuItem(name: "대출",
                 children: [
                    MenuItem(name: "신용", children: [
                        MenuItem(name: "신용대출 받기"),
                        MenuItem(name: "신용대출 갈아타기")
                    ]),
                    MenuItem(name: "사업자", children: [
                        MenuItem(name: "개인사업자 신용대출"),
                        MenuItem(name: "개인사업자 보증서대출")
                    ]),
                    MenuItem(name: "자동차", children: [
                        MenuItem(name: "중고차 구매대출")
                    ])
                 ])
    ]
    
    var body: some View {
        Form {
            OutlineGroup(data, children: \.children) { item in
                Text("\(item.name)")
            }
        }
    }
}