[SwiftUI] DarkMode, Divider, sheet, fullScreenCover, alert, TabView

1. DarkMode

Light

 

Dark

• Assets - Color Set에서 LightMode와 DarkMode에서의 색상을 설정할 수 있음

 

2. Divider

VStack{
    Divider()
    
    HStack{
        Image(systemName: "heart")
        Divider()
            .frame(height: 30)
        Text("Pado")
        Divider()
            .frame(height: 30)
    }
    
    Divider()
        .background(.red)
        .frame(height: 30)
    
    HStack{
        Image(systemName: "heart")
        Divider()
            .frame(height: 30)
        Text("Pado")
        Divider()
            .frame(height: 30)
    }
    
    Divider()
}

• Divider() : 구분선을 추가한다.
• .frame(), .backround()으로 길이, 색상 설정 가능

 

3. sheet

@State var isShowingModal: Bool = false

var body: some View {
    
    Button {
        isShowingModal = true
    } label: {
        Text("Call modal")
    }
    .sheet(isPresented: $isShowingModal){ // @State 변수에 $를 붙이면 Binding 변수
        ZStack {
            Color.orange.ignoresSafeArea()
            Text("Modal View")
        }
    }
}

 

버튼 클릭 전

버튼 클릭 후, 모달

• .sheet : 모달을 보여줌

 

4. fullScreenCover

@State var isShowingModal: Bool = false

var body: some View {
    
    Button("Pado") {
        isShowingModal = true
    }
    
    
    .fullScreenCover(isPresented: $isShowingModal) {
        ZStack{
            Color.orange.ignoresSafeArea()
            VStack{
                Text("Modal View")
                Button{
                    isShowingModal = false
                } label: {
                    Text("dismiss")
                }
            }
        }
    }
}

버튼 클릭 전

버튼 클릭 후, 풀 스크린 커버

• .fullScreenCover : 화면을 꽉채우는 뷰를 보여줌

 

5. alert

@State var isShowingAlter: Bool = false

var body: some View {
    Button{
        isShowingAlter = true
    } label: {
        Text("Show alert!")
    }
    .alert(isPresented: $isShowingAlter){
        Alert(title: Text("This is alert!"),
              primaryButton: .default(Text("OK")),
              secondaryButton: .cancel())
    }
}

버튼 클릭 전

버튼 클릭 후, 알럿

• .alert : 알럿을 띄운다.

 

6.  TabView

TabView {
    ZStack{
        Color.orange
        Text("Pado")
    }
    .tabItem {
        Image(systemName: "heart")
        Text("item1")
    }
    
    Text("Pado")
        .tabItem {
            Label("item2", systemImage: "heart")
        }
}

• TabView : 탭하여 선택할 수 있는 뷰들을 보여줌