
🌊 Liquid Glass 简介:苹果设计美学的新纪元
苹果在 WWDC25 上大刀阔斧推出了全新设计语言 Liquid Glass(液态玻璃),全面影响旗下所有平台。其核心特点是界面元素的玻璃质感与光影通透效果,实现真正意义上的"虚实结合,界面如水"。

在上一篇博文中,我们聚焦于 Tabs 的玻璃化,这里我们将深入探讨另一关键控件的变革------工具栏(Toolbars) 的玻璃化蜕变。
在本篇博文中,您将学到如下内容:
-
- [🌊 Liquid Glass 简介:苹果设计美学的新纪元](#🌊 Liquid Glass 简介:苹果设计美学的新纪元)
- [🍸 工具栏新体验:不改代码,也能自动变身](#🍸 工具栏新体验:不改代码,也能自动变身)
- [📦 基础示例:新旧兼容的优雅演绎](#📦 基础示例:新旧兼容的优雅演绎)
- [🎭 保持兼容旧系统:labelStyle 定制样式](#🎭 保持兼容旧系统:labelStyle 定制样式)
- [🧱 自定义 LabelStyle:向下兼容神器](#🧱 自定义 LabelStyle:向下兼容神器)
- [✨ Placement 的魔法:位置决定样式](#✨ Placement 的魔法:位置决定样式)
- [🧰 Toolbar 分组与 Spacer 控制](#🧰 Toolbar 分组与 Spacer 控制)
- [📌 总结:Liquid Glass 下的 Toolbar 重构指南](#📌 总结:Liquid Glass 下的 Toolbar 重构指南)
- [📮 写在最后](#📮 写在最后)
那小伙伴们还等什么呢?让我们马上开始 iOS 26 液态玻璃工具栏 大冒险吧!
Let's go!!!😉
🍸 工具栏新体验:不改代码,也能自动变身
Liquid Glass 对工具栏的设计带来了如下革新:
- 背景呈现出半透明玻璃质感;
- 支持 多组分布,将按钮逻辑分组显示;
- 自动应用新风格,无需修改旧代码。
不过,为了更上一层楼,我们依然可以使用新 API 进行更为细致的定制。
📦 基础示例:新旧兼容的优雅演绎
swift
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 及之前),则我们可以保留文字工具栏的样式:
swift
.labelStyle(.toolbar)
完整示例如下所示:
swift
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 是如何做到的呢?下面我们就为宝子们揭晓答案:
swift
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
实参不仅决定按钮位置,也影响其风格!
swift
.labelStyle(.toolbar)
.tint(.red) // 改变按钮颜色
.badge(3) // 显示角标
示例:
swift
ToolbarItem(placement: .confirmationAction) {
Button("Done", systemImage: "checkmark") {}
.labelStyle(.toolbar)
.badge(3)
}
完整示例代码:
swift
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
宽度。
示例:
swift
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 一次脱胎换骨 的优化。它让工具栏不再是生硬的控制面板,而是一个融入设计,功能与美感并存的现代化模块。
感谢观赏,再会啦!😎