[SwiftUI] 문제 리포트 뷰

이 문제 리포트 뷰는 ContentView에서 버튼을 눌러 올라오는 모달뷰이다.

 

1. NavigationView Title, Toolbar 설정

 

이 부분은 Button 두개와 Text로 만든 것이 아니라,

NavigationView -> ScrollView의 속성으로

NavigationView {
	ScrollView {
    	...
    }
    .navigationTitle("문제 리포트")
    .navigationBarTitleDisplayMode(.inline)
    .toolbar {
    	ToolbarItem(placement: .navigationBarLeading) {
        	Button(action: {
            	presentation.wrappedValue.dismiss()
            }) {
            	Text("취소")
                	.font(.system(size: 18))
            }
            .buttonStyle(.plain)
        }
        ToolbarItem(placement: .navigationBarTrailing) {
        	Button(action: {
            	...
            }) {
            	Text("제출")
                	.font(.system(size: 18))
            }
            .buttonStyle(.plain)
        }
}

 

제출 버튼을 누르면 실행할 로직이 없어서 작성하지 않았다.

 

아무것도 누르지 않았는데 제출 버튼을 누르는 것을 막기 위해선, disabled 속성이 필요하다.

조건으로 아래와 같이 설정했다.

!(isSnow || isRainy || isCloudy || isSleet || isSunny) && (selectedOption == nil)

 

2. 토글

토글을 사용하기 위해선 Bool 변수가 필요하다.

여기선 @State 변수를 만들었다.

@State private var isOn: Bool = false

Toggle(isOn: $isOn)

 

3. 터치로 체크

@State Int 변수를 선언한다.

@State private var selectedOption: Int = 0

VStack {
	HStack {
		if selectedOption == 0 {
			Image(systemName: "checkmark")
				.renderingMode(.original)
				.fontWeight(.bold)
		}
	}
	.contentShape(Rectangle())
	.onTapGesture {
		if selectedOption == 0 {
			selectedOption = nil
		} else {
			selectedOption = 0
		}
	}
    
    
    HStack {
		if selectedOption == 1 {
			Image(systemName: "checkmark")
				.renderingMode(.original)
				.fontWeight(.bold)
		}
	}
	.contentShape(Rectangle())
	.onTapGesture {
		if selectedOption == 1 {
			selectedOption = nil
		} else {
			selectedOption = 1
		}
	}
    
    
    HStack {
		if selectedOption == 2 {
			Image(systemName: "checkmark")
				.renderingMode(.original)
				.fontWeight(.bold)
		}
	}
	.contentShape(Rectangle())
	.onTapGesture {
		if selectedOption == 2 {
			selectedOption = nil
		} else {
			selectedOption = 2
		}
	}
}

 

 

3. 링크

앱에서 링크를 연결하려면

Link(destination: URL(string: "https://www.apple.com")!) {
	Text("피드백을 보내주십시오")
}