From 5d9902bb821b18229fa6f15dedb2a754878864de Mon Sep 17 00:00:00 2001 From: laoyang Date: Thu, 5 Nov 2026 13:21:34 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BA=95=E9=83=A8=E6=82=AC=E6=B5=AE=E6=A0=8F?= =?UTF-8?q?=EF=BC=9A=E9=80=89=E4=B8=AD=E9=A1=B9=E5=8A=A0=E7=81=B0=E8=89=B2?= =?UTF-8?q?=E6=A4=AD=E5=9C=86=E5=BA=95=20(#58)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户 2026-11-05：「当选中其中一个按钮之后，它除了图标和文字颜色发生变化， 还给它加了一个那种椭圆的那种框那种背景，灰色的。这样更能清晰表示 现在正在被选中是哪一个功能。」 原来选中态只有变色 + 加粗，没有背景，观感偏弱。 结构上关键：不能直接给 Column 加 backgroundColor + borderRadius —— 那个 Column 是 layoutWeight(1)，椭圆会撑满整格，看起来像"选中了一整块"。 套两层：外层等分格（透明，负责布局与热区）+ 内层椭圆（自适应内容宽高）。 底色用半透明黑 #14000000 而不是实色灰： dock 底色是 EBFFFFFF（92% 白叠模糊层），实色灰在深色系统主题下会突兀； 半透明黑与背景混合，浅色下浅灰、深色下深灰，两种主题都协调。 borderRadius 用 999 而非固定值：固定值在标签变长时圆角比例会失调。 --- entry/src/main/ets/components/FloatDock.ets | 46 +++++++++++++++++---- 1 file changed, 37 insertions(+), 9 deletions(-) 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%')