[SwiftUI] Qiita 태그처럼 표시되는 TextField 만들기

4981 단어 iOSSwiftSwiftUI
SwiftUI의 TextField는 커스터마이즈성이 부족합니다만, 겉보기만으로도 그렇게 해 보았습니다.


구현


struct TestView: View {
    @State private var text: String = ""
    var body: some View {
        ZStack{
            TextField("入力", text: $text)
                .foregroundColor(.clear)
            HStack(spacing: 0){
                let strings = text.split(separator: " ", omittingEmptySubsequences: false)
                ForEach(strings.indices, id: \.self){i in
                    Text(strings[i])
                        .background(
                            Color(.sRGB, red: 0.847, green: 0.917, blue: 0.992)
                                .cornerRadius(5)
                                .overlay(
                                    RoundedRectangle(cornerRadius: 5)
                                        .stroke(Color(.sRGB, red: 0.745, green: 0.866, blue: 0.988))
                                )
                        )
                        .padding(.horizontal, 2)
                }
                Spacer()
            }
        }
    }
}

포인트


TextField 는 제약이 너무 커서 색을 clear 로 해서 보이지 않게 하고 그 위에서 원하는 대로 표시합니다.

제약



위에서 텍스트를 쓰고 있는 사정상 커서가 보이지 않게 됩니다. 이것을 막기 위해서는 예를 들어 텍스트의 배경색을 투명색으로 하면 됩니다만, 색을 맞추는 것이 힘들었기 때문에 단념했습니다.

좋은 웹페이지 즐겨찾기