跳到主要内容

SwiftUI 中使用 TextField 实现多行文本效果

· 阅读需 2 分钟
GoSwiftUI
goswiftui.com

我有多少次尝试在 Stackoverflow 上找到答案,嗯?不再使用自定义多行文本字段TextEditor。从iOS 16 开始,我们可以使用TextField来实现它,只需添加一个新参数axis

TextField("Multiline textfield", text: $text, axis: .vertical)

当文本大于文本字段边界时,此参数控制滚动方向。使用该vertical值,我们得到一个新的现代多行文本字段,但通过指定horizontal一个我们返回到我们都已经习惯的行为。

看看它工作得有多顺畅。这个文本字段现在不仅是多行的,而且它会在内容更改时自动扩展和收缩。如果无限扩展的内容不是您期望看到的,那么旧lineLimit的和新的得心应手的朋友就是救命稻草!

使用此修饰符,文本字段会增长,直到超过限制的行数。有几种方法可以指定您需要多少可见文本行。使用旧版本,您只需配置文本在此视图中可以占据的最大行数。

// iOS 13+

TextField("Multiline textfield", text: $text, axis: .vertical)
.lineLimit(2)

iOS 16开始,还有一些配置最小和最大行数。

// iOS 16+

TextField("Multiline textfield", text: $text, axis: .vertical)
.lineLimit(...2) // It's identical to usual `lineLimit(2)`
.lineLimit(2...) // min=2, max=Int.max

TextField("Multiline textfield", text: $text, axis: .vertical)
.lineLimit(2...3) // min=2, max=3

TextField("Multiline textfield", text: $text, axis: .vertical)
.lineLimit(2, reservesSpace: true) // = `lineLimit(2...2)`
.lineLimit(2, reservesSpace: false) // = `lineLimit(2)`