引言
在适配 iOS 26 时,开发者需面对 Liquid Glass 设计语言带来的新挑战,尤其是 Tab Bar 的视觉表现。本文通过实践探讨如何实现符合规范的 Tab Bar 效果。
1. 📱 初探 iOS 26 的 Tab Bar:旧功新用,基础先扎牢
若已熟悉 iOS 18 的 Tab Bar 更新,应对此次变化将更为从容。首先搭建最简框架进行测试:
TabView {
// Workouts 标签:对应'运动记录'页面,用哑铃填充图标
Tab("Workouts", systemImage: "dumbbell.fill") {
WorkoutsView()
}
// Exercises 标签:对应'动作库'页面,用传统力量训练图标
Tab("Exercises", systemImage: "figure.strengthtraining.traditional") {
ExercisesView()
}
}
在旧版本设备上运行,Tab Bar 保持原有样式;而在 iOS 26 设备上,Tab Bar 呈现出通透的 Liquid Glass 质感,与页面浑然一体。
但在测试中发现,若在 Tab Bar 上方添加自定义按钮(如紫色'添加按钮'),会遮挡下方内容,不符合 Liquid Glass '分层不遮挡'的设计规范。
2. 🔍 拆解 Tab Bar 的模糊特效:藏在'滚动容器'里的玄机
分析页面结构发现,原有的 VStack 叠放了筛选栏、列表和按钮,按钮挡住了列表,导致 Tab Bar 无法'穿透'显示模糊效果。
VStack {
ScrollView(.horizontal) {
/* 横向滚动的筛选栏 */
}
List {
/* 运动动作列表 */
}
Button {
/* 紫色'添加动作'按钮——问题根源 */
}
}
尝试移除按钮后,列表延伸至 Tab Bar 下方,Tab Bar 自动透出模糊效果,与健康 APP 一致。这说明 Liquid Glass 的模糊特效是默认给'覆盖在滚动容器上的 Tab Bar'的,若有按钮遮挡,滚动容器未贴到 Tab Bar,则无法生效。
3. 📜 给 TabView 加'缩骨功':tabBarMinimizeBehavior 显神通
为提升灵动性,可使用 iOS 26 新 API tabBarMinimizeBehavior 修饰符,使 Tab Bar 在滚动时自动最小化。
TabView {
// 里面还是原来的两个 Tab 页面
}.tabBarMinimizeBehavior(.onScrollDown)
// 关键:用户向下滚动时,Tab Bar 自动最小化
运行后,向下滑动列表,Tab Bar 悄悄缩小,既不遮挡内容又未完全消失。该修饰符仅在 Liquid Glass 模式下生效,兼容旧版设计。


