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

概述

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

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

在本篇博文中,您将学到如下内容:

  1. TextField,没有你我怎么办?
  2. SwiftUI 4.0 为 TextField 增加横竖轴自适应
  3. SwiftUI 6.0 为 TextField 添加文本选中控制

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

那还等什么呢?Let's go!!!;)


1. TextField,没有你我怎么办?

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

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

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

swift 复制代码
@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 自动按横轴和竖轴适配输入的长文本了:

swift 复制代码
@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。

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

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

总结

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

感谢观赏,我们下一篇再见!8-)

相关推荐
杂雾无尘12 小时前
苹果高管揭示苹果背后秘密:苹果为何不涉足搜索引擎领域?
ios·apple
大熊猫侯佩1 天前
SwiftUI 7 新 WebView:金蛇出洞,网页江湖换新天
swiftui·webview·wwdc
瓜子三百克2 天前
defer关键字
swiftui·defer
瓜子三百克2 天前
值类型大小与内存分配
swift·内存分配
杂雾无尘3 天前
Swift 5.9 新特性揭秘:非复制类型的安全与高效
ios·swift·apple
Daniel_Coder3 天前
iOS Widget 开发-7:TimelineProvider 机制全解析:构建未来时间线
ios·swift·widget
Swift社区3 天前
Swift 图论实战:DFS 算法解锁 LeetCode 323 连通分量个数
算法·swift·图论
Daniel_Coder3 天前
iOS Widget 开发-3:Widget 的种类与尺寸(主屏、锁屏、灵动岛)
ios·swift·widget
小亲亲亲04 天前
苹果内购IAP(一) Transaction 数据含义
apple
大熊猫侯佩4 天前
Swift 6.2:江湖再掀惊涛浪,新功出世震四方
swift·apple·wwdc