SwiftUI 7（iOS 26）中玻璃化工具栏的艺术

🌊 Liquid Glass 简介：苹果设计美学的新纪元

苹果在 WWDC25 上大刀阔斧推出了全新设计语言 Liquid Glass（液态玻璃），全面影响旗下所有平台。其核心特点是界面元素的玻璃质感与光影通透效果，实现真正意义上的“虚实结合，界面如水”。

在上一篇博文中，我们聚焦于 Tabs 的玻璃化，这里我们将深入探讨另一关键控件的变革——工具栏（Toolbars） 的玻璃化蜕变。

那小伙伴们还等什么呢？让我们马上开始 iOS 26 液态玻璃工具栏大冒险吧！
Let’s go！！！😉

---

🍸 工具栏新体验：不改代码，也能自动变身

Liquid Glass 对工具栏的设计带来了如下革新：

• 背景呈现出半透明玻璃质感；
• 支持 多组分布，将按钮逻辑分组显示；
• 自动应用新风格，无需修改旧代码。

不过，为了更上一层楼，我们依然可以使用新 API 进行更为细致的定制。

---

📦 基础示例：新旧兼容的优雅演绎

struct ContentView: View {var body: some View {NavigationStack {List {Text("Item 1")Text("Item 2")Text("Item 3")}.navigationTitle("Items").toolbar {ToolbarItem(placement: .cancellationAction) {Button("Cancel", systemImage: "xmark") {}}ToolbarItem(placement: .confirmationAction) {Button("Done", systemImage: "checkmark") {}}}}}
}

运行结果如下图所示：

🧠 技术解析：
该示例依旧采用经典 .toolbar 修饰器，并结合 ToolbarItem 类型。Liquid Glass 推崇图标优先，因此按钮建议使用图文并茂样式，而不是纯文字。

---

🎭 保持兼容旧系统：labelStyle 定制样式

若宝子们仍需兼容旧版本的系统（例如 iOS 18 及之前），则我们可以保留文字工具栏的样式：

.labelStyle(.toolbar)

完整示例如下所示：

struct ContentView: View {var body: some View {NavigationStack {List {Text("Item 1")Text("Item 2")Text("Item 3")}.navigationTitle("Items").toolbar {ToolbarItem(placement: .cancellationAction) {Button("Cancel", systemImage: "xmark") {}.labelStyle(.toolbar)}ToolbarItem(placement: .confirmationAction) {Button("Done", systemImage: "checkmark") {}.labelStyle(.toolbar)}}}}
}

---

🧱 自定义 LabelStyle：向下兼容神器

上面的 Label 自定义样式 .toolbar 是如何做到的呢？下面我们就为宝子们揭晓答案：

struct ToolbarLabelStyle: LabelStyle {func makeBody(configuration: Configuration) -> some View {if #available(iOS 26, *) {Label(configuration)} else {Label(configuration).labelStyle(.titleOnly)}}
}@available(iOS, introduced: 18, obsoleted: 26, message: "Remove this property in iOS 26")
extension LabelStyle where Self == ToolbarLabelStyle {static var toolbar: Self { .init() }
}

📚 技术说明：

• 为不同系统设置条件样式；
• iOS 26 起设置为自动废弃，减少技术欠债；
• labelStyle(.toolbar) 作为语义扩展点，增强代码整洁性。

---

✨ Placement 的魔法：位置决定样式

在 Liquid Glass 影响之下，工具栏中的 ToolbarItemPlacement 实参不仅决定按钮位置，也影响其风格！

.labelStyle(.toolbar)
.tint(.red) // 改变按钮颜色
.badge(3)   // 显示角标

示例：

ToolbarItem(placement: .confirmationAction) {Button("Done", systemImage: "checkmark") {}.labelStyle(.toolbar).badge(3)
}

完整示例代码：

struct ContentView: View {var body: some View {NavigationStack {List {Text("Item 1")Text("Item 2")Text("Item 3")}.navigationTitle("Items").toolbar {ToolbarItem(placement: .cancellationAction) {Button("Cancel", systemImage: "xmark") {}.labelStyle(.toolbar).tint(.red)}ToolbarItem(placement: .confirmationAction) {Button("Done", systemImage: "checkmark") {}.labelStyle(.toolbar).badge(3)}}}}
}

在 Xcode 26 中，预览运行结果如下所示：

💡 温馨提示：
虽然 tint 和 badge 炫酷抢眼，但苹果建议少量使用，依旧推荐通过 placement 实现布局分离。因为让液态玻璃自行决定大显身手的场景才是“你好，她也好！”。

---

🧰 Toolbar 分组与 Spacer 控制

在 Liquid Glass 中，库克为我们引入了两个新能力：

• ToolbarItemGroup：将按钮按逻辑进行组内布局；
• ToolbarSpacer：在 toolbar 中灵活插入空隙，支持 .fixed 或 .flexible 宽度。

示例：

struct ToolsToolbar: ToolbarContent {var body: some ToolbarContent {ToolbarItem(placement: .cancellationAction) {Button("Cancel", systemImage: "xmark") {}}ToolbarItemGroup(placement: .primaryAction) {Button("Draw", systemImage: "pencil") {}Button("Erase", systemImage: "eraser") {}}ToolbarSpacer(.flexible)ToolbarItem(placement: .confirmationAction) {Button("Save", systemImage: "checkmark") {}}}
}

🛠 工程亮点：

• 更符合实际业务分工：主操作、次操作、取消操作分组；
• Spacer 提供更强自适应布局能力，排兵布阵，自由挥洒。

---

📌 总结：Liquid Glass 下的 Toolbar 重构指南

亮点	解说
自动玻璃化	工具栏无需更改代码，即刻享受 Liquid Glass 风格
图标优先	建议使用 systemImage + 文本
可扩展性	自定义 LabelStyle 支持老版本兼容
可分组	ToolbarItemGroup 组织逻辑结构
自适应布局	ToolbarSpacer 实现弹性间距
样式控制	支持 .badge、.tint 等视觉修饰

---

📮 写在最后

工具栏的“玻璃化”不仅是视觉提升，更是对 UI/UX 一次脱胎换骨的优化。它让工具栏不再是生硬的控制面板，而是一个融入设计，功能与美感并存的现代化模块。

感谢观赏，再会啦！😎