[SwiftUI] TextField - Custom 밑줄 있는 디자인, Under Line

[SwiftUI] TextField - 밑줄 있는 디자인, Custom Under Line

 

 위에는 기본 상태이고 아래는 입력 상태입니다. 저는 TextField로 하는 방법을 몰라서 VStack을 사용해서 만들었습니다. TextField와 Rectangle을 사용했습니다. 

 

 상황에 따라 Rectangle의 foregroundColor 색상을 변경하여 다양한 옵션을 제공할 수 있을 것 같습니다.

 

VStack(spacing: 0) {
    TextField("그룹 이름을 입력해주세요.", text: $name)
        .font(.pretendard(type: .bold, size: 24))
        .padding([.leading, .trailing], 36)
        .textFieldStyle(.plain)
        .padding(.top, 24)

    Rectangle()
         .frame(height: 1)
         .foregroundColor(.surface3)
         .padding([.leading, .trailing], 36)
         .padding(.top, 8)
}

 

 

 

---

 안녕하세요! 저는 단순한 코딩을 넘어, 서비스와 사용자 경험을 깊이 고민하며 발전하는 개발자가 되기 위해 끊임없이 노력하고 있습니다. 함께 재미있는 이야기 나누고 싶으시거나, 채용 소개 및 커피챗에 관심 있으신 분들은 언제든지 환영합니다.

 

 궁금한 점이 있거나 더 많은 이야기를 나눠보고 싶다면, wlxo0401@gmail.com으로 편하게 연락주세요! 감사합니다.