趣谈 TextField 视图在 SwiftUI 各个版本中的进化（上）

概述

在 SwiftUI 众多原生内置视图中，TextField 无疑是其中最常用的一个。它不仅可以显示文本而且可以让用户输入文本，这样可攻可守且可爱的特性怎能让人不爱呢？

从 SwiftUI 4.0 开始，苹果为 TextField 陆续添加了诸多实用功能，这使得它从功能和易用性上不断逼近和超越 UIKit 中的老大哥 UITextField。

相信看完本篇的小伙伴们会对 SwiftUI 中 TextField 新增的功能更加刮目相看，欲罢不能。

那还等什么呢？Let’s go！！！😉

1. TextField，没有你我怎么办？

毫不夸张的说，TextField 视图是 SwiftUI 中的“六朝元老”，它从 SwiftUI 1.0 就日久年深的扎根在内置视图库中了：

TextField 拥有海量构造器供我们恣意选用，最常用的当属 init(text:prompt:label:)方法了：

使用 TextField 可以说真是简单的不要不要的，在下面苹果官方的示例代码中我们将 username 与 TextField 的输入相绑定且顽皮的获取到了它焦点变化的状态（emailFieldIsFocused），并通过这个状态来决定底部文本显示的颜色：

@State private var username: String = ""
@FocusState private var emailFieldIsFocused: Bool = false

var body: some View {
    TextField(
        "User name (email address)",
        text: $username
    )
    .focused($emailFieldIsFocused)
    .onSubmit {
        validate(name: username)
    }
    .textInputAutocapitalization(.never)
    .disableAutocorrection(true)
    .border(.secondary)

    Text(username)
        .foregroundColor(emailFieldIsFocused ? .red : .blue)
}

在早期版本的 SwiftUI 中，TextField 是一个让秃头码农们又爱又恨的角色。爱它是因为它在文本输入起到了不可或缺的作用，而恨它则是因为它有不少令人“咬牙切齿”的缺陷，且少了很多布帛菽粟般必备的功能。

这就是为什么我们往往要从 UIKit 桥接 UITextField 实现定制输入功能的原因了。

所幸的是从 SwiftUI 4.0（iOS 16）开始，苹果终于选择不再“珠投璧抵”，而是专注于为其修复原有的瑕疵，并陆续增加了诸多新功能让 TextField 如虎插翅。

下面我们就从 3 个方面来聊聊这些雨后春笋般的新特性吧。

2. SwiftUI 4.0 为 TextField 增加横竖轴自适应

从 SwiftUI 4.0（iOS 16）开始，为了匹配 TextField 在输入长文本时的外观，苹果为其添加了带 axis 传入形参的全新构造器init(_:text:axis:)：

有了这一新构造器的加持，我们现在可以让 TextField 自动按横轴和竖轴适配输入的长文本了：

@State var name = ""

TextField("大熊猫侯佩", text: $name, axis: .horizontal)
    .frame(width: 200)
                    
TextField("大熊猫侯佩", text: $name, axis: .vertical)
    .frame(width: 200)

运行可以发现，它们会分别以横向和竖向自行滚动输入的文本：

3. SwiftUI 6.0 为 TextField 添加文本选中控制

在今年的 WWDC 24 中苹果推出了 SwiftUI 6.0，同时也为 TextField 新增了文本选择控制功能。

这使得我们可以在 iOS 18（macOS 15）里非常方便的读取和控制任意 TextField 中选择的文本了，这是通过新的 init(_:text:selection:...)
构造器来实现的：

在这个构造器中，新添加了一个 selection 形参，它的类型为 TextSelection? 绑定。我们可以利用它完成文本的单段和多段选择，秘诀就在它的 indices 属性里：

该属性的类型为 TextSelection.Indices，是一个带关联类型的枚举。可以看到它有两个实例分别对应于多段和单段文本选择：即 multiSelection 和 selection。

这里我们不考虑多段文本选择的情况。

关于更多 Swift 带关联类型枚举（enum）的介绍和匹配小技巧，请小伙伴们移步如下链接观赏精彩的内容：

• Swift 和 Python 两种语言中带关联信息错误(异常)类型的比较
• Swift 初学者趣谈：一招教你记住模式匹配 if case let 的语法，永不忘记

在下一篇博文中，我们会分别聊聊如何读取和控制 TextField 当前选中文本的内容，敬请期待吧！

总结

在本篇博文中，我们讨论了 SwiftUI 4.0 中新加入的长文本输入自适应特性，并初步介绍了 SwiftUI 6.0 中的文本选择控制功能。

感谢观赏，我们下一篇再见！😎