SwiftUI Text TextField TextEdito

直接看代码案例快速入手SwiftUI

本文介绍Text，TextField，TextEditor。

🎉下载GitHub仓库，直接体验

Text

struct TextContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI!")
            Text("Hello, SwiftUI!")
                .font(.title)
            Text("Hello, SwiftUI!")
                .foregroundColor(.red)
            Text("Hello, SwiftUI!")
                .fontWeight(.bold)
            Text("Hello, SwiftUI!")
                .shadow(color: .gray, radius: 2, x: 0, y: 2)
            Text("Hello, SwiftUI!")
                .frame(width: 200, height: 100, alignment: .center)
            Text("Hello, SwiftUI! This is a long text that needs to wrap or truncate.")
                .lineLimit(2)
                .truncationMode(.tail)
            Text("greeting_text")
        }
        .padding()
    }
}

struct TextContentView_Previews: PreviewProvider {
    static var previews: some View {
        TextContentView()
    }
}

TextField

struct TextFieldContentView: View {
    @State private var textInput = ""

    
    var body: some View {
        VStack {
            TextField("Please input text", text: $textInput)
            TextField("Please input text", text: $textInput)
                .font(.title)
            TextField("Please input text", text: $textInput)
                .foregroundColor(.red)
            TextField("Please input text", text: $textInput)
                .background(Color.yellow)
            TextField("Please input text", text: $textInput)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.gray, lineWidth: 1)
                )
            HStack {
                Image(systemName: "envelope")
                TextField("Please input email", text: $textInput)
            }
            TextField("Please input text", text: $textInput, onCommit: {
                print("Return click")
            })
            HStack {
                TextField("Please input text", text: $textInput)
                if !textInput.isEmpty {
                    Button(action: { textInput = "" }) {
                        Image(systemName: "xmark.circle.fill")
                            .foregroundColor(.gray)
                    }
                }
            }
        }
    }
}

struct TextFieldContentView_Previews: PreviewProvider {
    static var previews: some View {
        TextFieldContentView()
    }
}

TextEditor

struct TextEditorContentView: View {
    @State private var text = "This is a TextEditor example"
    @FocusState private var isFocused: Bool

    var body: some View {
        VStack {
            TextEditor(text: $text)

            TextEditor(text: $text)
                .frame(width: 100, height: 100)

            TextEditor(text: $text)
                .font(.system(size: 18, design: .rounded))
                .foregroundColor(.purple)

            if #available(iOS 16.0, *) {
                TextEditor(text: $text)
                    .scrollContentBackground(.hidden)
                    .padding(10)
                    .background(Color.yellow)
                    .cornerRadius(10)
                    .border(Color.blue, width: 10)
                    .cornerRadius(10)
                    .padding()
            } else {
                // Fallback on earlier versions
            }

            TextEditor(text: $text)
                .onChange(of: text) { _ in
                    if !text.filter({ $0.isNewline }).isEmpty {
                        print("Found new line character")
                    }
                }

            TextEditor(text: $text)
                .onChange(of: text) { _ in
                    if text.last?.isNewline == .some(true) {
                        text.removeLast()
                        isFocused = false
                    }
                }
                .focused($isFocused)
                .submitLabel(.done)
        }
    }
}

struct TextEditorContentView_Previews: PreviewProvider {
    static var previews: some View {
        TextEditorContentView()
    }
}