实战需求

macOS SwiftUI 数据流之ObservableObject和TextEditor实现组件内数据传递

本文价值与收获

看完本文后，您将能够作出下面的界面

截屏2021-01-22 下午3.20.37.png Jietu20210122-152054.gif

看完本文您将掌握的技能

• TextEditor基础使用
• ObservableObject实现数据多组件传递

---

基础知识

TextEditor

可以显示和编辑长格式文本的视图。

struct TextEditor

总览

文本编辑器视图使您可以在应用程序的用户界面中显示和编辑多行可滚动文本。默认情况下，文本编辑器视图样式使用从环境中继承特性文本，如font(:)，和。foregroundColor(:)multilineTextAlignment(_:)

您可以通过在视图主体中添加实例来创建文本编辑器，并通过将a传递给应用程序中的字符串变量来对其进行初始化：TextEditorBinding

struct TextEditingView: View {
    @State private var fullText: String = "This is some editable text..."

    var body: some View {
        TextEditor(text: $fullText)
    }
}

要设置文本样式，请使用标准视图修饰符来配置系统字体，设置自定义字体或更改视图文本的颜色。

在此示例中，视图使用自定义字体将编辑器的文本呈现为灰色：

struct TextEditingView: View {
    @State private var fullText: String = "This is some editable text..."

    var body: some View {
        TextEditor(text: $fullText)
            .foregroundColor(Color.gray)
            .font(.custom("HelveticaNeue", size: 13))
    }
}

如果要更改文本的间距或字体缩放比例，可以使用诸如，的修饰符，并根据空间限制配置视图显示文本的方式。例如，此处的修饰符将线之间的间距设置为5点：lineLimit(:)lineSpacing(:)minimumScaleFactor(:)lineSpacing(:)

struct TextEditingView: View {
    @State private var fullText: String = "This is some editable text..."

    var body: some View {
        TextEditor(text: $fullText)
            .foregroundColor(Color.gray)
            .font(.custom("HelveticaNeue", size: 13))
            .lineSpacing(5)
    }
}

---

实战代码

1、主视图