底部悬浮栏：选中项加灰色椭圆底 #58

New Issue

2026-11-05T05:20:36Z

laoyang commented

2026-11-05 05:20:36 +00:00

底部悬浮栏：选中项加灰色椭圆底，让"当前在哪一个"更清楚

用户（2026-11-05，第二次提出）

「我看别人设计下面那个悬浮条的时候，当选中其中一个按钮之后，
它除了那个图标和文字颜色发生变化之外，
它还给它加了一个那种椭圆的那种框那种背景，灰色的。
这样的话会更能够清晰的表示出来，现在正在被选中的是哪一个功能。
我们也这样试一试。」

⚠️ 用户此前（2026-11-05 更早一轮）已提过一次同样的话，
当时我把它实现到了行程卡片的状态 chip 上（pillBtn 的 selected 态），
但漏掉了底部悬浮栏（FbDockItem）—— 那才是用户说的"悬浮条"。

现状

FbDockItem 的选中态只有：

.colorFilter(fbTint(this.active ? this.accent : INACTIVE_TINT))   // 图标变色
.fontColor(this.active ? this.accent : INACTIVE_TINT)              // 文字变色
.fontWeight(this.active ? FontWeight.Medium : FontWeight.Normal)   // 加粗

没有背景 —— 图标和文字是"浮在白胶囊上"的，选中/未选中的差别
只靠颜色，观感偏弱。

改法

给选中项加灰色椭圆底：

未选中：        选中：
  ✕              ╭──────╮
 文字             │  ✕   │   ← 灰色椭圆背景
                  │ 文字  │
                  ╰──────╯

参数怎么定

项	值	理由
形状	椭圆（`borderRadius` = 容器高/2）	用户明确说"椭圆的那种框"
底色	`#14000000`（8% 黑）	灰色半透明：dock 本身是白色半透明，纯灰会显脏；半透明黑叠上去才是"柔和的灰"
内边距	上下 3、左右 10	让椭圆包住图标+文字，但不占满整格
未选中	无背景	用户只要求"选中后加背景"

为什么底色用半透明黑而不是实色灰

dock 的底色是 EBFFFFFF（92% 白，叠在模糊层上）。
如果椭圆底用实色 #EEEEEE，在浅色主题下刚好，但深色系统主题下会突兀。

用 #14000000（黑色 8%）：它与背景混合，浅色下是浅灰、深色下是深灰，
两种主题都协调。这是 iOS/微信那类悬浮栏的通行做法。

⚠️ 不能直接给 Column 加 backgroundColor + borderRadius 就完事 ——
那样椭圆会撑满整格（layoutWeight(1)），看起来像"选中了一整块"，
不是用户要的"包住图标和文字的一小块椭圆"。

⇒ 结构要套一层：外层格容器（layoutWeight(1)）+ 内层椭圆（自适应宽高）。

验收

切换模块时，被选中那一项的图标+文字外面有灰色椭圆底
未选中的项没有背景
椭圆大小贴合内容，不是撑满整格
切成不同模块（日程/名册/任务/笔记…）时，椭圆跟着移动
深色模式（如支持）下不突兀

备注

这条需求用户 2026-11-05 提过两次。第一次我实现到了"行程卡片状态 chip"上
（那个也做了），但底部悬浮栏漏了 —— 用户这次是明确指向悬浮栏。

为什么单独建单

#53 里做的是「表单标签两排 + 主题色」，本单是「底部悬浮导航的选中态背景」，属于不同 UI 区域。#47 里的 pillBtn selected 态做在行程卡片的状态 chip 上，也不是悬浮栏。

# 底部悬浮栏：选中项加灰色椭圆底，让"当前在哪一个"更清楚 ## 用户（2026-11-05，第二次提出） > 「我看别人设计下面那个悬浮条的时候，当选中其中一个按钮之后， > 它除了那个图标和文字颜色发生变化之外， > 它还给它加了一个那种椭圆的那种框那种背景，灰色的。 > 这样的话会更能够清晰的表示出来，现在正在被选中的是哪一个功能。 > 我们也这样试一试。」 ⚠️ 用户此前（2026-11-05 更早一轮）已提过一次同样的话，当时我把它实现到了**行程卡片的状态 chip** 上（`pillBtn` 的 `selected` 态），但**漏掉了底部悬浮栏**（`FbDockItem`）—— 那才是用户说的"悬浮条"。 ## 现状 `FbDockItem` 的选中态**只有**： ```typescript .colorFilter(fbTint(this.active ? this.accent : INACTIVE_TINT)) // 图标变色 .fontColor(this.active ? this.accent : INACTIVE_TINT) // 文字变色 .fontWeight(this.active ? FontWeight.Medium : FontWeight.Normal) // 加粗 ``` 没有背景 —— 图标和文字是"浮在白胶囊上"的，选中/未选中的差别只靠颜色，观感偏弱。 ## 改法给选中项加**灰色椭圆底**： ``` 未选中：选中： ✕ ╭──────╮ 文字 │ ✕ │ ← 灰色椭圆背景 │ 文字 │ ╰──────╯ ``` ### 参数怎么定 | 项 | 值 | 理由 | |---|---|---| | 形状 | 椭圆（`borderRadius` = 容器高/2） | 用户明确说"椭圆的那种框" | | 底色 | `#14000000`（8% 黑） | **灰色半透明**：dock 本身是白色半透明，纯灰会显脏；半透明黑叠上去才是"柔和的灰" | | 内边距 | 上下 3、左右 10 | 让椭圆包住图标+文字，但不占满整格 | | 未选中 | 无背景 | 用户只要求"选中后加背景" | ### 为什么底色用半透明黑而不是实色灰 dock 的底色是 `EBFFFFFF`（92% 白，叠在模糊层上）。如果椭圆底用实色 `#EEEEEE`，在浅色主题下刚好，但**深色系统主题**下会突兀。用 `#14000000`（黑色 8%）：它**与背景混合**，浅色下是浅灰、深色下是深灰，两种主题都协调。这是 iOS/微信那类悬浮栏的通行做法。 ⚠️ 不能直接给 `Column` 加 `backgroundColor` + `borderRadius` 就完事 —— 那样椭圆会**撑满整格**（`layoutWeight(1)`），看起来像"选中了一整块"，不是用户要的"包住图标和文字的一小块椭圆"。 ⇒ 结构要套一层：外层格容器（`layoutWeight(1)`）+ 内层椭圆（自适应宽高）。 ## 验收 - [ ] 切换模块时，被选中那一项的图标+文字外面有**灰色椭圆底** - [ ] 未选中的项**没有**背景 - [ ] 椭圆大小贴合内容，不是撑满整格 - [ ] 切成不同模块（日程/名册/任务/笔记…）时，椭圆跟着移动 - [ ] 深色模式（如支持）下不突兀 ## 备注这条需求用户 2026-11-05 提过两次。第一次我实现到了"行程卡片状态 chip"上（那个也做了），但**底部悬浮栏漏了** —— 用户这次是明确指向悬浮栏。 --- ### 为什么单独建单 #53 里做的是「表单标签两排 + 主题色」，本单是「底部悬浮导航的选中态背景」，属于不同 UI 区域。#47 里的 pillBtn selected 态做在行程卡片的状态 chip 上，也不是悬浮栏。

laoyang commented

2026-11-05 05:24:14 +00:00

2026-11-05 反馈：圆角太圆，要"更椭圆一点"

用户：「颜色我感觉透明度什么的还是可以的，但是这个圆有点太圆了，
应该弄成更椭圆一点，效果可能是不是更好啊？」

现状

.borderRadius(999)     // 全圆角 ⇒ 两端是完整半圆，标准胶囊

dock 高 56，图标+文字的实际内容高约 34，加 padding 上下 3 ⇒ 椭圆高约 40。
borderRadius(999) 被钳到 40/2 = 20 ⇒ 两端是完整半圆，
视觉上很"圆鼓"。

改法

把圆角从"全圆角"降到中等圆角：

.borderRadius(12)      // 从 999 降到 12

理由：

40 高的块用 12 圆角 ⇒ 圆角半径是高度的 30%，是"柔和的圆角矩形"
不再是两端半圆的胶囊，视觉上更平、更舒展
与 dock 本身 borderRadius(DOCK_H/2 = 28) 形成内外层次
（外框是大圆角，内部选中块是小圆角，不会"套娃"式重复）

⚠️ ArkUI 的 borderRadius 是等比圆角（四个角半径相同、圆弧是正圆的一段），
不提供"椭圆角"（x/y 半径不同）的写法。
所以"更椭圆"在这个 API 下只能通过减小半径来近似 ——
半径越小，圆弧越平，越接近"扁椭圆"的观感。

⚠️ 12 是基于 dock 高 56 / 选中块高 40 估的。若实机看着还偏圆，
可再降到 10；偏方则加到 14。改动只有这一个数字。

## 2026-11-05 反馈：圆角太圆，要"更椭圆一点" 用户：「颜色我感觉透明度什么的还是可以的，但是这个圆有点太圆了，应该弄成更椭圆一点，效果可能是不是更好啊？」 ### 现状 ```typescript .borderRadius(999) // 全圆角 ⇒ 两端是完整半圆，标准胶囊 ``` dock 高 56，图标+文字的实际内容高约 34，加 `padding 上下 3` ⇒ 椭圆高约 40。 `borderRadius(999)` 被钳到 `40/2 = 20` ⇒ 两端是**完整半圆**，视觉上很"圆鼓"。 ### 改法把圆角从"全圆角"降到**中等圆角**： ```typescript .borderRadius(12) // 从 999 降到 12 ``` 理由： - 40 高的块用 12 圆角 ⇒ 圆角半径是高度的 30%，是"柔和的圆角矩形" - 不再是两端半圆的胶囊，视觉上更平、更舒展 - 与 dock 本身 `borderRadius(DOCK_H/2 = 28)` 形成**内外层次** （外框是大圆角，内部选中块是小圆角，不会"套娃"式重复） ⚠️ ArkUI 的 `borderRadius` 是**等比圆角**（四个角半径相同、圆弧是正圆的一段），不提供"椭圆角"（x/y 半径不同）的写法。所以"更椭圆"在这个 API 下只能通过**减小半径**来近似 —— 半径越小，圆弧越平，越接近"扁椭圆"的观感。 ⚠️ 12 是基于 `dock 高 56 / 选中块高 40` 估的。若实机看着还偏圆，可再降到 10；偏方则加到 14。改动只有这一个数字。

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: laoyang/FamilyBook#58