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()
}
}

快来着手试试吧！

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