[SwiftUI] TextField와 Toggle 사용하기

설정 페이지나 로그인 페이지에서 많이 사용하는 TextField와 Toggle

Life Cycle은 SwiftUI app으로

Life Cycle은 순수하게 SwiftUI로 앱을 만들고자 한다면 SwiftUI app 을 라이프 사이클로 지정하면 되고, 만약 스토리보드를 함께 사용하고자 한다면 UIKit app delegate를 사용하면 된다!

 

우선 전체를 이루고 있는 view 역활을 하는 body에 NavigationView를 추가한다. navigationView를 다루기에 VStack을 추가한다. 이름에서 유추할 수 있듯이 vertical stack 이고 계층 구조에서  children view를 수직으로 쌓는다.

    var body: some View {
        NavigationView {
            VStack {
                
            }
            .navigationTitle("테스트 앱")
        }
    }

네비게이션에서 타이틀로 지정하고 싶으면 navigationView 구조체 마지막에 .navigationTitle("")을 추가해주면 된당!

resume 버튼

ui가 바로바로 반영 안되고 오류 일으킬 때도 있는데 이때 Resume이나 try again눌러서 로드해 주면 된다

TextField를 넣어 주기 위해 Form 구조체로 감싼다.

 

    @State var name = ""
    var body: some View {
        NavigationView {
            VStack {
                Form {
                    TextField("플레이스 홀더 입니다", text: $name)
                }
            }
            .navigationTitle("테스트 앱")
        }
    }

SwiftUI는 구조체를 사용하는데(여기서 구조체는 일반적인 구조체보다 더 함수적임) 일반적으로 swift에서 사용한 방법대로 property를 만드는 (ex: var name = "")  방법을 사용할 수 없다. 그래서 나온데 property wrapper 인데 여기에 의존해서 구조체 내부에서 쓰이는 프로퍼티를 생성한다.

property wrapper는 여러 종류가 있고 한번에 여러개를 사용할 수 없다. 여기서 일반적인 변수로 사용될 것이므로 @State를 사용한다. 

TextField에서 첫 번째 인자는 placeholder 이고 두 번째 인자는 값을 저장할 변수를 지정해 주면 된다. 

UISwitch로 사용했던 것은 Toggle()을 사용하면 된다

    @State var name = ""
    @State var isMySwitchOn = false
    var body: some View {
        NavigationView {
            VStack {
                Form {
                    TextField("플레이스 홀더 입니다", text: $name)
                    Toggle("토글 스위치 입니다", isOn:$isMySwitchOn)
                }
            }
            .navigationTitle("테스트 앱")
        }
    }

첫번째 인자는 스위치 앞에 들어가는 텍스트이고 isOn은 스위치 토글 버튼의 값을 넣을 변수이다.  따라서 이 변수도 @State를 사용한다.

여기까지 작성된 화면

아니 너무 불편;;

가운데 seperator 라고도 하고 divider라고도 할거 같은데 어떻게 고쳐야 되는지 모르겠다 ㅠㅠ 너무 보기 불편;;; 누가 알고 있다면 댓글 좀.. 부탁드려요 ㅎㅎㅎ ㅠㅠ

괜한거 건들여 보다가 padding이랑 Divider()을 알게 된 좋은 시도였다....