iOS 26 Liquid Glass TabBar 实现与优化指南

引言

在适配 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 模式下生效，兼容旧版设计。