iOS 26 Liquid Glass TabBar 设计与实现

尝试移除按钮后，列表延伸至 Tab Bar 下方，Tab Bar 自动透出模糊效果，与健康 APP 表现一致。

结论：Liquid Glass 的模糊特效是默认给'覆盖在滚动容器上的 Tab Bar'的，需确保滚动容器贴到 Tab Bar 底部。

3. 📜 给 TabView 加'缩骨功'：tabBarMinimizeBehavior

为提升灵动性，可使用 tabBarMinimizeBehavior 修饰符，使 Tab Bar 在用户向下滚动时自动最小化。

TabView {
    // 原有 Tab 页面
}.tabBarMinimizeBehavior(.onScrollDown)
// 关键：用户向下滚动时，Tab Bar 自动最小化

运行后，向下滑动列表，Tab Bar 缩小但不完全消失。该修饰符仅在 Liquid Glass 模式下生效，旧版设计（Old Style）中无反应。

4. 🧩 给 Tab Bar 加'配件'：tabViewBottomAccessory 的使用限制

iOS 26 新增 tabViewBottomAccessory 修饰符，可将视图放在 Tab Bar 上方。

TabView {
    // 原有 Tab 页面
}.tabBarMinimizeBehavior(.onScrollDown).tabViewBottomAccessory {
    // 给 Tab Bar 加'配件'
    Button("Add exercise") {
        // 点击逻辑
    }.purpleButton()
}

注意：这是'全局配件'，适用于每个页面都需要展示的控件（如音乐播放控制）。若按钮仅在某页有用，放置此处会画蛇添足。

5. 🔍 误入'搜索 - tab'歧途：role: .search 的真实用途

文档中提到 role: .search 可将 Tab 放右边，但实际用途是给'搜索页面'用的，并非用于放置浮动按钮。

// 新增一个 Tab，角色设为.search
Tab("Add", systemImage: "plus", value: Tabs.exercises, role: .search) {
    // 打开全屏页面，非浮动按钮
}

此方法会导致弹出全屏页面，不适合做局部操作按钮，建议放弃 TabView 思路，直接在页面布局处理。

6. ✨ 柳暗花明：ZStack+glassEffect 造'玻璃态浮动按钮'

利用 ZStack 将按钮浮在页面上，并添加 glassEffect 修饰符，可贴合 Liquid Glass 设计风格。

ZStack(alignment: .bottomTrailing) {
    // 主要内容：筛选栏 + 列表
    VStack {
        ScrollView(.horizontal) { /* 筛选栏 */ }
        List { /* 动作列表 */ }
    }
    
    // 浮动按钮：核心是 glassEffect 修饰符
    Button(action: {
        // 点击打开弹窗
    }) {
        Label("Add Exercise", systemImage: "plus")
            .bold()
            .labelStyle(.iconOnly)
            .padding() // 内部边距
    }
    .glassEffect(.regular.interactive()) // 关键！添加 Liquid Glass 玻璃态
    .padding([.bottom, .trailing], 12) // 外部右下边距
}

运行后，带薄雾质感的'加号按钮'浮在列表右下角，滚动时不遮挡内容，且风格与 Tab Bar 浑然一体。

总结：设计哲学与实现要点

iOS 26 的 Liquid Glass 旨在倒逼开发者贴合用户体验。TabView 的新特性如 tabBarMinimizeBehavior、tabViewBottomAccessory 以及 glassEffect，核心在于'让界面服务内容'。

面对新系统规范，开发者应紧抓设计哲学，灵活拆解问题，确保界面既美观又实用。