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

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第28天，点击查看活动详情。

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

在本章中，你将学会使用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()
    }
}

快来动手试试吧！

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