[SwiftUI] How to Set Up Text in TextField

• How to Set Up Text in TextField
• 1. 기본 모드
• 2. 가로 모드
• 3. 세로 모드
• 4. 최대 줄 수 제한
• 5. 기본 줄 수 지정
• 6. 최소 / 최대 줄 수 지정
• 전체 소스

---

How to Set Up Text in TextField

SwiftUI에서 Text 입력을 받기 위해서 TextField를 사용하게 됩니다. (Android의 EditText, HTML의 input, textarea와 동일)

가정 1. value값이 아래와 같이 3줄 짜리 문자열로 이뤄져 있다고 가정합니다.

@State var value = "안녕하세요.\r\n"
+ "두 번째 줄입니다.\r\n"
+ "세 번째 줄입니다.";

가정 2. 가시성을 위해 각 TextField에는 roundedBorder Style을 적용해 두었습니다.

.textFieldStyle(.roundedBorder)

---

1. 기본 모드

TextField("", text:$value)

기본모드 TextField

기본 모드는 1줄로 입력되고, 두 번째와 세 번째 줄이 첫 번째 줄에 이어서 보이는 걸 확인할 수 있습니다.

---

2. 가로 모드

TextField("", text:$value, axis: .horizontal)

기본 모드와 동일하게 axis를 .horizontal로 지정해 주면 전체 줄을 가로로 보여 주게 됩니다.

가로모드 TextField

---

3. 세로 모드

TextField("", text:$value, axis: .vertical)

HTML의 textarea와 동일하며, 미 입력 시에는 1줄로 보이다가 입력되는 라인만큼 크기가 조정되어 보이게 됩니다.

세로모드 TextField

---

4. 최대 줄 수 제한

TextField("", text:$value, axis: .vertical)
    .lineLimit(2)

위 와 같이 lineLimit을 2로 주면 최소 1줄에서 최대 2줄 까지만 보이고, 그 이상은 scroll을 통하여 볼 수 있게 됩니다.

최대 줄 수 제한 TextField

---

5. 기본 줄 수 지정

TextField("", text:$value, axis: .vertical)
    .lineLimit(5, reservesSpace: true)

limeLimit에 reserveSpace를 true로 주면, 지정된 5개 라인 까지는 비록 값이 입력되지 않아도 보여주게 됩니다. (최소 5개 라인 노출)

기본 줄 수 지정 TextField

---

6. 최소 / 최대 줄 수 지정

TextField("", text:$value, axis: .vertical)
    .lineLimit(2...5)

4번과 5번을 합쳐서 적용하고 싶은 경우. 예를 들어 최소 2줄에서 최대 5줄 까지만 보이고 싶다고 가정한다면, lineLimit의 값을 2...5 (2줄에서 5줄까지)로 지정해 주면 됩니다. 이 때는 reserveSpace가 무의미하며 지정 시 오류가 발생합니다.

최소 / 최대 줄 수 지정 TextField

---

전체 소스

import SwiftUI

// View 페이지
struct TestView: View {
@State var value = "안녕하세요.\r\n"
+ "두 번째 줄입니다.\r\n"
+ "세 번째 줄입니다.";

    var body: some View {
        VStack {
            VStack (alignment: .leading) {
                Text("1줄 모드 (기본 모드)")
                TextField("", text:$value)
                    .textFieldStyle(.roundedBorder)
            }
            .padding(.bottom, 20)

            VStack (alignment: .leading) {
                Text("가로 모드 (기본 모드와 동일)")
                TextField("", text:$value, axis: .horizontal)
                    .textFieldStyle(.roundedBorder)
            }
            .padding(.bottom, 20)

            VStack (alignment: .leading) {
                Text("세로 모드 (여러 줄 입력 가능)")
                TextField("", text:$value, axis: .vertical)
                    .textFieldStyle(.roundedBorder)
            }
            .padding(.bottom, 20)

            VStack (alignment: .leading) {
                Text("최소 1줄, 최대 2줄 까지만 보여 줌")
                TextField("", text:$value, axis: .vertical)
                    .lineLimit(2)
                    .textFieldStyle(.roundedBorder)
            }
            .padding(.bottom, 20)

            VStack (alignment: .leading) {
                Text("기본 5줄까지 보여 줌")
                TextField("", text:$value, axis: .vertical)
                    .lineLimit(5, reservesSpace: true)
                    .textFieldStyle(.roundedBorder)
            }
            .padding(.bottom, 20)

            VStack (alignment: .leading) {
                Text("최소 2줄, 최대 5줄 까지만 보여 줌")
                TextField("", text:$value, axis: .vertical)
                    .lineLimit(2...5)
                    .textFieldStyle(.roundedBorder)
            }
            .padding(.bottom, 20)
        }.padding(.all, 20)
    }
}

// View 미리보기
struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

전체 TextField 결과