悬浮栏选中底圆角:999 -> 12,不再那么圆鼓 (#58)
用户 2026-11-05:「颜色我感觉透明度什么的还是可以的,但是这个圆有点太圆了, 应该弄成更椭圆一点,效果可能是不是更好啊?」 borderRadius(999) 会把 40 高的块钳成两端完整半圆,看着很圆鼓。 改成 12:圆角半径只占高度的 30%,是"柔和的圆角矩形", 视觉更平更舒展,也与 dock 外框的大圆角(28)形成内外层次。 ArkUI 的 borderRadius 是等比圆角(四角半径相同、正圆圆弧), 没有"椭圆角"(x/y 半径不同)的写法 —— 所以"更椭圆"只能靠减小半径近似, 半径越小圆弧越平。 实机偏圆就降到 10,偏方就加到 14,改动只有这一个数字。
This commit is contained in:
@@ -355,11 +355,20 @@ export struct FbDockItem {
|
|||||||
⚠️ 内边距让椭圆包住图标+文字,但不撑满整格:
|
⚠️ 内边距让椭圆包住图标+文字,但不撑满整格:
|
||||||
左右 10 保证「日程」这种两字标签也留出呼吸;
|
左右 10 保证「日程」这种两字标签也留出呼吸;
|
||||||
上下 3 不把胶囊撑得太胖(dock 总高只有 56)。
|
上下 3 不把胶囊撑得太胖(dock 总高只有 56)。
|
||||||
⚠️ `borderRadius(999)` = 全圆角 ⇒ 椭圆。别用固定值(如 20),
|
⚠️ 圆角用 **12** 而不是 999(全圆角)——
|
||||||
那样标签变长时圆角比例会失调。 */
|
用户 2026-11-05 反馈:「这个圆有点太圆了,应该弄成更椭圆一点」。
|
||||||
|
999 会把 40 高的块钳成两端**完整半圆**,看着很圆鼓;
|
||||||
|
12 让圆角半径只占高度的 30%,是"柔和的圆角矩形",
|
||||||
|
视觉更平、更舒展,也与 dock 外框的大圆角(28)形成内外层次。
|
||||||
|
|
||||||
|
⚠️ ArkUI 的 borderRadius 是**等比圆角**(四角半径相同、正圆圆弧),
|
||||||
|
没有"椭圆角"(x/y 半径不同)的写法。所以"更椭圆"只能靠
|
||||||
|
**减小半径**来近似 —— 半径越小圆弧越平,越接近扁椭圆观感。
|
||||||
|
⚠️ 12 是按文档数值估的。实机偏圆就降到 10,偏方就加到 14,
|
||||||
|
改动只有这一个数字。 */
|
||||||
.padding({ left: 10, right: 10, top: 3, bottom: 3 })
|
.padding({ left: 10, right: 10, top: 3, bottom: 3 })
|
||||||
.backgroundColor(this.active ? DOCK_PILL_BG : Color.Transparent)
|
.backgroundColor(this.active ? DOCK_PILL_BG : Color.Transparent)
|
||||||
.borderRadius(999)
|
.borderRadius(12)
|
||||||
}
|
}
|
||||||
.layoutWeight(1) // 等分
|
.layoutWeight(1) // 等分
|
||||||
.height('100%')
|
.height('100%')
|
||||||
|
|||||||
Reference in New Issue
Block a user