iOS 26 Liquid Glass TabBar 实现与优化实战

当我们将按钮移除或调整层级后，列表自然延伸到底部，Tab Bar 自动透出模糊效果，这与 Apple Health App 的实现逻辑一致。

这说明：Liquid Glass 的模糊特效是默认给'覆盖在滚动容器上的 Tab Bar'的。只要滚动容器贴到 Tab Bar，效果就会生效。

3. 动态最小化行为

为了让交互更灵动，我们可以利用 iOS 26 新增的 tabBarMinimizeBehavior 修饰符。当用户向下滚动时，Tab Bar 会自动缩小，减少干扰。

TabView {
    // ... 页面定义 ...
}
.tabBarMinimizeBehavior(.onScrollDown)

运行时观察发现，Tab Bar 在滚动时确实悄悄'缩'了一圈，既不遮挡核心内容，又保留了导航入口。该修饰符仅在 Liquid Glass 模式下生效，兼容旧版设计时不会造成异常。

4. 底部配件视图的局限

解决最小化后，我们尝试将'添加按钮'放回 Tab Bar 上方，使用 tabViewBottomAccessory。

TabView {
    // ... 页面定义 ...
}
.tabBarMinimizeBehavior(.onScrollDown)
.tabViewBottomAccessory {
    Button("Add exercise") {
        // 点击逻辑
    }.purpleButton()
}

实际运行中发现，这个配件视图是全局的，会在所有 Tab 页面显示。对于仅在当前页有效的按钮来说，这显得画蛇添足。因此，此方案并不适用于局部功能按钮。

5. 搜索角色的误用

有开发者尝试通过 role: .search 将 Tab 放在右侧作为浮动按钮，但这实际上是用于切换搜索页面的。

Tab("Add", systemImage: "plus", value: Tabs.exercises, role: .search) {
    // 打开全屏搜索页
}

点击后会弹出全屏页面而非悬浮按钮，这种'张冠李戴'的做法不可行。我们需要回归页面内部布局寻找解决方案。

6. ZStack + glassEffect 终极方案

既然 API 受限，不如直接利用 SwiftUI 的层叠能力。使用 ZStack 将按钮浮在内容之上，并配合 glassEffect 实现视觉融合。

ZStack(alignment: .bottomTrailing) {
    VStack {
        ScrollView(.horizontal) { /* 筛选栏 */ }
        List { /* 动作列表 */ }
    }

    Button(action: {
        // 打开弹窗
    }) {
        Label("Add Exercise", systemImage: "plus")
            .bold()
            .labelStyle(.iconOnly)
            .padding()
    }
    .glassEffect(.regular.interactive())
    .padding([.bottom, .trailing], 12)
}

运行结果令人满意：一个带有薄雾质感的加号按钮浮在右下角，滚动时不遮挡内容，且风格与系统 Tab Bar 浑然一体。

总结

iOS 26 的 Liquid Glass 设计并非单纯的美学要求，而是对用户体验的深层考量。无论是 tabBarMinimizeBehavior 的交互优化，还是 glassEffect 的视觉融合，核心都在于让界面服务内容，而非喧宾夺主。

面对新系统的挑战，灵活拆解问题、理解设计哲学，往往比死磕 API 更有效。掌握这些心法，未来的技术关卡也能迎刃而解。