SwiftUI极简教程28:TextEditor多行文本框的使用-阿里云开发者社区

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

2022-06-06 1208

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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()
    }
}