侠客行・iOS 26 Liquid Glass TabBar 破阵记

Ne0inhk

— 9 min read
侠客行・iOS 26 Liquid Glass TabBar 破阵记
在这里插入图片描述

引子

话说侠客岛旁的 “码农山庄” 里，有位青年开发者石破天，一手 SwiftUI 功夫练得炉火纯青，身旁常伴着心思缜密的产品女侠阿绣。

在这里插入图片描述

这日，山庄接到一桩棘手活计 —— 玄铁老怪掌管的 “APP 审核阁” 放出话来，凡要上 iOS 26 的 APP，必过Liquid Glass设计关，尤其Tab Bar这块，稍有差池便打回重练。

在本篇侠客行中，您将学到如下内容：

石破天与阿绣不敢怠慢，即刻开干，誓要破解这 Liquid Glass 的 Tab Bar 玄机。

1. 📱 初探 iOS 26 的 Tab Bar：旧功新用，基础先扎牢

阿绣翻出 iOS 18 的适配文档，对石破天道：“天哥，若咱们之前吃透了 iOS 18 的 Tab Bar 更新，这次应对 Liquid Glass 便是胸有成竹；若是没做过，也得先搭个最简框架试试水。”

在这里插入图片描述

说罢，石破天便敲出一段TabView基础代码 —— 用Tab包裹页面，配上系统图标，正是健身 APP 常用的 “运动记录” 与 “动作库” 标签：

TabView{// Workouts标签：对应“运动记录”页面，用哑铃填充图标Tab("Workouts", systemImage:"dumbbell.fill"){WorkoutsView()}// Exercises标签：对应“动作库”页面，用传统力量训练图标Tab("Exercises", systemImage:"figure.strengthtraining.traditional"){ExercisesView()}}

他用 Xcode 26 编译后，先在 iOS 18 设备上运行 ——Tab Bar 还是老样子，扎实却少了灵动感：

在这里插入图片描述

可一换 iOS 26 设备，屏幕上的 Tab Bar 竟变了模样：

在这里插入图片描述

通体透着Liquid Glass的通透感，像蒙了一层薄雾，与页面浑然一体。

在这里插入图片描述

阿绣指着屏幕皱眉：“你看，之前咱们在 Tab Bar 上方加的紫色‘添加按钮’，现在挡住了下方内容，这可不符 Liquid Glass‘分层不遮挡’的规矩，玄铁老怪见了必定挑刺。”

在这里插入图片描述

2. 🔍 拆解 Tab Bar 的模糊特效：藏在 “滚动容器” 里的玄机

石破天盯着屏幕犯愁，阿绣却忽然想起苹果健康 APP 的设计：“健康 APP 的列表是能滚到 Tab Bar 底下的，还带着模糊效果，不如咱们也试试把列表‘拉’到 Tab Bar 下面？” 。

在这里插入图片描述

二人先分析当前页面结构 —— 原来他们用VStack叠了筛选栏、列表和按钮，按钮挡住了列表，导致 Tab Bar 无法 “穿透” 显示模糊：

VStack{ScrollView(.horizontal){/* 横向滚动的筛选栏 */}List{/* 运动动作列表 */}Button{/* 紫色“添加动作”按钮——问题根源 */}

石破天试着删掉按钮，再运行时，奇迹出现了：

在这里插入图片描述

列表果然延伸到了 Tab Bar 下方，Tab Bar 自动透出一层模糊，与健康 APP 如出一辙！

在这里插入图片描述

他拍腿大笑：“原来如此！Liquid Glass 的模糊特效是默认给‘覆盖在滚动容器上的 Tab Bar’的，之前有按钮挡着，滚动容器没贴到 Tab Bar，自然出不来效果。”

3. 📜 给 TabView 加 “缩骨功”：tabBarMinimizeBehavior 显神通

刚解决模糊问题，玄铁老怪便飘然而至，扫了眼屏幕道：“模糊是有了，可用户滚动时 Tab Bar 还这么显眼，不够灵动，算不得精通 Liquid Glass。”

在这里插入图片描述

石破天心中一紧，阿绣却递过一份 iOS 26 新 API 文档：“天哥，试试这个tabBarMinimizeBehavior修饰符，就像给 Tab Bar 练了‘缩骨功’，滚动时能自动变小！”

石破天立刻给TabView加上修饰符：

TabView{/* 里面还是原来的两个Tab页面 */}.tabBarMinimizeBehavior(.onScrollDown)// 关键：用户向下滚动时，Tab Bar自动最小化

运行后，手指向下滑动列表，Tab Bar 果然悄悄 “缩” 了一圈，既不遮挡内容，又没完全消失 —— 玄铁老怪眯眼瞧了瞧，没说话，但眉头舒展了些。

在这里插入图片描述

石破天暗自庆幸：“还好这修饰符只在 Liquid Glass 模式下生效，要是在 iOS 18 老设计（Old Style）里用了没反应，今日可就栽了。”

4. 🧩 给 Tab Bar 加 “配件”：tabViewBottomAccessory 的坑与悟

解决了最小化，石破天又惦记起之前删掉的 “添加动作” 按钮：“能不能把按钮加回 Tab Bar 上方？” 。

在这里插入图片描述

阿绣指着文档里的tabViewBottomAccessory说：“这是 iOS 26 新出的‘配件视图’，能放在 Tab Bar 上面，试试？”

在这里插入图片描述

石破天依言添加了如下代码：

TabView{/* 原有Tab页面 */}.tabBarMinimizeBehavior(.onScrollDown).tabViewBottomAccessory {// 给Tab Bar加“配件”——这里放“添加动作”按钮Button("Add exercise"){// 点击后打开“添加新运动动作”的逻辑}.purpleButton()// 自定义的紫色按钮样式}

可运行后却发现问题：无论切到 “运动记录” 还是 “动作库”，这按钮都在 —— 阿绣摇头道：“苹果的用法是‘全局配件’，比如音乐 APP 的播放器控制，每个页面都需要；咱们这按钮只在‘动作库’有用，放这就画蛇添足了。” 。

在这里插入图片描述

石破天只好删掉配件，叹道：“看来此路不通，得另想办法。”

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

二人正琢磨，阿绣忽然想起健康 APP 右下角有个搜索按钮：“要不试试给 Tab 加个‘搜索角色’？文档里说role: .search能把 Tab 放右边。” 。

石破天马上修改了代码：

// 新增一个Tab，角色设为.search，想当“添加按钮”用Tab("Add", systemImage:"plus", value:Tabs.exercises, role:.search){/* 原本想放添加页面，结果打开是全屏 */}

可一点这个 “加号 Tab”，竟弹出个全屏页面 —— 哪里是浮动按钮！？

在这里插入图片描述

阿绣哭笑不得：“原来role: .search 是给‘搜索页面’用的，不是随便放按钮的，咱们这是‘张冠李戴’了。” 石破天挠挠头：“看来得放弃 TabView 的思路，直接在页面上做文章。”

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

眼看天色渐暗，阿绣忽然灵光一闪：“Liquid Glass 讲究‘分层’，咱们用ZStack把按钮‘浮’在页面上，再加个glassEffect，不就贴合设计了？”

在这里插入图片描述

石破天眼睛一亮，立刻敲出代码：

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)// 外部右下加12pt边距，避免贴边}

运行后，一个带着薄雾质感的 “加号按钮” 浮在列表右下角，滚动时既不遮挡内容，又和 Tab Bar 的 Liquid Glass 风格浑然一体—— 玄铁老怪凑过来细看，手指点了点按钮，又滑动列表，半晌才道：“这按钮虽没用到 TabView 的 API，却吃透了 Liquid Glass 的‘分层融合’心法，算你们过关。”

在这里插入图片描述

尾声：技术如侠，心法为上

此事过后，石破天与阿绣悟得一理 —— iOS 26 的 Liquid Glass 从不是刁难人的 “武功秘籍”，而是倒逼开发者贴合用户体验的 “心法”。

在这里插入图片描述

TabView的种种新特性，无论是tabBarMinimizeBehavior的灵动、tabViewBottomAccessory的全局适配，还是glassEffect的通透，核心都在 “让界面服务内容，而非喧宾夺主”。

玄铁老怪虽严苛，见二人不墨守成规、能灵活拆解问题，也不禁点头：“后生可畏，这关，你们过了！” 而石破天与阿绣也明白，往后应对新系统，只需紧抓设计哲学，再难的技术关，也能如侠客破阵般，迎刃而解。

在这里插入图片描述

那么，看到这里各位少侠是否也收益良多呢？

感谢观赏，宝子们下次再会吧！😎

Read more

计算机视觉热点：三维人体姿态估计的前沿算法与论文案例

计算机视觉热点：三维人体姿态估计的前沿算法与论文案例

计算机视觉热点：三维人体姿态估计的前沿算法与论文案例 * 一、前言 * 二、三维人体姿态估计概述 * 2.1 定义与目标 * 2.2 应用场景 * 2.3 面临的挑战 * 三、前沿算法介绍 * 3.1 基于深度学习的方法 * 3.2 多视角方法 * 3.3 结合传感器的方法 * 四、算法对比与分析 * 4.1 不同算法的性能比较 * 4.2 适用场景分析 * 五、数据集介绍 * 5.1 常用数据集概述 * 5.2 数据集特点与应用 * 六、未来发展趋势 * 6.1 算法优化方向 * 6.2 新兴技术融合

By Ne0inhk
优选算法——滑动窗口

优选算法——滑动窗口

优选算法——滑动窗口 1.长度最小的子数组 解题原理 📋 解题步骤 第一步：理解题意 * 找一个连续子数组，使其和 ≥ target，且长度最小 * 数组元素都是正整数（关键性质） * 无解返回 0 第二步：分析暴力解法 * 枚举所有子数组：O(n²) 或 O(n³) * 对于 n = 10⁵ 会超时 第三步：寻找优化点 * 正整数 → 窗口扩展时和单调递增 * 可以用滑动窗口优化 第四步：设计滑动窗口 遍历右指针： 扩展窗口 从右边进窗口 判断： 如果 sum >= target： 更新最小长度 收缩窗口 从左边出窗口 第五步：手动模拟 步骤leftright窗口sumresult403[2,

By Ne0inhk
C++：探索哈希表秘密之哈希桶实现哈希

C++：探索哈希表秘密之哈希桶实现哈希

文章目录 * 前言 * 一、链地址法概念 * 二、哈希表扩容 * 三、哈希桶插入逻辑 * 四、析构函数 * 五、删除逻辑 * 六、查找 * 七、链地址法代码实现总结 前言 前面我们用开放定址法代码实现了哈希表： C++：揭秘哈希：提升查找效率的终极技巧_1 对于开放定址法来说，包含以下两种探测插入节点位置方法： 1. 线性探测 2. 二次探测 但是开放定址法的缺点也很明显，开放定址法容易很多数据堆积在一起，大大减少了效率。 为了解决上述问题，引入了第二种方法实现哈希表 ——链地址法（哈希桶法） 一、链地址法概念 开放定址法中，所有的元素都放到哈希表里。 链地址法中，所有的数据不再直接存储在哈希表中。哈希表中存储一个指针，没有数据映射到这个位置时，这个指针为空；有多个数据映射到这个位置时，我们把这些冲突的数据链接成一个链表，挂在哈希表这个位置下面。链地址法也叫做拉链法或者哈希桶。 下⾯演⽰

By Ne0inhk
【数据结构】彻底搞懂二叉树：四种遍历逻辑、经典OJ题与递归性能全解析

【数据结构】彻底搞懂二叉树：四种遍历逻辑、经典OJ题与递归性能全解析

🏠 个人主页:EXtreme35 📚 个人专栏: 专栏名称专栏主题简述《C语言》C语言基础、语法解析与实战应用《数据结构》线性表、树、图等核心数据结构详解《题解思维》算法思路、解题技巧与高效编程实践 目录 * 二叉树全栈进阶指南：从内存布局到递归本质的深度复盘 * 一、二叉树的底层逻辑与核心概念 * 1.1 核心定义与特点 * 1.2 二叉树的五种基本形态 * 1.3 特殊二叉树 * 1.4 二叉树的五条性质 * 1.5 存储结构 * 二、遍历的递归之美 * 2.1 前序遍历 * 2.2 中序遍历 (In-order Traversal) * 2.3 后序遍历 (Post-order Traversal) * 2.

By Ne0inhk