趣谈 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-)

相关推荐
Swift社区6 小时前
AI 的早期萌芽?用 Swift 演绎约翰·康威的「生命游戏」
游戏·蓝桥杯·swift
大熊猫侯佩7 小时前
Swift 宏(Macro)入门趣谈(一)
swift·编程语言·apple
iOS阿玮2 天前
别让AI写的代码,成为Appstore上架的绊脚石
uni-app·app·apple
Swift社区2 天前
面试高频图论题『墙与门』:Swift BFS 解法全流程拆解
面试·swift·宽度优先
不二狗4 天前
每日算法 -【Swift 算法】实现回文数判断!
开发语言·算法·swift
Kila_4 天前
【iOS(swift)笔记-11】App版本升级时本地数据库sqlite更新逻辑
数据库·ios·swift
不二狗5 天前
每日算法 -【Swift 算法】字符串转整数算法题详解:myAtoi 实现与正则表达式对比
算法·正则表达式·swift