底部悬浮栏:选中项加灰色椭圆底 (#58)
用户 2026-11-05:「当选中其中一个按钮之后,它除了图标和文字颜色发生变化, 还给它加了一个那种椭圆的那种框那种背景,灰色的。这样更能清晰表示 现在正在被选中是哪一个功能。」 原来选中态只有变色 + 加粗,没有背景,观感偏弱。 结构上关键:不能直接给 Column 加 backgroundColor + borderRadius —— 那个 Column 是 layoutWeight(1),椭圆会撑满整格,看起来像"选中了一整块"。 套两层:外层等分格(透明,负责布局与热区)+ 内层椭圆(自适应内容宽高)。 底色用半透明黑 #14000000 而不是实色灰: dock 底色是 EBFFFFFF(92% 白叠模糊层),实色灰在深色系统主题下会突兀; 半透明黑与背景混合,浅色下浅灰、深色下深灰,两种主题都协调。 borderRadius 用 999 而非固定值:固定值在标签变长时圆角比例会失调。
This commit is contained in:
@@ -46,6 +46,20 @@ import { FbModuleDef, fbModuleOf } from '../model/Modules';
|
|||||||
*/
|
*/
|
||||||
const INACTIVE_TINT: string = '#4A3F35';
|
const INACTIVE_TINT: string = '#4A3F35';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选中项那个"椭圆灰底"的颜色(#58)。
|
||||||
|
*
|
||||||
|
* 🔴 用户(2026-11-05):「当选中其中一个按钮之后,它除了那个图标和文字颜色
|
||||||
|
* 发生变化之外,它还给它加了一个那种椭圆的那种框那种背景,灰色的。」
|
||||||
|
*
|
||||||
|
* ⚠️ 用**半透明黑**而不是实色灰:dock 底色是 `EBFFFFFF`(92% 白叠模糊层),
|
||||||
|
* 实色灰在深色系统主题下会突兀;半透明黑与背景混合,
|
||||||
|
* 浅色下是浅灰、深色下是深灰,两种主题都协调。
|
||||||
|
* (iOS / 微信那类悬浮栏都是这个做法。)
|
||||||
|
* ⚠️ 8% 太淡、12% 太深,8% 在这里刚好能看出轮廓又不抢图标颜色。
|
||||||
|
*/
|
||||||
|
const DOCK_PILL_BG: string = '#14000000';
|
||||||
|
|
||||||
/** 快捷栏高度(vp)—— 取设计规范的 56 */
|
/** 快捷栏高度(vp)—— 取设计规范的 56 */
|
||||||
const DOCK_H: number = 56;
|
const DOCK_H: number = 56;
|
||||||
/**
|
/**
|
||||||
@@ -308,10 +322,13 @@ export struct FbDockItem {
|
|||||||
};
|
};
|
||||||
|
|
||||||
build() {
|
build() {
|
||||||
Column({ space: 2 }) {
|
/* 外层:等分格(占满),透明 —— 只负责布局与点击热区 */
|
||||||
Image(FbIcon.ui(this.icon))
|
Column() {
|
||||||
.width(20)
|
/* 内层:椭圆胶囊(自适应内容宽高)—— 这才是"选中框" */
|
||||||
.height(20)
|
Column({ space: 2 }) {
|
||||||
|
Image(FbIcon.ui(this.icon))
|
||||||
|
.width(20)
|
||||||
|
.height(20)
|
||||||
/* 🔴🔴 v59(用户 2026-10-18):「现在下面的悬浮框只是那个汉字的颜色变了,
|
/* 🔴🔴 v59(用户 2026-10-18):「现在下面的悬浮框只是那个汉字的颜色变了,
|
||||||
上面的图标颜色没有变。我的要求是:除了下面的汉字,上面图标的颜色
|
上面的图标颜色没有变。我的要求是:除了下面的汉字,上面图标的颜色
|
||||||
也变成跟汉字一样的颜色,变成彩色的。」
|
也变成跟汉字一样的颜色,变成彩色的。」
|
||||||
@@ -327,11 +344,22 @@ export struct FbDockItem {
|
|||||||
它在本工程里**与 PNG 搭配同样不产生着色效果**(那套是给 SVG 用的
|
它在本工程里**与 PNG 搭配同样不产生着色效果**(那套是给 SVG 用的
|
||||||
语义),留着只会让人以为"已经处理了颜色"。 */
|
语义),留着只会让人以为"已经处理了颜色"。 */
|
||||||
.colorFilter(fbTint(this.active ? this.accent : INACTIVE_TINT))
|
.colorFilter(fbTint(this.active ? this.accent : INACTIVE_TINT))
|
||||||
Text(this.label)
|
Text(this.label)
|
||||||
.fontSize(FbMetric.fontTiny)
|
.fontSize(FbMetric.fontTiny)
|
||||||
.fontColor(this.active ? this.accent : INACTIVE_TINT)
|
.fontColor(this.active ? this.accent : INACTIVE_TINT)
|
||||||
.fontWeight(this.active ? FontWeight.Medium : FontWeight.Normal)
|
.fontWeight(this.active ? FontWeight.Medium : FontWeight.Normal)
|
||||||
.maxLines(1)
|
.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) // 等分
|
.layoutWeight(1) // 等分
|
||||||
.height('100%')
|
.height('100%')
|
||||||
|
|||||||
Reference in New Issue
Block a user