DisclosureGroup 로 접는 뷰 만들기

DisclosureGroup를 사용하면 유저가 긴 내용을 선택적으로 필요할 시 제공하게하여 뷰를 낭비하지 않게 합니다

 

 

 

 

공식 문서에서 확인해보면 아래와 같은 코드를 제공하고 있으며 사용법은 굉장히 간단합니다.

isExpanded: 매개변수를 사용하여 @State 프로퍼티 래퍼를 사용해 뷰의 확장을 추적 및 결정할 수 있습니다.

content: 확장하는 뷰에 포함되는 내용들을 넣습니다.

• DisclosureGroup 내부에 중복으로 DisclosureGroup 을 넣어서 사용할 수도 있습니다.

struct ToggleStates {
    var oneIsOn: Bool = false
    var twoIsOn: Bool = true
}
@State private var toggleStates = ToggleStates()
@State private var topExpanded: Bool = true


var body: some View {
    DisclosureGroup("Items", isExpanded: $topExpanded) {
        Toggle("Toggle 1", isOn: $toggleStates.oneIsOn)
        Toggle("Toggle 2", isOn: $toggleStates.twoIsOn)
        DisclosureGroup("Sub-items") {
            Text("Sub-item 1")
        }
    }
}

 

 

이외에도 다른 initializer 를 제공하고 있으며 다음과 같으 표현될 수 있습니다. (모두 동일하게 동작합니다)

DisclosureGroup(
    content: {
        Toggle("Toggle 1", isOn: $toggleStates.oneIsOn)
        Toggle("Toggle 2", isOn: $toggleStates.twoIsOn)
        DisclosureGroup("Sub-items") {
            Text("Sub-item 1")
        }
    },
    label: { Text("Items") }
)

DisclosureGroup("Items") {
    Toggle("Toggle 1", isOn: $toggleStates.oneIsOn)
    Toggle("Toggle 2", isOn: $toggleStates.twoIsOn)
    DisclosureGroup("Sub-items") {
        Text("Sub-item 1")
    }
}

DisclosureGroup(
    isExpanded: $topExpanded,
    content: {
        Toggle("Toggle 1", isOn: $toggleStates.oneIsOn)
        Toggle("Toggle 2", isOn: $toggleStates.twoIsOn)
        DisclosureGroup("Sub-items") {
            Text("Sub-item 1")
        }
    },
    label: { Text("Items") }
)