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

🌊 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 进行更为细致的定制。

---

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

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 一次脱胎换骨 的优化。它让工具栏不再是生硬的控制面板，而是一个融入设计，功能与美感并存的现代化模块。

感谢观赏，再会啦！😎