[SwiftUI] TextEditor에 placeholder 넣는법

지난 시간에 SwiftUI의 글자수를 제한하는 방법을 알아보았다.

마찬가지로 TextEditor에서 placeholder를 넣고 싶었는데 textField와 다르게 textEditor에서는 따로 placeholder를 넣는게 없었다.

apple documnets 'textField' 발췌

공식문서에서도 보면 알겠지만 TextEidtor는 init할 때, text: Binding값만을 받고 있다.

따라서 placeholder를 주기위해서는 별다른 작업이 필요한데, 내가 떠오른 방법은 ZStack으로 덮어씌우는 방법이다.

@State private var placeholderText = "플레이스 홀더 내용 입력"

ZStack(alignment: .leading) {
                if description.isEmpty {
                    TextEditor(text: $placeholderText)
                        .foregroundColor(.gray)
                        .disabled(true)
                }
                TextEditor(text: $description)
                    .opacity(self.description.isEmpty ? 0.25 : 1)
                    .lineSpacing(5)
                    .frame(maxWidth: .infinity, minHeight: 300)
                    .onChange(of: description) { desc in
                        if desc.count > 500 {
                            DispatchQueue.main.async {
                                self.description = String(desc.prefix(500))
                            }
                        }
                    }
                    .overlay(
                        Text("\(description.count)/500")
                            .font(.system(size: 13))
                            .foregroundColor(.gray)
                            .padding(), alignment: .bottomTrailing
                    )
            }

위의 코드처럼 별도의 placeholder State를 선언하고 TextEditor를 사용할 부분에 Zstack으로 감싸준다.

이후 description이 비어있다면(isEmpty) TextEidtor에 placeholderText를 넣어 뷰를 생성해준다. 이때 중요한 점은

disbled(true)이다. (유저가 입력하면 안되니까)

이후 직접 텍스트를 입력받을 텍스트필드에서 사용자가 입력을 하게 된다면 description이 isEmpty를 만족하지 않기 때문에 위의 TextEditor placeholder뷰는 사라지게 되는 것이다.

이처럼 ZStack을 통해 textEditor에 placeholder를 넣을 수 있따!!!

끗.