底部悬浮栏:选中项加灰色椭圆底 (#58)

用户 2026-11-05:「当选中其中一个按钮之后,它除了图标和文字颜色发生变化,
还给它加了一个那种椭圆的那种框那种背景,灰色的。这样更能清晰表示
现在正在被选中是哪一个功能。」

原来选中态只有变色 + 加粗,没有背景,观感偏弱。

结构上关键:不能直接给 Column 加 backgroundColor + borderRadius ——
那个 Column 是 layoutWeight(1),椭圆会撑满整格,看起来像"选中了一整块"。
套两层:外层等分格(透明,负责布局与热区)+ 内层椭圆(自适应内容宽高)。

底色用半透明黑 #14000000 而不是实色灰:
dock 底色是 EBFFFFFF(92% 白叠模糊层),实色灰在深色系统主题下会突兀;
半透明黑与背景混合,浅色下浅灰、深色下深灰,两种主题都协调。

borderRadius 用 999 而非固定值:固定值在标签变长时圆角比例会失调。
This commit is contained in:
2026-11-05 13:21:34 +08:00
parent 0c2cf9b5e7
commit 5d9902bb82
+37 -9
View File
@@ -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%')