2. SwiftUI 탭 하여 화면 전환하기

tab view not using tabview (?)

 

화면을 구성하다 보면, TabView를 이용하지 않고 버튼을 클릭해서 현재 뷰를 바꾸고 싶을 때가 있다.

이는 State variable을 이용하여 특정 조건이 만족되었을 때 view를 불러오도록 설정하면 된다.

 

우선 body 위에 다음과 같은 property를 설정한다.

// 현재 클릭된 버튼 추적
@State var clickedIndex: Int = 0

// 화면에 표시할 텍스트 모음
let categories: [String] = ["TV SHOW", "MOVIE", "COMEDY"]

 

다음은 구상한 UI 에 맞게 적절히 구현해 준다. 

• indices 를 이용해 리스트의 값 대신 index를 이용
• 버튼을 클릭하면 clickedIndex를 수정하게 하여 UI 자동 변환
• 버튼 텍스트의 modifier에는 조건문을 넣어 clickedIndex가 변환되면 적절히 수정되게 작성
• Divier()와 Spacer()를 이용하여 적절히 components 배치

다른 건 별 것 없다

VStack {
	// 옆으로 버튼 나열
	HStack {
		ForEach(categories.indices) { i in
			Button(action: {
				clickedIndex = i
			}, label: {
				Text(categories[i])
					.foregroundColor(i == clickedIndex ? .black : .gray)
					.font(i == clickedIndex ? .system(size: 17).bold(): .system(size: 17))
			})
			.padding()
		}
	}
	.foregroundColor(.gray)
	
	Divider()
		
	Spacer()
	Text(categories[clickedIndex])
	Spacer()
}