SwiftUI 文本字段多行 - Swift

在 SwiftUI 中，我们可以通过 TextField 来展示一个单行文本输入框，但如果我们需要让用户输入多行文本该怎么做呢？实际上，在 SwiftUI 中，我们可以使用 TextEditor 来实现多行文本输入框。

创建多行文本输入框

以下代码片段展示了如何创建一个多行的文本输入框：

struct MultiLineTextField: View {
    @State private var text = ""

    var body: some View {
        VStack {
            Text("请输入多行文本：")

            TextEditor(text: $text)
                .foregroundColor(Color.gray)
                .border(Color.gray, width: 1)
                .padding(10)
                .frame(width: 300, height: 200)
        }
    }
}

这个示例使用了 TextEditor 来创建一个多行的文本输入框。我们将 TextEditor 绑定到一个 @State 属性中，这样在用户输入时，我们可以获取到用户输入的内容。

我们可以通过 .foregroundColor()、.border() 和 .padding() 等修饰符来为输入框添加样式。在示例中，我们添加了一些基本样式来为输入框添加边框、边距和默认文本颜色。

获取用户输入

当用户输入时，我们可以在 @State 属性中获取用户输入。以下代码片段演示了如何在多行文本输入框中获取用户输入：

struct MultiLineTextField: View {
    @State private var text = ""

    var body: some View {
        VStack {
            Text("请输入多行文本：")

            TextEditor(text: $text)
                .foregroundColor(Color.gray)
                .border(Color.gray, width: 1)
                .padding(10)
                .frame(width: 300, height: 200)

            Button(action: {
                // 在这里处理用户输入
                print("用户输入的文本内容是：\(text)")
            }) {
                Text("提交")
            }
        }
    }
}

在上面的代码片段中，我们添加了一个按钮来处理用户输入。当用户单击提交按钮时，我们获取在 TextEditor 中输入的文本内容，并将其打印到控制台中。

结论

在 SwiftUI 中，我们可以通过 TextEditor 来创建多行文本输入框，并通过将其绑定到一个 @State 属性来获取用户输入。感谢 SwiftUI 提供的这个方便的控件，让我们可以轻松地创建出漂亮且易用的多行文本输入框。