diff --git a/entry/src/main/ets/components/FloatDock.ets b/entry/src/main/ets/components/FloatDock.ets index 3168562..95e1393 100644 --- a/entry/src/main/ets/components/FloatDock.ets +++ b/entry/src/main/ets/components/FloatDock.ets @@ -46,6 +46,20 @@ import { FbModuleDef, fbModuleOf } from '../model/Modules'; */ const INACTIVE_TINT: string = '#4A3F35'; +/** + * 选中项那个"椭圆灰底"的颜色(#58)。 + * + * 🔴 用户(2026-11-05):「当选中其中一个按钮之后,它除了那个图标和文字颜色 + * 发生变化之外,它还给它加了一个那种椭圆的那种框那种背景,灰色的。」 + * + * ⚠️ 用**半透明黑**而不是实色灰:dock 底色是 `EBFFFFFF`(92% 白叠模糊层), + * 实色灰在深色系统主题下会突兀;半透明黑与背景混合, + * 浅色下是浅灰、深色下是深灰,两种主题都协调。 + * (iOS / 微信那类悬浮栏都是这个做法。) + * ⚠️ 8% 太淡、12% 太深,8% 在这里刚好能看出轮廓又不抢图标颜色。 + */ +const DOCK_PILL_BG: string = '#14000000'; + /** 快捷栏高度(vp)—— 取设计规范的 56 */ const DOCK_H: number = 56; /** @@ -308,10 +322,13 @@ export struct FbDockItem { }; build() { - Column({ space: 2 }) { - Image(FbIcon.ui(this.icon)) - .width(20) - .height(20) + /* 外层:等分格(占满),透明 —— 只负责布局与点击热区 */ + Column() { + /* 内层:椭圆胶囊(自适应内容宽高)—— 这才是"选中框" */ + Column({ space: 2 }) { + Image(FbIcon.ui(this.icon)) + .width(20) + .height(20) /* 🔴🔴 v59(用户 2026-10-18):「现在下面的悬浮框只是那个汉字的颜色变了, 上面的图标颜色没有变。我的要求是:除了下面的汉字,上面图标的颜色 也变成跟汉字一样的颜色,变成彩色的。」 @@ -327,11 +344,22 @@ export struct FbDockItem { 它在本工程里**与 PNG 搭配同样不产生着色效果**(那套是给 SVG 用的 语义),留着只会让人以为"已经处理了颜色"。 */ .colorFilter(fbTint(this.active ? this.accent : INACTIVE_TINT)) - Text(this.label) - .fontSize(FbMetric.fontTiny) - .fontColor(this.active ? this.accent : INACTIVE_TINT) - .fontWeight(this.active ? FontWeight.Medium : FontWeight.Normal) - .maxLines(1) + Text(this.label) + .fontSize(FbMetric.fontTiny) + .fontColor(this.active ? this.accent : INACTIVE_TINT) + .fontWeight(this.active ? FontWeight.Medium : FontWeight.Normal) + .maxLines(1) + } + /* #58:**选中时加椭圆灰底** —— 用户点名要的效果 + 「它除了图标和文字颜色变化,还加了一个椭圆的那种框那种背景」。 + ⚠️ 内边距让椭圆包住图标+文字,但不撑满整格: + 左右 10 保证「日程」这种两字标签也留出呼吸; + 上下 3 不把胶囊撑得太胖(dock 总高只有 56)。 + ⚠️ `borderRadius(999)` = 全圆角 ⇒ 椭圆。别用固定值(如 20), + 那样标签变长时圆角比例会失调。 */ + .padding({ left: 10, right: 10, top: 3, bottom: 3 }) + .backgroundColor(this.active ? DOCK_PILL_BG : Color.Transparent) + .borderRadius(999) } .layoutWeight(1) // 等分 .height('100%')