从右到左与布局方向
支持 RTL 语言和镜像布局。
从右到左与布局方向 是 CoddyKit 上的免费 Swift Academy 课时。 这是第 4 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Swift Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Swift Academy 课程共包含 4 节课。
使用从右到左书写的语言
阿拉伯语、希伯来语、波斯语和乌尔都语都是从右到左(RTL)书写的。对于这些用户,整个界面都应进行镜像:返回导航按钮指向右侧,列表对齐到右边缘,进度从右向左推进。支持 RTL 是国际化的核心部分。
// RTL locales include: ar, he, fa, ur
// The whole UI mirrors, not just the text.使用前导和尾随,而不是左右
黄金法则是:使用前导和尾随来设计,而不是使用左和右。前导侧是阅读开始的位置(英语中在左侧,阿拉伯语中在右侧)。使用前导和尾随后,系统会在 RTL 中自动镜像布局。
// SwiftUI uses leading/trailing automatically:
// HStack { Image(...); Text("Title") }
// .padding(.leading, 16) // flips in RTL
let edge = "leading mirrors automatically"
_ = edge读取 layoutDirection
SwiftUI 通过 layoutDirection 环境值公开当前 direction,该值为 .leftToRight 或 .rightToLeft。当您需要依赖 direction 的逻辑(例如选择 chevron 资源)时,请读取它。
// In a SwiftUI View:
// @Environment(\.layoutDirection) var direction
// let chevron = direction == .rightToLeft
// ? "chevron.left" : "chevron.right"
let ltr = "leftToRight"
let rtl = "rightToLeft"
print(ltr, rtl)镜像 SF Symbols 和图像
许多 SF 符号会自动镜像。对于具有 direction 的自定义图像,请将其标记为随布局 direction 翻转,这样在 RTL 中,指向前方的箭头仍会指向前方。修饰符 flipsForRightToLeftLayoutDirection 控制此行为。
// SwiftUI:
// Image("forwardArrow")
// .flipsForRightToLeftLayoutDirection(true)
let shouldFlip = true
_ = shouldFlip强制指定 direction
有时某个子视图必须保持固定 direction,例如 RTL 布局中的电话号码或从左到右的代码片段。请仅在该子树上使用 environment(\.layoutDirection, _) 修饰符覆盖 direction。
// Keep a code block LTR even in an RTL app:
// CodeView(snippet)
// .environment(\.layoutDirection, .leftToRight)
let forced = "leftToRight subtree"
_ = forced文本对齐和 multilineTextAlignment
文本对齐也请使用前导和尾随。在阿拉伯语中,使用 .leading 对齐的段落会自动贴近右边缘。请避免使用永远不会翻转的 .left/.right。
// Text(longBody)
// .multilineTextAlignment(.leading) // flips in RTL
let alignment = "leading flips, left does not"
_ = alignment双向文本
RTL 段落中经常嵌入 LTR 片段(URL、数字和英文品牌名称)。Unicode 双向算法会处理排序,但您可以使用 direction isolate 字符包裹含义不明确的片段,以避免视觉顺序混乱。
import Foundation
// First-strong isolate keeps an embedded run intact
let isolated = "\u{2068}example.com\u{2069}"
print(isolated.count > 0)不进行镜像视图的语义内容
有些控件——媒体播放控制按钮、时间线——不应进行镜像,因为它们的含义基于物理方向,而不是阅读方向。UIKit 的 semanticContentAttribute(.playback、.spatial、.forceLeftToRight)会告诉系统何时保持固定 direction。
// UIKit example:
// playbackBar.semanticContentAttribute = .playback
// mapOverlay.semanticContentAttribute = .spatial
let keepFixed = "playback / spatial do not mirror"
_ = keepFixed无需翻译即可测试 RTL
您不需要阿拉伯语翻译即可测试镜像效果。请在方案的应用语言设置中使用从右到左伪语言运行应用。界面会使用现有字符串进行镜像,因此您可以立即发现硬编码 .left/.right 导致的问题。
// Edit Scheme > Run > Options >
// App Language: Right-to-Left Pseudolanguage
let test = "mirror without real translations"
_ = test常见的 RTL 问题
请留意以下问题:
- 硬编码的
.left/.right对齐或内边距。 - 使用固定 x 偏移量手动定位视图。
- 自定义 direction 图像未能翻转。
- 返回 chevron 或滑块指向错误方向。
- 拼接的双向字符串显示混乱。
// Replace fixed offsets with leading/trailing layout
// so AutoLayout / SwiftUI can mirror them.
let rule = "prefer leading/trailing everywhere"
_ = rule支持 RTL 的行
构建良好的行会始终使用前导和尾随,允许符号翻转,并仅在语义要求时强制指定 direction。这样的视图无需任何改动,就能在英语和阿拉伯语中正确显示。
// HStack {
// Image(systemName: "star")
// Text("Favorite")
// Spacer()
// Image(systemName: "chevron.forward") // mirrors
// }
// .padding(.horizontal, 16)
let ready = "row mirrors automatically"
_ = ready快速检查
回顾确保 RTL 布局安全的核心原则。
回顾
您学会了支持从右到左的语言:
- 使用前导/尾随进行设计,绝不要使用左/右。
- 读取
layoutDirection环境值,以处理依赖 direction 的逻辑。 - 翻转具有 direction 的图像;对于代码或电话号码等固定子树,请覆盖 direction。
- 对不能镜像的播放或空间控件使用
semanticContentAttribute。 - 发布前使用 RTL 伪语言进行测试。
用 AI 导师学习 Swift — 免费
在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。
- 课程
- 122
- 课程
- 409
常见问题解答
「从右到左与布局方向」课时是免费的吗?
是的 — 「从右到左与布局方向」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Swift Academy 课程的其余内容,请升级到 CoddyKit PRO。 Swift Academy 课程共包含 4 节课。
「从右到左与布局方向」这节课中我会学到什么?
支持 RTL 语言和镜像布局。 你通过在浏览器中直接运行的动手代码来练习 Swift Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Swift Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 Swift Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 4 节课,共 4 节。
「从右到左与布局方向」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 Swift Academy 课中编写并运行代码吗?
能。每节 Swift Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。