[SwiftUI] 입문2 - Section 사용해보기 (content, header, footer 활용)

 

 

1. 기본 예제

 

//
//  ContentView.swift
//  MyFirstSwiftui
//

import SwiftUI

struct Person {
    let name: String
    let imageName: String
}

struct ContentView: View {
    var body: some View {
        let people: [Person] = [
            Person(name:"Kim", imageName:"heart"),
            Person(name:"Lee", imageName:"bolt"),
            Person(name:"Song", imageName:"newspaper"),
            Person(name:"Moon", imageName:"house"),
            Person(name:"Hwang", imageName:"building"),
            Person(name:"Lim", imageName:"person"),
            Person(name:"Hong", imageName:"house.fill")
        ]
        List{
            HStack {
                Image(systemName:people[0].imageName)
                Text(people[0].name)
            }
            HStack {
                Image(systemName:people[1].imageName)
                Text(people[1].name)
            }
            HStack {
                Image(systemName:people[2].imageName)
                Text(people[2].name)
            }
            HStack {
                Image(systemName:people[3].imageName)
                Text(people[3].name)
            }
            HStack {
                Image(systemName:people[4].imageName)
                Text(people[4].name)
            }
            HStack {
                Image(systemName:people[5].imageName)
                Text(people[5].name)
            }
            HStack {
                Image(systemName:people[6].imageName)
                Text(people[6].name)
            }
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

 

 

2. Section 적용해보기

 

//
//  ContentView.swift
//  MyFirstSwiftui
//

import SwiftUI

struct Person {
    let name: String
    let imageName: String
}

struct ContentView: View {
    var body: some View {
        let people: [Person] = [
            Person(name:"Kim", imageName:"heart"),
            Person(name:"Lee", imageName:"bolt"),
            Person(name:"Song", imageName:"newspaper"),
            Person(name:"Moon", imageName:"house"),
            Person(name:"Hwang", imageName:"building"),
            Person(name:"Lim", imageName:"person"),
            Person(name:"Hong", imageName:"house.fill")
        ]
        List{
            Section {
                HStack {
                    Image(systemName:people[0].imageName)
                    Text(people[0].name)
                }
                HStack {
                    Image(systemName:people[1].imageName)
                    Text(people[1].name)
                }
            }
            Section {
                HStack {
                    Image(systemName:people[2].imageName)
                    Text(people[2].name)
                }
                HStack {
                    Image(systemName:people[3].imageName)
                    Text(people[3].name)
                }
                HStack {
                    Image(systemName:people[4].imageName)
                    Text(people[4].name)
                }
                HStack {
                    Image(systemName:people[5].imageName)
                    Text(people[5].name)
                }
            }
            Section {
                HStack {
                    Image(systemName:people[6].imageName)
                    Text(people[6].name)
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

 

 

3. Section에서 content, header, footer 사용해보기

 

//
//  ContentView.swift
//  MyFirstSwiftui
//

import SwiftUI

struct Person {
    let name: String
    let imageName: String
}

struct ContentView: View {
    var body: some View {
        let people: [Person] = [
            Person(name:"Kim", imageName:"heart"),
            Person(name:"Lee", imageName:"bolt"),
            Person(name:"Song", imageName:"newspaper"),
            Person(name:"Moon", imageName:"house"),
            Person(name:"Hwang", imageName:"building"),
            Person(name:"Lim", imageName:"person"),
            Person(name:"Hong", imageName:"house.fill")
        ]
        List{
            Section {
                HStack {
                    Image(systemName:people[0].imageName)
                    Text(people[0].name)
                }
                HStack {
                    Image(systemName:people[1].imageName)
                    Text(people[1].name)
                }
            } header: {
                Text("header - Class A")
            } footer: {
                Text("footer - Class A")
            }
            
            Section {
                HStack {
                    Image(systemName:people[2].imageName)
                    Text(people[2].name)
                }
                HStack {
                    Image(systemName:people[3].imageName)
                    Text(people[3].name)
                }
                HStack {
                    Image(systemName:people[4].imageName)
                    Text(people[4].name)
                }
                HStack {
                    Image(systemName:people[5].imageName)
                    Text(people[5].name)
                }
            } header: {
                Text("header = Class B")
            }
            Section {
                HStack {
                    Image(systemName:people[6].imageName)
                    Text(people[6].name)
                }
            } header: {
                Text("header - Class C")
            } footer: {
                Text("Copy right by Growing Saja")
            }

        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

header의 text는 모두 대문자로 출력된다는 특징이 있습니다.