SwiftUI 7(iOS 26 / iPadOS 26)中玻璃化标签页的全新玩法

在这里插入图片描述

🍸 Liquid Glass 登场:界面设计焕然一新

WWDC25 可谓惊喜连连,其中最引人瞩目的变革之一,莫过于苹果推出的全新跨平台设计语言 —— Liquid Glass(液态玻璃)。这一设计风格涵盖了从按钮到导航栏,再到本篇的主角——标签页(Tabs)

在这里插入图片描述

在 Liquid Glass 中,标签页不仅视觉上焕然一新,交互也有了脱胎换骨的变化。本文将带你一探 SwiftUI 中关于新标签页的 API 和用法,助你 快人一步、技高一筹

闲言少叙,让我们马上开始液态玻璃 TabView 大冒险吧!
Let’s go!!!😉


🧭 Tab 的新写法:表里如一,图文并茂

为了能够充分利用全新 TabView 惊鸿艳影般的外观,我们需要使用 Tab 视图来代替之前的 tabItem 修改器方法:

struct ContentView: View {
    var body: some View {
        TabView {
            Tab("feed", systemImage: "list.star") {
                // 内容区域
            }

            Tab("settings", systemImage: "gear") {
                // 内容区域
            }
        }
    }
}

🔍 解析:

  • 我们依然使用 TabView,但每个 tab 不再直接放在 TabView 内部;
  • 每个子视图包裹在新的 Tab 类型中,图标采用 SF Symbols,图文并茂,美观实用
  • 如此写法符合 Liquid Glass 风格,可享受其视觉特性与交互增强。

📌 编程式控制 tab:与状态同步,持久不灭

利用 @SceneStorage 动态属性,我们可以将 selectedTabIndex 放在 App 关联的持久存储中,让每次应用重启都能“刻骨铭心”:

@SceneStorage("selectedTab") private var selectedTabIndex = 0

TabView(selection: $selectedTabIndex) {
    Tab("feed", systemImage: "list.star", value: 0) {
        // Feed 内容
    }

    Tab("settings", systemImage: "gear", value: 1) {
        // 设置页内容
    }
}

🎓 扩展知识:

  • @SceneStorage 可在应用关闭后保留状态;
  • TabView(selection:) 搭配使用,当用户返回应用时可自动恢复上次选中的标签;
  • 每个 Tab 绑定唯一 value 值,避免冲突。

🔍 使用 Tab 角色:让搜索独树一帜

为了进一步精雕细琢我们 Tab 的习性,宝子们可以让特别的 Tab 成为特别的角色,正所谓:“特别的爱给特别的你❤️”:

Tab("search", systemImage: "magnifyingglass", value: 1, role: .search) {
    // 搜索内容
}

比如在上面的代码中,我们就特别标记出 search 用途的标签:

在这里插入图片描述

📚 说明:

  • role 属性用于标记该标签的用途;
  • 当前唯一支持的角色是 .search,系统将搜索标签在 UI 中隔离处理(如在 iOS 中会单独显示);
  • 在未来 iOS 版本中,可能加入更多角色,如 .profile.notifications 等等。

🧱 跨平台适配:Sidebar 自动切换

为了能够让 iOS 中的 TabView 匹配 iPadOS / macOS 里的 sidebar 外观,我们可以用 sidebarAdaptable 样式来向系统做出特殊说明:

TabView {
    Tab("feed", systemImage: "list.star", value: 0) {}
    Tab("settings", systemImage: "gear", value: 2) {}
}
.tabViewStyle(.sidebarAdaptable)

在 Xcode 26 中的预览结果如下图所示:

在这里插入图片描述

💡 解读:

  • .sidebarAdaptable 让同一段代码在 iPhone 上呈现为底部标签页;
  • 而在 iPad 与 macOS 上则自动转为 Sidebar,一举多得,省心省力
  • 是打造“响应式 UI”的必备良药。

🧩 Tab 附加视图(Accessory):不止于导航

我们还可以为特定 Tab 附加辅助视图(Accessory):

TabView {...}
    .tabViewBottomAccessory {
        if selectedTabIndex == 1 {
            HStack {
                TextField("输入搜索文本", text: $searchText)
                Button("搜索", systemImage: "sparkle.magnifyingglass", action: {
                    print("搜索中...")
                })
            }
            .padding(.horizontal)
        }
    }

比如,在上面的代码中当用户进入搜索 Tab 时,我们在 TabView 工具栏上方增加一个搜索功能框:

在这里插入图片描述

🎼 应用场景:

  • Apple Music 使用 accessory view 来显示当前播放状态并提供暂停/跳过按钮;
  • 可用于显示网络状态、下载进度、通知中心入口等全局功能;
  • 全天可见、随时响应,用户体验 稳如泰山

🌀 滚动时最小化标签栏:内容为王,导航让位

聊了前面那么多,我还是觉得 iOS 26 为 TabView 增加的最有趣且最实用的功能就是让用户在滚动时自动“精简”下方 TabBar 的布局:

.tabBarMinimizeBehavior(.onScrollDown)

完整示例在此:

TabView {
    Tab("feed", systemImage: "list.star", value: 0) {}
    Tab("settings", systemImage: "gear", value: 2) {}
}
.tabViewStyle(.sidebarAdaptable)
.tabBarMinimizeBehavior(.onScrollDown)
.tabViewBottomAccessory {
    Button("Do Action") {}
}

从 Xcode 26 预览的显示中可以看到,当用户向下滚动时 TabBar 会自动收缩,而向上滚动时 TabBar 又会“恢复如常”:

在这里插入图片描述

🚀 扩展说明:

  • tabBarMinimizeBehavior 可控制标签栏在内容滚动时是否隐藏;
  • .onScrollDown 表示向下滚动时自动收起 tab,释放更多空间;
  • 非常适用于资讯类、社交类、阅读类的应用。

📌 总结:Tab 的新纪元

特性说明
新 Tab API使用 Tab("title", systemImage:, value:)
场景存储@SceneStorage 保存选中状态
Tab Role当前支持 .search
sidebarAdaptableiPad/macOS 自动变身为 Sidebar
tabViewBottomAccessory全局操作附加视图
tabBarMinimizeBehavior滚动时隐藏标签栏,内容更聚焦

🎉 总结

在本篇博文中,我们探索了 Liquid Glass 为 tab 导航带来的焕新体验。新的视觉、行为与结构为 SwiftUI 注入新活力,也为开发者带来更多“独步天下,登峰造极”的内功修为。

👋 感谢观赏!再会啦!😎

内容概要:本文详细介绍了Maven的下载、安装与配置方法。Maven是基于项目对象模型(POM)的概念,用于项目管理和构建自动化的工具,能有效管理项目依赖、规范项目结构并提供标准化的构建流程。文章首先简述了Maven的功能特点及其重要性,接着列出了系统要求,包括操作系统、磁盘空间等。随后,分别针对Windows、macOS和Linux系统的用户提供了详细的下载和安装指导,涵盖了解压安装包、配置环境变量的具体操作。此外,还讲解了如何配置本地仓库和镜像源(如阿里云),以优化依赖项的下载速度。最后,给出了常见的错误解决方案,如环境变量配置错误、JDK版本不兼容等问题的处理方法。 适合人群:适用于初学者以及有一定经验的Java开发人员,特别是那些希望提升项目构建和依赖管理效率的技术人员。 使用场景及目标: ①帮助开发者掌握Maven的基本概念和功能特性; ②指导用户完成Maven在不同操作系统上的安装与配置; ③教会用户如何配置本地仓库和镜像源以加快依赖项下载; ④解决常见的安装和配置过程中遇到的问题。 阅读建议:由于Maven的安装和配置涉及多个步骤,建议读者按照文中提供的顺序逐步操作,并仔细检查每个环节的细节,尤其是环境变量的配置。同时,在遇到问题时,可参考文末提供的常见问题解决方案,确保顺利完成整个配置过程。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大熊猫侯佩

赏点钱让我买杯可乐好吗 ;)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值