[SwiftUI] List, Section, Spacer, Color

1. List

List{
    HStack{
        Image(systemName: "heart")
        Text("PADO")
    }
    HStack{
        Image(systemName: "heart.fill")
        Text("ARI")
    }
    HStack{
        Image(systemName: "bolt")
        Text("WAVE")
    }
}

• 뷰들을 리스트로 만들어준다.

 

2. Section

List{
    Section{
        HStack{
            Image(systemName: "heart")
            Text("PADO")
        }
        HStack{
            Image(systemName: "heart.fill")
            Text("ARI")
        }
        HStack{
            Image(systemName: "bolt")
            Text("WAVE")
        }
    } header: {
        Text("A Class")
    } footer: {
        Text("Footer")
    }
    
    
    Section{
        HStack{
            Image(systemName: "heart")
            Text("PADO")
        }
        HStack{
            Image(systemName: "heart.fill")
            Text("ARI")
        }
        HStack{
            Image(systemName: "bolt")
            Text("WAVE")
        }
    } header: {
        Text("B Class")
    } footer: {
        Text("Footer")
    }
    
    Section{
        HStack{
            Image(systemName: "heart")
            Text("PADO")
        }
        HStack{
            Image(systemName: "heart.fill")
            Text("ARI")
        }
        HStack{
            Image(systemName: "bolt")
            Text("WAVE")
        }
    } header: {
        Text("C class")
    } footer: {
        Text("copy right")
    }
}

• 리스트를 묶어준다.
• header, footer도 달아줄 수 있다.

 

3. Spacer

VStack {
    Image(systemName: "heart")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 200)
    
    Spacer()
    
    HStack{
        Image(systemName: "heart")
        Spacer()
        Text("Text")
    }.padding(.horizontal, 30)
    
    Spacer()
    
    Button{
        print("Blink!")
    } label: {
        Text("Hit!")
    }
}

• 뷰 사이에 간격을 준다.
• 같은 뷰 안에 있는 Spacer는 간격이 동일

 

4. Color

Color(.blue).edgesIgnoringSafeArea(.all)
    .frame(width: 300, height: 200)
    .clipShape(RoundedRectangle(cornerRadius: 30))

Color(red: 0.5, green: 0.4, blue: 0.5)
Color(hue: 0.3, saturation: 0.2, brightness: 0.7)
Color(.gray)
Color("PadoColor")

• RGB나 HSB로 설정 가능
• .gray와 같은 기본 컬러셋이 있음
• Assets에서 Color Set을 추가하여 사용할 수 있음