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


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

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 中,预览运行结果如下所示:

💡 温馨提示:

虽然 tintbadge 炫酷抢眼,但苹果建议少量使用 ,依旧推荐通过 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 一次脱胎换骨 的优化。它让工具栏不再是生硬的控制面板,而是一个融入设计,功能与美感并存的现代化模块。

感谢观赏,再会啦!😎

相关推荐
算家云23 天前
“液态玻璃”难解苹果AI焦虑:WWDC25背后的信任危机
人工智能·算力·算家云·租算力,到算家云·wwdc25·苹果ai·ios 26
深色風信子2 个月前
Eclipse 插件开发 4 工具栏
java·eclipse·工具栏
missingzlp1 年前
How to: Add and Customize Toolbar Skin Selectors
toolbar·skin·skin selectors
汪宁宇1 年前
在Qt工具栏上实现矩阵并排的按钮效果源码
开发语言·c++·qt·工具栏·并排多个按钮
草上爬1 年前
Qt6入门教程 10:菜单栏、工具栏和状态栏
qt·toolbar·状态栏·statusbar·菜单栏·工具栏·menubar
BruceGerGer2 年前
flutter开发实战-自定义长按TextField输入框剪切、复制、选择全部菜单AdaptiveTextSelectionToolba样式UI效果
flutter·ui·textfield·复制·剪切·选择全部·toolbar