跟着视频学编程：使用 SwiftUI 和 AttributedString 精心打造富文本体验

跟着视频学编程：使用 SwiftUI 和 AttributedString 精心打造富文本体验

了解如何使用 SwiftUI 的 TextEditor API 和 AttributedString 构建富文本体验。探索如何启用富文本编辑功能、构建用来操控编辑器内容的自定控件，并对提供的众多格式选项进行自定。了解 AttributedString 的高级功能，以便精心打造超棒的文本编辑体验。

章节
- 0:00 - 简介
- 1:15 - TextEditor 和 AttributedString
- 5:36 - 构建自定控件
- 22:02 - 定义文本格式
- 34:08 - 后续步骤
资源
相关视频

WWDC25
- 提升 App 的多语言体验
WWDC22
- 向左语言
WWDC21
- Foundation 中的新功能
大家好我叫 Max 是 SwiftUI 团队的工程师我叫 Jeremy 是 Swift Standard Libraries 团队的工程师我们很高兴为大家介绍如何充分利用 SwiftUI 的强大功能构建富文本编辑体验还有 AttributedString 的强大功能在 Jeremy 的帮助下我将介绍 SwiftUI 中富文本体验的所有重要方面：首先我将讨论升级 TextEditor 以使用 AttributedString 支持富文本然后我将构建自定控件通过独特的功能改进我的编辑器最后我将创建自己的文本格式定义让我的编辑器和其中的内容始终保持美观！
虽然我白天是一名工程师但我也是…
一名致力于烹饪出完美羊角面包的厨艺达人！最近我一直在构建一个小型食谱编辑器用来记录我的每一次尝试！
编辑器的左侧是食谱列表中间的文本编辑器用于编辑食谱文本右侧的检查器显示食材列表我想让食谱文本中最重要的部分脱颖而出这样我在烹饪时就能一目了然今天我将通过升级这个编辑器来支持富文本从而实现这一目标
这是使用 SwiftUI 的 TextEditor API 实现的编辑器视图我的文本状态类型显示为 String 因此目前它仅支持纯文本我只需将 String 改为 AttributedString
就能显著增强视图的功能
现在我可以支持富文本了我可以使用系统 UI 来切换粗体并应用各种其他格式例如增加字体大小
我现在还可以从键盘插入智绘表情
而得益于 SwiftUI 的字体和颜色属性的语义性质新的 TextEditor 还可以支持深色模式和动态类型！
事实上 TextEditor 支持粗体、斜体、下划线、删除线、自定字体、磅值大小、前景色和背景色字距调整、跟踪、基线偏移、智绘表情以及… 段落样式的各个方面！行高、文本对齐方式和基本书写方向也可用作 SwiftUI 的独立 AttributedString 属性
所有这些属性都与 SwiftUI 的不可编辑的文本一致因此你可在 TextEditor 中输入内容稍后再用 Text 显示内容！与 Text 一样 TextEditor 使用从环境中计算出的默认值来替换任何值为 nil 的 AttributedStringKeys Jeremy 我必须坦白… 到目前为止我在摸索中学会了使用 AttributedString 但在开始构建控件之前我真的需要复习一下确保我的知识足够扎实我还需要将羊角面包面团做好以便稍后使用你介意在我准备面团的时候回顾一下之前的知识吗？没问题 Max！在你准备羊角面包面团的同时我将花点时间讨论一些在使用富文本编辑器时会派上用场的 AttributedString 基础知识简而言之 AttributedString 包含一串字符以及一组属性段例如这个 AttributedString 存储的文本是“大家好！谁准备好开始烹饪了？” 它还包含三个属性段：起始段仅包含字体属性一个添加了前景色的属性段以及仅使用字体属性的最终属性段
AttributedString 类型与你在整个 App 中使用的其他 Swift 类型相得益彰它是一种值类型就像标准库中的字符串一样它使用 UTF-8 编码存储它的内容 AttributedString 还提供对许多常用 Swift 协议的遵从性例如 Equatable、Hashable、 Codable 和 Sendable Apple SDK 附带了各种预定义的属性比如 Max 之前分享的那些这些属性分组为不同的属性范围 AttributedString 还支持你在 App 中定义的自定属性以便为你的 UI 设置个性化样式
我将使用几行代码创建前面提到的 AttributedString 首先我创建一个以文本开头的 AttributedString 接下来我创建字符串“cooking” 将它的前景色设为橙色并将它附加到文本中然后我用结束问号结束句子最后我将整个文本的字体设置为 largeTitle 字体现在我已准备好在设备上的 UI 中显示它
如需进一步了解创建 AttributedString 的基础知识以及创建和使用你自己的自定属性和属性范围请观看 WWDC 2021 讲座 “Foundation 中的新功能”
Max 看起来你已经做好了面团！准备好深入探索在食谱 App 中使用 AttributedString 的细节了吗？当然 Jeremy 你的建议真是 “揉”到我的心巴上了我一直希望提供更好的控件将我的文本编辑器连接到 App 的其余部分我想构建一个按钮用于将食材添加到右侧检查器中的列表但无需再次手动输入食材名称例如我想能通过选择食谱中已经显示的 “butter”一词然后只需按下按钮就可以将它标记为食材
我的检查器已经定义了一个首选项键我可以在编辑器中使用它来为列表添加新的食材
我传递给首选项视图修饰符的值会在视图层次结构中弹出气泡并且可以通过名称 “NewIngredientPreferenceKey” 被使用食谱编辑器的任何视图读取
让我在视图主体下方为这个值定义一个计算属性
对于这个建议我只需提供名称作为 AttributedString 当然我并不是想建议编辑器中的全部文本而是想建议当前选中的文本就像我之前展示的“butter” TextEditor 通过可选的选择参数传达所选内容
将它绑定到 AttributedTextSelection 类型的局部状态
现在我已经提供了视图中需要提供的上下文让我回到计算食材建议的属性
现在我需要获取选中的文本
让我尝试在选中内容上使用这个索引函数的结果为文本添加下标
嗯这似乎不是正确的类型
它返回了 AttributedTextSelection.Indices 我来查找一下
哦真有意思我只有一个选择但 Indices 类型的第二种情况是由一组范围表示
Jeremy 趁着我给羊角面包开酥你能解释一下为什么会出现这个问题吗？哈真有趣想到美味的羊角面包我也是“酥”了不过不用担心 Max 我会解释为什么这个 API 不使用你期望的范围类型为了说明为什么这个 API 会使用 RangeSet 而不是单个范围我要深入探讨 AttributedString 选择我将讨论多个范围如何构成选择并演示如何在代码中使用 RangeSet 你可能在 AttributedString API 或其他集合 API 中使用过单个范围单个范围允许你切分 AttributedString 的一部分并对这段内容单独执行操作例如 AttributedString 提供了 API 允许你一次性将属性快速应用于文本的一部分我使用了 .range(of:) API 在我的 AttributedString 中查找文本“cooking”的范围接下来我使用这个范围通过下标操作符切分 AttributedString 将“cooking”一词设置为橙色
但是仅使用一个范围切分 AttributedString 在适用于所有语言的文本编辑器中并不足以表示文本选择例如我可能会使用这个食谱 App 来存储我计划在假期里烹饪的光明节甜甜圈食谱其中包含一些希伯来文字我的食谱说： “将 Sufganiyot 放进锅里” 说明文本使用英文而食品的传统名称使用希伯来文在文本编辑器中我会一次性选择单词“Sufganiyot”的一部分和“in”一词但这在 AttributedString 中实际上是多个范围！由于英语是一种从左到右的语言因此编辑器在视觉上是从左到右排列句子的然而“Sufganiyot”的希伯来语部分排列方向却相反因为希伯来语是一种从右到左的语言虽然这段文本的双向性质会影响屏幕上的视觉布局但 AttributedString 仍以一致的顺序存储所有文本这种排序将我的选择分为两个范围：单词“Sufganiyot”的开头以及“in”一词不包括希伯来文本的结尾正因如此 SwiftUI 文本选择类型使用多个范围而不是单个范围
要进一步了解如何将 App 本地化为双向文本请观看 WWDC 2022 讲座 “向左语言” 以及今年的 “提升 App 的多语言体验”讲座
要支持这些类型的选择 AttributedString 支持使用 RangeSet 进行切分也就是 Max 之前在选择 API 中注意到的类型就像你可以用单个范围切分 AttributedString 一样你还可以用 RangeSet 对它进行切分以生成不连续的子字符串在这个示例中我在字符视图上使用 .indices(where:) 函数创建了一个 RangeSet 以查找文本中的所有大写字符将这个切片的前景色设置为蓝色会使所有大写字符变为蓝色而其他字符保持不变 SwiftUI 还提供了一个等效的下标可以直接使用选择来切分 AttributedString 嘿 Max 如果你已经给那个诱人的羊角面包开好酥了我认为使用接受选择的下标 API 应该能解决你代码中的构建错误！让我来试一试！我可以直接使用选择为文本添加下标
然后将这个不连续的 AttributedSubstring 转变为一个新的 AttributedString
太棒了! 现在当我在设备上运行这段代码并选择“butter”一词时 SwiftUI 会自动调用我的属性 newIngredientSuggestion 来计算新值这个新值会在我 App 的其余部分弹出气泡然后我的检查器会自动将建议添加在食材列表的底部然后只需轻点一下我就能将它提交到食材列表中！这样的功能可以显著提升编辑器的体验
我对这个新增功能非常满意但基于 Jeremy 到目前教给我的知识我想我可以更进一步！我想更好的可视化文本中的食材！我首先需要一个自定范围能将一段文本标记为食材我会在一个新文件中定义这个属性
这个属性的值是它所引用的食材的 ID 现在我要回到 RecipeEditor 文件中计算 IngredientSuggestion 的属性
IngredientSuggestion 允许我提供一个闭包作为第二个参数
当我按下加号按钮时这个闭包将会调用食材会添加到列表中我将使用这个闭包来更改编辑器文本用我的 Ingredient 属性标记名称出现的位置让新创建食材的 ID 传递到闭包中
接下来我需要在文本中找到所有出现建议食材名称的位置
为此我可在 AttributedString 的字符视图上调用 ranges(of:)
现在我设置好了范围接下来只需为每个范围更新 Ingredient 属性的值！
在这里我使用了我已定义的 IngredientAttribute 的简称
我们来试一试！
我并不指望看到什么新效果毕竟我的自定属性没有任何关联的格式让我选择“yeast”并按下加号按钮
等等那是什么？！我的光标之前是在顶部而不是在结尾！让我再试一次！
我选择“salt”
按下加号按钮我的选择会跳到最后！ Jeremy 我得把羊角面包面团擀开所以我现在无法调试… 你知道为什么我的选择被重置了吗？我们可不希望使用你的 App 的烹饪爱好者们会有这样的体验！你为什么不开始擀面团呢我会深入探讨这种意想不到的行为
为了演示在这里发生了什么以及如何解决它我会详细介绍 AttributedString 索引它们构成了富文本编辑器使用的范围和文本选择
AttributedString.Index 表示文本中的单个位置为了支持它强大而高效的设计 AttributedString 将内容存储在树状结构中它的索引会存储遍历这个树状结构的路径由于这些索引构成 SwiftUI 中文本选择的构建块 App 中意外的选择行为源于 AttributedString 索引在这些树状结构中的行为方式在处理 AttributedString 索引时应牢记两个要点首先对 AttributedString 的任何更改都会使它的所有索引失效即使是那些不在更改范围内的索引使用过期的食材永远不会做出好菜我可以保证用过时索引处理 AttributedString 你只会获得同样糟糕的体验其次索引只能用于创建它们的 AttributedString
现在我将探索我之前创建的示例 AttributedString 中的索引来说明它们是如何工作的！正如之前提到的 AttributedString 以树状结构存储它的内容这里有一个关于树状结构的简化示例使用树状结构可以获得更好的效果并避免在改变文本时复制大量数据
AttributedString.Index 通过存储一条贯穿树状结构的路径来引用文本中的特定位置这条存储路径允许 AttributedString 从索引中快速找到特定文本但这也意味着这个索引包含有关整个 AttributedString 树状结构的布局信息当你更改一个 AttributedString 时它可能会调整树状结构的布局这会使之前记录的所有路径失效即使这个索引的目标仍然存在于文本中
此外即使两个 AttributedString 具有相同的文本和属性内容它们的树状结构可能采用不同的布局使得它们的索引彼此不兼容
使用索引遍历这些树状结构来查找信息需要在 AttributedString 的一个视图中使用索引虽然索引特定于某个 AttributedString 但你可在这个 AttributedString 的任何视图中使用索引 Foundation 提供对于文本内容的字符或称为字素簇、构成每个字符的单独 Unicode 标量
以及字符串的属性段的视图支持
要进一步了解字符视图和 Unicode 标量视图的差异请参阅 Apple 的开发者文档了解 Swift 字符类型
与不使用 Swift 的字符类型的其他类字符串类型例如 NSString 进行交互时你可能还需要访问它的较低层级内容 AttributedString 现在还提供文本的 UTF-8 标量和 UTF-16 标量的视图这两种视图仍与所有现有视图共用相同的索引
讨论完索引和选择的详细信息我将重新讨论 Max 在食谱 App 中遇到的问题 IngredientSuggestion 中的 onApply 闭包会更改 AttributedString 但它不会更新选择中的索引！ SwiftUI 检测到这些索引不再有效并将选择移到文本末尾以防止 App 崩溃要解决这个问题应使用 AttributedString API 在更改文本时更新索引和选择
这里有一个简化的代码示例它与食谱 App 存在相同的问题首先我在文本中找到 “cooking”这个词的范围然后我将“cooking”的范围设置为橙色前景色我还在字符串中插入“chef”一词以添加更多食谱主题
更改文本会更改 AttributedString 树状结构的布局
在更改字符串后使用 cookingRange 变量是无效的这甚至可能导致 App 崩溃 AttributedString 提供了一个 transform 函数来实现这一操作这个函数接受一个 Range 或一个 Range 数组以及一个会就地更改所提供的 AttributedString 的闭包
在闭包的结尾时 transform 函数会使用新索引更新你提供的范围以确保你可以在生成的 AttributedString 中正确使用这个范围虽然在 AttributedString 中文本可能发生了变化但范围仍然指向相同的语义位置在这个示例中就是“cooking”一词 SwiftUI 也提供了一个等效函数会更新选择而不是范围
哇 Max 那些羊角面包看起来太漂亮了！如果你已准备好回到你的 App 使用这个新的 transform 函数也有助于你的代码变得更有条理！谢谢你！听上去这正是我想要的！看看我能否在代码中应用这个函数
首先我不应该像这样循环遍历范围在循环到最后一个范围时文本已多次更改而索引也已过时通过先将 Range 转换为 RangeSet 我可以完全避免这个问题
然后我可以用它进行切分并移除循环
这样所有内容只需一次更改而且我不需要在每次更改后更新剩余的范围
其次在我要更改的范围旁边还有一个表示光标位置的选择我需要始终确保它与转换后的文本相匹配我可以在 AttributedString 上使用 SwiftUI 的 transform(updating:) 重载来实现这一功能
太好了现在我的选择会在文本更改时立即更新！
让我们看看是否有效！我可以选择“牛奶” 它会显示在列表中而且当我添加它时我的选择保持不变！为了仔细检查现在当我按下键盘上的 Command+B 我可以看到“milk”一词变成了粗体正如预期的那样！
现在我的食谱文本中已经包含了所有信息我想用一些颜色来强调食材！所幸 TextEditor 提供了一个相应的工具： AttributedTextFormattingDefinition 协议自定文本格式定义完全围绕你的文本编辑器响应的 AttributedStringKey 以及它们可能包含的值构建我在这里已经声明了一个遵从 AttributedTextFormattingDefinition 协议的类型
默认情况下系统使用 SwiftUIAttributes 范围对属性的值没有约束
在食谱编辑器的范围中
我只想允许前景色、智绘表情以及我的自定 Ingredient 属性
回到我的食谱编辑器我可以使用 attributedTextFormattingDefinition 修饰符将我的自定定义传递给 SwiftUI 的 TextEditor
这一更改能让我的 TextEditor 允许任意食材、任意智绘表情和任意前景色
任何其他属性现在都将采用它们的默认值请注意你仍然可以通过修改环境来更改整个编辑器的默认值基于这个选择 TextEditor 已经对系统格式 UI 进行了一些重要的更改它不再提供用于更改对齐方式、行高或字体属性的控件因为相应的 AttributedStringKey 不在我的范围内不过我仍然可以使用颜色控件将任意颜色应用于文本即使这些颜色不一定合理
糟糕牛奶不见了！
我其实只想让食材高亮显示为绿色所有其他内容均使用默认颜色我可以使用 SwiftUI 的 AttributedTextValueConstraint 协议来实现这种逻辑
让我回到 RecipeFormattingDefinition 文件并声明约束
要遵从 AttributedTextValueConstraint 协议首先指定它所属的 AttributedTextFormattingDefinition 范围然后是我想要限制的 AttributedStringKey 在这个示例中是指前景色属性限制属性的实际逻辑存在于 constrain 函数中在这个函数中我将 AttributeKey 的值即前景色设置为我认为有效的值
在这个示例中逻辑完全取决于是否设置了 Ingredient 属性
如果设置了那么前景色应为绿色
否则就应为 nil
这表示 TextEditor 应替换默认颜色
现在我已经定义了约束我只需将它添加到 AttributedTextFormattingDefinition 的主体中
之后 SwiftUI 将处理所有剩余工作 TextEditor 会自动将定义和约束应用到文本的任何部分然后再显示在屏幕上
所有的食材现在以绿色显示！
有趣的是 TextEditor 已经停用了它的颜色控件尽管前景色在我的格式定义范围内鉴于添加了 IngredientsAreGreen 约束这一点说得通前景色现在完全取决于文本是否使用 Ingredient 属性进行标记 TextEditor 会自动探测 AttributedTextValueConstraints 来确定潜在更改对当前选择是否有效例如我可以尝试将“Milk”一词的前景色再次设置为白色之后运行我的 IngredientsAreGreen 约束会将前景色变回绿色这样 TextEditor 就明白这不是有效的更改并会禁用控件我的值约束也将应用于我粘贴到编辑器中的文本当我用 Command+C 拷贝食材然后用 Command+V 再次粘贴时我的自定成分属性会被保留使用 CodableAttributedStringKeys 甚至可在不同 App 的文本编辑器间实现这一功能只要两个 App 都在它们的 AttributedTextFormattingDefinition 中列出了相应的属性
这非常棒但仍有一些需要改进的地方：将光标放在食材“milk”的末尾我可以删除字符或继续输入它会像普通文本一样行为这让人感觉它只是绿色文本而不是特定名称的食材为了呈现正确的效果我希望 Ingredient 属性在我在属性段结尾键入时不会扩展如果我修改前景色我希望立即重置整个单词的前景色
Jeremy 如果我答应稍后多给你一个羊角面包你能帮我实现它吗？嗯…一个可能不够再加几个就成交 Max！在你把羊角面包放进烤箱时我将解释哪些 API 可能有助于解决这个问题利用 Max 演示的格式定义约束你可以限制每个文本编辑器可以显示哪些属性和哪些特定值为了帮助解决食谱编辑器的这个新问题 AttributedStringKey 协议提供了额外的 API 来约束在对任何 AttributedString 进行修改时属性值应如何更改当属性声明约束时 AttributedString 会始终确保属性之间以及属性与文本内容保持一致从而避免意外状态并实现更简洁、高效的代码我将深入探讨几个示例来说明何时可以将这些 API 用于你的属性首先我将讨论那些值与 AttributedString 中的其他内容融为一体的属性例如拼写检查属性
这里有一个拼写检查属性它通过红色虚线下划线表示单词“ready”拼写错误在对文本进行拼写检查后我需要确保拼写检查属性仍然只应用于我已经验证的文本但是如果我继续在文本编辑器中键入插入的文本默认会继承现有文本的所有属性这不是我期望的拼写检查属性行为因此我在 AttributedStringKey 中添加一个新属性来修正这个问题通过在 AttributedStringKey 类型上声明 inheritedByAddedText 属性并将值设为“false” 任何后续添加文本都不会继承这个属性值
现在在将新文本添加到字符串中时新文本将不包含拼写检查属性因为我尚未对这些新词进行拼写检查可惜我又发现了这个属性的另一个问题现在当我在标记为拼写错误的单词中间添加文本时这个属性会在添加的文本下方的红色虚线中显示一个不自然的断点由于我的 App 还没有检查这个单词是否错误拼写我真正想要的是从这个单词中移除这个属性以避免 UI 中出现过时的信息
为此我将向 AttributedStringKey 类型添加另一个属性： invalidationConditions 属性这个属性声明在什么情况下应将这个属性的一段从文本中移除 AttributedString 提供了文本和特定属性发生变化时的条件且属性键可以基于任意数量的条件失效在这个示例中每当属性运行的文本发生更改时我都需要移除此属性所以我将使用“textChanged”值
现在在属性段的中间插入文本将使整段中的属性失效确保在 UI 中避免这种不一致的状态我认为这两个 API 可能有助于保持 Ingredient 属性在 Max 的 App 中有效！在 Max 完成烤箱操作的同时我将再演示一类属性：这些属性需要文本各部分之间的值一致例如段落对齐属性
我可以对文本中的每个段落应用不同的对齐方式但是单个单词不能使用与段落其余部分不同的对齐方式要在 AttributedString 更改期间强制执行这一要求我在 AttributedStringKey 类型上声明一个 runBoundaries 属性 Foundation 支持将属性段边界限制为段落边缘或指定字符的边缘在这个示例中我将这个属性定义为限制在段落边界以内以要求它从段落的开始到结尾具有一致的值
现在这种情况变得不可能了如果我只对段落中的一个词应用左对齐值 AttributedString 会自动将这个属性扩展到段落的整个范围此外当我枚举对齐属性时 AttributedString 会枚举每个单独的段落即使两个连续的段落包含相同的属性值其他属性段边界的行为相同： AttributedString 将值从一个边界扩展到下一个边界并确保枚举的属性段在每个属性段边界上中断
哇 Max 那些羊角面包闻起来很香！如果羊角面包都放进烤箱里了你认为其中一些 API 是否可以补充你的格式定义来实现你想要的自定属性的行为？听上去正是我需要的秘方！羊角面包都放进烤箱了所以我可以马上试试！
在我的自定 IngredientAttribute 中我将实现可选的 inheritedByAddedText 要求将值设为 false 这样如果我在食材后面输入它就不会扩展
其次让我使用 textChanged 实现 invalidationConditions 这样当我删除食材中的字符时它将不再被识别！
我们来试一试！当我在“milk”的末尾添加“y”时 “y”不会再变为绿色而当我删除“milk”的一个字符时 Ingredient 属性会立即从整个单词移除根据我的 AttributedTextFormattingDefinition 前景色属性继续完全遵循我的自定 ingredient 属性的行为！
谢谢 Jeremy 这个 App 变得真的很棒！别客气！现在关于你答应的那些羊角面包… 别担心就快做好了不过你为什么不看着烤箱呢我有点担心 Luca 会偷走它们啊那个 Luca！我早有耳闻对小组件和羊角面包可是迷恋得很交给我了老大！在我跟 Jeremy 去看守面包之前让我给你一些最终提示：你可以将我的 App 下载为示例项目从中进一步了解如何使用 SwiftUI 的 Transferable Wrapper 进行无损拖放或导出到 RTFD 以及通过 Swift Data 持久化 AttributedString AttributedString 是 Swift 开源 Foundation 项目的一部分在 GitHub 上找到它的实现为它的发展做出贡献或者通过 Swift 论坛与社区建立联系！使用新的 TextEditor 在你的应用中添加对智绘表情输入的支持变得更加简单所以不妨现在就这样做吧！我迫不及待想看到大家如何使用这个 API 升级 App 中的文本编辑功能只需一点小小的点缀就能让整体设计更加出彩！
嗯太美味了！不应该是太丰富了！

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: String

    var body: some View {
        TextEditor(text: $text)
    }
}

1:45 - TextEditor and AttributedString

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: AttributedString

    var body: some View {
        TextEditor(text: $text)
    }
}

4:43 - AttributedString Basics

var text = AttributedString(
  "Hello 👋🏻! Who's ready to get "
)

var cooking = AttributedString("cooking")
cooking.foregroundColor = .orange
text += cooking

text += AttributedString("?")

text.font = .largeTitle

5:36 - Build custom controls: Basics (initial attempt)

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: AttributedString
    @State private var selection = AttributedTextSelection()

    var body: some View {
        TextEditor(text: $text, selection: $selection)
            .preference(key: NewIngredientPreferenceKey.self, value: newIngredientSuggestion)
    }

    private var newIngredientSuggestion: IngredientSuggestion {
        let name = text[selection.indices(in: text)] // build error

        return IngredientSuggestion(
            suggestedName: AttributedString())
    }
}

8:53 - Slicing AttributedString with a Range

var text = AttributedString(
  "Hello 👋🏻! Who's ready to get cooking?"
)

guard let cookingRange = text.range(of: "cooking") else {
  fatalError("Unable to find range of cooking")
}

text[cookingRange].foregroundColor = .orange

10:50 - Slicing AttributedString with a RangeSet

var text = AttributedString(
  "Hello 👋🏻! Who's ready to get cooking?"
)

let uppercaseRanges = text.characters
  .indices(where: \.isUppercase)

text[uppercaseRanges].foregroundColor = .blue

11:40 - Build custom controls: Basics (fixed)

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: AttributedString
    @State private var selection = AttributedTextSelection()

    var body: some View {
        TextEditor(text: $text, selection: $selection)
            .preference(key: NewIngredientPreferenceKey.self, value: newIngredientSuggestion)
    }

    private var newIngredientSuggestion: IngredientSuggestion {
        let name = text[selection]

        return IngredientSuggestion(
            suggestedName: AttributedString(name))
    }
}

12:32 - Build custom controls: Recipe attribute

import SwiftUI

struct IngredientAttribute: CodableAttributedStringKey {
    typealias Value = Ingredient.ID

    static let name = "SampleRecipeEditor.IngredientAttribute"
}

extension AttributeScopes {
    /// An attribute scope for custom attributes defined by this app.
    struct CustomAttributes: AttributeScope {
        /// An attribute for marking text as a reference to an recipe's ingredient.
        let ingredient: IngredientAttribute
    }
}

extension AttributeDynamicLookup {
    /// The subscript for pulling custom attributes into the dynamic attribute lookup.
    ///
    /// This makes them available throughout the code using the name they have in the
    /// `AttributeScopes.CustomAttributes` scope.
    subscript<T: AttributedStringKey>(
        dynamicMember keyPath: KeyPath<AttributeScopes.CustomAttributes, T>
    ) -> T {
        self[T.self]
    }
}

12:56 - Build custom controls: Modifying text (initial attempt)

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: AttributedString
    @State private var selection = AttributedTextSelection()

    var body: some View {
        TextEditor(text: $text, selection: $selection)
            .preference(key: NewIngredientPreferenceKey.self, value: newIngredientSuggestion)
    }

    private var newIngredientSuggestion: IngredientSuggestion {
        let name = text[selection]

        return IngredientSuggestion(
            suggestedName: AttributedString(name),
            onApply: { ingredientId in
                let ranges = text.characters.ranges(of: name.characters)

                for range in ranges {
                    // modifying `text` without updating `selection` is invalid and resets the cursor 
                    text[range].ingredient = ingredientId
                }
            })
    }
}

17:40 - AttributedString Character View
```
text.characters[index] // "👋🏻"
```
17:44 - AttributedString Unicode Scalar View
```
text.unicodeScalars[index] // "👋"
```
17:49 - AttributedString Runs View
```
text.runs[index] // "Hello 👋🏻! ..."
```
18:13 - AttributedString UTF-8 View
```
text.utf8[index] // "240"
```
18:17 - AttributedString UTF-16 View
```
text.utf16[index] // "55357"
```

18:59 - Updating Indices during AttributedString Mutations

var text = AttributedString(
  "Hello 👋🏻! Who's ready to get cooking?"
)

guard var cookingRange = text.range(of: "cooking") else {
  fatalError("Unable to find range of cooking")
}

let originalRange = cookingRange
text.transform(updating: &cookingRange) { text in
  text[originalRange].foregroundColor = .orange
  
  let insertionPoint = text
    .index(text.startIndex, offsetByCharacters: 6)
  
  text.characters
    .insert(contentsOf: "chef ", at: insertionPoint)
}

print(text[cookingRange])

20:22 - Build custom controls: Modifying text (fixed)

import SwiftUI

struct RecipeEditor: View {
    @Binding var text: AttributedString
    @State private var selection = AttributedTextSelection()

    var body: some View {
        TextEditor(text: $text, selection: $selection)
            .preference(key: NewIngredientPreferenceKey.self, value: newIngredientSuggestion)
    }

    private var newIngredientSuggestion: IngredientSuggestion {
        let name = text[selection]

        return IngredientSuggestion(
            suggestedName: AttributedString(name),
            onApply: { ingredientId in
                let ranges = RangeSet(text.characters.ranges(of: name.characters))

                text.transform(updating: &selection) { text in
                    text[ranges].ingredient = ingredientId
                }
            })
    }
}

22:03 - Define your text format: RecipeFormattingDefinition Scope

struct RecipeFormattingDefinition: AttributedTextFormattingDefinition {
    struct Scope: AttributeScope {
        let foregroundColor: AttributeScopes.SwiftUIAttributes.ForegroundColorAttribute
        let adaptiveImageGlyph: AttributeScopes.SwiftUIAttributes.AdaptiveImageGlyphAttribute
        let ingredient: IngredientAttribute
    }

    var body: some AttributedTextFormattingDefinition<Scope> {

    }
}

// pass the custom formatting definition to the TextEditor in the updated `RecipeEditor.body`:

        TextEditor(text: $text, selection: $selection)
            .preference(key: NewIngredientPreferenceKey.self, value: newIngredientSuggestion)
            .attributedTextFormattingDefinition(RecipeFormattingDefinition())

23:50 - Define your text format: AttributedTextValueConstraints

struct IngredientsAreGreen: AttributedTextValueConstraint {
    typealias Scope = RecipeFormattingDefinition.Scope
    typealias AttributeKey = AttributeScopes.SwiftUIAttributes.ForegroundColorAttribute

    func constrain(_ container: inout Attributes) {
        if container.ingredient != nil {
            container.foregroundColor = .green
        } else {
            container.foregroundColor = nil
        }
    }
}

// list the value constraint in the recipe formatting definition's body:
    var body: some AttributedTextFormattingDefinition<Scope> {
        IngredientsAreGreen()
    }

29:28 - AttributedStringKey Constraint: Inherited by Added Text
```
static let inheritedByAddedText = false
```

30:12 - AttributedStringKey Constraint: Invalidation Conditions

static let invalidationConditions:
  Set<AttributedString.AttributeInvalidationCondition>? =
  [.textChanged]

31:25 - AttributedStringKey Constraint: Run Boundaries

static let runBoundaries:
  AttributedString.AttributeRunBoundaries? =
  .paragraph

32:46 - Define your text format: AttributedStringKey Constraints

struct IngredientAttribute: CodableAttributedStringKey {
    typealias Value = Ingredient.ID

    static let name = "SampleRecipeEditor.IngredientAttribute"

    static let inheritedByAddedText: Bool = false

    static let invalidationConditions: Set<AttributedString.AttributeInvalidationCondition>? = [.textChanged]
}

- 0:00 - 简介
- 本节介绍了这场讲座的目标：演示如何使用 SwiftUI 和 AttributedString 构建富文本编辑体验。主讲人 Max 将围绕三个核心主题展开介绍：升级 `TextEditor` 以支持富文本、构建自定控件以增强编辑器，以及创建自定文本格式定义以确保样式一致。
- 1:15 - TextEditor 和 AttributedString
- 本节重点介绍了将底层数据类型从 `String` 更改为 `AttributedString` 可升级 SwiftUI `TextEditor`，从而为富文本体验提供支持。升级之后，App 将立即获得对系统 UI 控件的支持，能够使用粗体、斜体、字体大小、颜色和智绘表情等格式选项。`TextEditor` 支持多种属性，包括段落样式。此外还快速回顾了 `AttributedString` 的基础知识，包括结构 (字符和属性运行)、值类型特性、UTF-8 编码方式及其对常见 Swift 协议的遵从性；并重点介绍了预定义属性的用法，以及定义自定属性的功能。
- 5:36 - 构建自定控件
- 本节介绍了如何为 `TextEditor` 构建可与应用程序其余部分交互的自定控件。示例中演示了如何添加一个按钮，以便用户将所选文本标记为“配料”；并介绍了如何使用首选项键在编辑器和 UI 的其他部分之间进行通信。此外还深入探讨了 `AttributedString` 中文本选择的复杂性，讲解了为什么 `AttributedTextSelection` 类型使用 `RangeSet` 而不是单个 `Range` 来处理双向文本和不连续的选择；重点介绍了如何借助下标 API，直接使用所选内容对 AttributedString 进行切片。最后演示了如何使用闭包来更改编辑器文本，用自定的 `Ingredient` 属性来标记所选文本的出现次数；还探讨了更改属性字符串会重置选择的问题，并介绍了 AttributedString 索引的概念，以及使用 transform 函数在更改后更新索引的重要性。
- 22:02 - 定义文本格式
- 本节重点介绍如何使用属性文本格式定义协议来控制 `TextEditor` 中可用的格式选项。其中说明了如何创建自定格式定义，指定编辑器应响应哪些 `AttributedStringKeys`，从而限制可用的格式设置选项；还引入了 `AttributedTextValueConstraint`，以强制执行特定的格式规则，例如确保配料始终以绿色高亮显示；进一步说明了如何使用 `AttributedStringKey` 协议约束属性值；介绍了如何利用 inheritedByAddedText` 和 `invalidationConditions` 等属性，控制属性在文本更改期间的继承和失效行为；最后探讨了如何使用 `runBoundaries` 属性，强制保持文本各部分 (如段落) 的属性值一致。
- 34:08 - 后续步骤
- 本节提供了一些最终提示和资源：鼓励开发者下载示例项目，探索如何实现无损拖放、RTFD 导出操作，以及如何使用 Swift Data 持久化 `AttributedString`；强调了 `AttributedString` 是 Swift 开源 Foundation 项目的一部分，并鼓励大家积极参与其中，为其发展做出贡献；还鼓励开发者使用新的 `TextEditor`，为自己的 App 添加智绘表情支持。

章节

资源

相关视频

WWDC25

WWDC22

WWDC21