NavigationView() & NavigationLink()
네비게이션뷰는 하나만 있으면 된다! 절대로 중첩하지 않기
NavigationView 안에서 .navigationTitle로 접근해 navigationTitle 생성 가능
그리고 타이틀 디스플레이모드도 설정이 가능함
.automatic이 기본값으로 설정되어 있고 스크롤을하게되면 타이틀이 작아지는 형태로 나온다
.inline같은 경우는 위의 경우에서 타이틀이 작은 형태로 나타나는 걸 말함
근데 .large로 해도 .automatic이랑 똑같게 나온다?! 왜인지 모르겠음
그리고 .toolbar를 이용해서 지금의 타이틀을 숨겨줄 수 도 있음
-> 이게 최신 표현
NavigationLink를 사용하면 목적지를 띄울 수 있게됨( 클로져 안에 띄울 뷰를 작성!)
NavigationLink 다음에 오는 파라미터는 다음 뷰의 제목이 된다
그리고 툴바 아이템은 이런식으로 임포트 가능
How to use List()
요렇게 만들어줄 수 있음
어떻게 보면 VStack이랑 비슷하게 느껴진다
ForEach를 통해서 fuits 배열을 가져온 다음에 id 는 자기자신으로 설정하고
각각의 요소를 fruit으로 만든 다음에 Text 뷰에 넣어줬음
또 리스트는 섹션을 추가할 수가 있음
그리고 List의 내용이 되는 ForEach에 .onDelete 메소드를 이용해서
delete action도 손쉽게 구현 가능!
클로져 내부에 내용이 없는데도 delete이 작동한다
화면 상에선 없어지지만 fruits 를 한번 출력해보니 그대로 남아있는 걸 볼 수 있다
코드에서 지워주는 건 간단함 배열의.remove에 indexSet값을 전달해주면 된다
잘 삭제되는 거 확인
이렇게 삭제되는 로직을 메소드로 빼줄 수도 있음
클로져 내부에서 어떤 파라미터가 넘겨질 지 정해져 있기 때문에 이렇게 축약도 가능하다
그리고 하나 팁인데
List를 네비게이션뷰에 넣고 싶다! 근데 지금 코드가 너무 길다!
List를 ZStack에 넣은다음에 ZStack이름만 NavigationView로 바꾸면 됨
이렇게 툴바아이템을 EditButton()으로 넣을 수 있고
onMove 메소드를 가지고와서 fruits 배열의 순서를 바꾸는 것도 가능
indexSet은 기존의 위치, newOffset은 바꿀 위치
move 따로 빼주고,
마찬가지로 축약도 가능
이렇게 버튼 자체를 뷰로 묶어서 깔끔하게 정리도 가능하다
.listStyle에 접근해서 스타일 커스텀도 가능
.tint로 색바꿔주는 것도 가능
이때 섹션에는 따로 집어넣어줘야 색바뀐다
아 그리고 셀의 배경을 주고 싶을 때 요렇게 생각할 수도 있겠지만
이대로는 꽉 안 채워짐
해당섹션에 .listRowBackground로 접근해서 Color 넣어주면 된다!
How to use .alert()
alert을 추가하는 건 생각보다 간단하다
sheet이랑 비슷함
바인딩할 bool 값넣고, 띄울 Alert지정해준다음에
bind된 bool 값 변하게 해주면 됨
이렇게 들어갈 요소들 정해주면된다!!
이렇게 버튼에 따라서 다르게 출력되게도 가능
struct AlertBootcamp: View {
@State var showAlert: Bool = false
@State var backgroundColor: Color = .yellow
@State var alertType: MyAlerts? = nil
enum MyAlerts {
case success
case error
}
var body: some View {
ZStack {
backgroundColor.ignoresSafeArea()
VStack {
Button("Button 1") {
alertType = .error
showAlert.toggle()
}
Button("Button 2") {
alertType = .success
showAlert.toggle()
}
.alert(isPresented: $showAlert) {
getAlert()
}
}
}
}
func getAlert() -> Alert {
switch alertType {
case .error:
return Alert(title: Text("There was an error!"))
case .success:
return Alert(title: Text("This was an success"), message: nil, dismissButton: .default(Text("OK"), action: {
backgroundColor = .green
}))
default:
return Alert(title: Text("Error"))
}
}
}enum을 사용한다면 보다 간편하게 Alert을 나눠줄 수 있겠죠
