SwiftUI极简教程28:TextEditor多行文本框的使用

今日职言：为什么要支持你上级的工作？因为有一天，你也会成为别人的上级。

在本章中，你将学会使用​​TextEditor​​多行文本实现一个多行文本输入框。

在​​iOS14​​​中，苹果为​​SwiftUI​​​框架引入了一个名为​​TextEditor​​​的多行文本框组件，​​TextEditor​​文本框可以实现显示和编辑多行文本。

那么，本章我们就来了解下​​TextEditor​​多行文本框的使用。

首先，创建一个新项目，命名为​​SwiftUITextEditor​​。

​​TextEditor​​​多行文本框和​​TextField​​输入框的使用方法很类似，需要定义变量绑定内容。

然后，我们也可以像​​TextField​​​输入框一样，给​​TextEditor​​多行文本框添加修饰符美化它。

struct ContentView: View {

    @State private var message = ""

    var body: some View {

        TextEditor(text: $message)
            .font(.title)
            .lineSpacing(20)    // 行距
            .autocapitalization(.words)
            .disableAutocorrection(true)
            .padding()
    }
}

如果我们要统计​​TextEditor​​​多行文本框的输入字数时，这里引用一个​​TextEditor​​​多行文本框的修饰符​​.onChange​​​改变时，我们可以通过​​.onChange​​​改变时的修饰符和​​Text​​​文本，来实现​​TextEditor​​多行文本框字数的统计。

.onChange(of: message) { value in
        //代码块

我们先定义字数统计的初始值​​wordCount​​。

@State private var wordCount: Int = 0

然后通过​​ZStack​​​叠加视图将​​TextEditor​​​多行文本框和​​Text​​​文本包裹在一起，我们把​​wordCount​​字数统计放在右上角。

每当我们输入一个字符时，​​onChange​​修饰符中的代码就会被调用。

在闭包中，我们计算​​message​​​中的单词总数，然后动态更新​​wordCount​​字数统计。

struct ContentView: View {

    @State private var message = ""
    @State private var wordCount: Int = 0

    var body: some View {

        ZStack(alignment: .topTrailing) {
            // 多行文本框
            TextEditor(text: $message)
                .font(.title)
                .lineSpacing(20)
                .autocapitalization(.words)
                .disableAutocorrection(true)
                .padding()

                //改变时
                .onChange(of: message) { _ in
                    let words = message.split { $0 == " " || $0.isNewline }
                    self.wordCount = words.count
                }

            // 字数统计
            Text("\(wordCount)")
                .font(.headline)
                .foregroundColor(.secondary)
                .padding(.trailing)
        }
    }
}

样式我们再美化一下，使用​​.overlay​​加个圆角边框。

.overlay(
    RoundedRectangle(cornerRadius: 8)
        .stroke(Color.gray, lineWidth: 1)
)

嗯，不错。

不过可惜的一点是，​​TextEditor​​​多行文本框不像​​TextField​​​输入框一样，可以直接加上​​placehoder​​注释文字，这需要我们自己实现。

也不难，我们可以通过判断​​message​​​输入文字是否为空，或者​​wordCount​​​字数统计是否为​​0​​​来实现没有输入内容时显示​​placehoder​​注释文字。

完整代码如下：

struct ContentView: View {

    @State private var message = ""
    @State private var wordCount: Int = 0

    var body: some View {

        ZStack(alignment: .topLeading) {

            ZStack(alignment: .bottomTrailing) {

                // 多行文本框
                TextEditor(text: $message)
                    .font(.title3)
                    .lineSpacing(20)
                    .autocapitalization(.words)
                    .disableAutocorrection(true)
                    .padding()
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 180)

                    // 改变时
                    .onChange(of: message) { _ in
                        let words = message.split { $0 == " " || $0.isNewline }
                        self.wordCount = words.count
                    }

                // 字数统计
                Text("\(wordCount)")
                    .font(.headline)
                    .foregroundColor(.secondary)
                    .padding(.trailing)
                    .padding()
            }

            //边框
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(Color.gray, lineWidth: 1)
            )

            // 注释文字
            if message.isEmpty {
                Text("请输入内容")
                    .foregroundColor(Color(UIColor.placeholderText))
                    .padding(15)
            }
        }
        .padding()
    }
}

快来动手试试吧！

如果本专栏对你有帮助，不妨点赞、评论、关注～