SwiftUI TextField

SwiftUI에서 입력가능한 인터페이스 구현시 TextField를 많이 사용합니다.

구현 방법

struct ContentView: View {
    @State var text = ""

    var body: some View {
        VStack {
            TextField(text: $text) {
                Text("PlaceHolder")
            }
            .padding()
        }

        Text(text)
            .padding()
    }
}

TextField에 입력 시 @State로 선언된 text에 업데이트 됩니다.

스타일링

명확하게 입력란을 알려주기 위해 테두리 효과를 적용하겠습니다.

struct ContentView: View {
    @State var text = ""

    var body: some View {
        VStack {
            TextField(text: $text) {
                Text("PlaceHolder")
            }
            .padding()
            .overlay {
                RoundedRectangle(cornerRadius: 25)
                    .stroke(
                        Color(uiColor: .systemPink),
                        lineWidth: 2
                    )
            }
            Text(text)
        }
        .padding()

    }
}

overlay와 stroke를 통해 테두리 효과를 줄 수 있습니다. 사용자에게 명확한 입력란을 제공할 수 있습니다.