Section

[Jinsujin]

• List 의 요소들을 묶어주는 Section
• Section 은 header, footer 로 내용을 구분할 수 있다.

문서 바로가기

• List
• Section

Declaration

struct Section<Parent, Content, Footer>

• Section 은 header, footer 로 영역을 나눌 수 있다.
• header, footer 에 View 를 넣어 원하는대로 꾸밀 수 있다.

init(
    content: () -> Content,
    header: () -> Parent,
    footer: () -> Footer
)

List {
    Section {
        HStack {
            Text("🧋")
            Text("Bubble tea")
        }
        HStack {
            Text("☕️")
            Text("Coffee")
        }
    } header: {
        Text("fruit")
    } footer: {
        Text("fruit footer")
    }
    Section { ... }
    Section { ... }
}

[Jinsujin]

예제

struct MySection: View {
    var body: some View {
        NavigationView {
            List {
                Section {
                    HStack {
                        Text("🧋")
                        Text("Bubble tea")
                    }
                    HStack {
                        Text("☕️")
                        Text("Coffee")
                    }
                } header: {
                    Text("fruit")
                } footer: {
                    Text("fruit footer")
                }

                Section {
                    HStack {
                        Text("🧁")
                        Text("Cupcake")
                    }
                    HStack {
                        Text("🍪")
                        Text("cookie")
                    }
                    HStack {
                        Text("🍦")
                        Text("ice cream")
                    }
                } header: {
                    Text("Dessert")
                } footer: {
                    Text("dessert footer")
                }
            }
            .navigationTitle("Caffee")
        }
    }
}