fix(周视图): 星期标签移到圆外,圆径回到 46vp 与月视图一致 #6

用户反馈:上一版圆太大,把"一"(星期标签)也圈进去了,不应包进来。

## 结构调整
原来(错):
    Stack{ 圆(54vp), Column{ 星期+日期+农历+点 } }
    —— 为了让圆包住"一"把圆径撑到 54vp,结果星期也被圈进去

现在(对):
    Column
      ├ Text(星期)        ← 在圆外
      └ Stack{ 圆(46vp), Column{ 日期+农历+点 } }

圆只包 日期(72)+农历(27)+点(11)+间隙 ≈ 116px,46vp(138px) 够用,
圆径回到与月视图完全一致。

## 过程说明(走了弯路)
这轮我先用脚本做局部替换,结果括号层级错乱,改了三版都没编译过:
  · 版1:找不到锚点(注释文字叠加,锚点不匹配)
  · 版2:补闭合时多写了一个 `}`,报 "Declaration or statement expected"
  · 版3:`Stack` 不支持 `justifyContent`,报 "Property 'justifyContent' does not
         exist on type 'StackAttribute'"

最后**整体重写整个 dayCellCircle 函数**(按行号范围一次性替换)才干净。

## 结论
多层嵌套(Column > Stack > Column)的 ArkUI 结构,靠脚本做局部增删很容易
括号错位。**这类改动应当整块替换而不是局部 patch**,一次写对更省时间。
This commit is contained in:
2026-11-02 22:11:21 +08:00
parent ddaf41fee8
commit d8ee2aa2be
+40 -33
View File
@@ -3309,41 +3309,49 @@ struct Index {
* 第一版把蓝底铺在 Column 上 → 得到 149×133 的圆角方块(用户不满意)
* 这一版用 46vp 正方形 → 真正的圆
*/
// RING_CLEANUP
/**
* 月/周视图的日期格。
*
* 层级设计(改过好几轮,这里定稿):
* Column ← 整格,承接点击
* ├ Text(星期) ← 仅周条有,**在圆外面**
* └ Stack
* ├ 圆底(选中=实蓝 / 今天=淡蓝,46vp)
* └ Column ← 日期数字 / 农历 / 事件点,圆只包这三个
*
* ⚠️ 为什么星期放在 Stack 外面:
* 放进圆里的话,为了让圆包住它就得把圆撑到 54vp,结果星期也被圈进圆内,
* 视觉上很怪(用户明确否掉了)。
* 放外面后圆只包 日期(72)+农历(27)+点(11)+间隙 ≈ 116px,46vp(138px) 够用,
* 且与月视图完全一致。
*/
@Builder
dayCellCircle(cell: MonthCell, showWeekLabel: boolean = false) {
// 显式 Center:Stack 默认虽也居中,但内容高于圆时对齐行为容易偏,
// 写死更可控(周条曾是"上露星期、下漏圆点")。
Stack({ alignContent: Alignment.Center }) {
// ⭐ TODAY_RING 底层圆:选中用实蓝,今天用淡蓝,尺寸一致。
// 原来今天只在日期数字上贴了个 24×24 的小圈,选中却是 46vp 大圆,
// 同一天"选不选中"看起来像两种东西。现在两者尺寸统一。
// ⭐ RING_FIT 圆径必须**按内容高度**取,不能一刀切。
// 周条比月历多一行"星期标签",内容约 147px;圆固定 46vp(138px) 时
// 就会上露"一"、下漏事件点。周条用 54vp(≈162px) 才包得住。
// 月视图没有星期标签、内容约 118px,46vp 刚好。
if (cell.dateMs === this.selectedDate) {
Column()
.width(showWeekLabel ? 54 : (this.wideLayout ? 40 : 46))
.height(showWeekLabel ? 54 : (this.wideLayout ? 40 : 46))
.borderRadius('50%')
.backgroundColor($r('app.color.selected_bg'))
} else if (cell.isToday) {
Column()
.width(showWeekLabel ? 54 : (this.wideLayout ? 40 : 46))
.height(showWeekLabel ? 54 : (this.wideLayout ? 40 : 46))
.borderRadius('50%')
.backgroundColor($r('app.color.today_bg'))
}
// 上层:原有内容(星期标签 / 日期数字 / 农历 / 事件点)
Column({ space: 1 }) {
// ⭐ 周条需要星期标签(一/二/三…),月视图的星期在表头单独一行、
// 不在这里,所以用参数控制,默认不显示以免破坏月视图布局。
// 星期标签:圆外,仅周条显示(月视图的星期在表头单独一行)
if (showWeekLabel) {
Text(WEEK_LABELS[(new Date(cell.dateMs).getDay() + 6) % 7])
.fontSize(10)
.fontColor(cell.dateMs === this.selectedDate
? $r('app.color.button_text') : $r('app.color.text_secondary'))
? $r('app.color.brand_text') : $r('app.color.text_secondary'))
}
Stack({ alignContent: Alignment.Center }) {
// 圆底:选中实蓝、今天淡蓝,尺寸一致
if (cell.dateMs === this.selectedDate) {
Column()
.width(this.wideLayout ? 40 : 46)
.height(this.wideLayout ? 40 : 46)
.borderRadius('50%')
.backgroundColor($r('app.color.selected_bg'))
} else if (cell.isToday) {
Column()
.width(this.wideLayout ? 40 : 46)
.height(this.wideLayout ? 40 : 46)
.borderRadius('50%')
.backgroundColor($r('app.color.today_bg'))
}
Column({ space: 1 }) {
Text(String(cell.day))
.fontSize(this.wideLayout ? 12 : 13)
.fontWeight(cell.isToday || cell.dateMs === this.selectedDate
@@ -3356,13 +3364,10 @@ struct Index {
.height(this.wideLayout ? 22 : 24)
.textAlign(TextAlign.Center)
.borderRadius(this.wideLayout ? 11 : 12)
// 背景一律交给底层圆,这里保持透明(否则会出现"大圆里套小圈")
// 背景一律交给底层圆,这里透明(否则"大圆里套小圈")
.backgroundColor(Color.Transparent)
if (!this.wideLayout) {
// ⭐ WEEK_LUNAR_BRIGHT 周条的农历提亮一档:
// 周条是"一周概览",农历紧挨日期数字,用 text_hint(#4D000000)
// 会显得比日期淡太多(实测 rgb≈178 vs 日期 rgb≈40)。
// 周条用 text_secondary,月历保持 text_hint(不破坏已有观感)。
// 周条的农历提亮一档(text_secondary),月历保持 text_hint
Text(cell.lunar)
.fontSize(showWeekLabel ? 9 : 8)
.fontColor(cell.dateMs === this.selectedDate
@@ -3370,6 +3375,7 @@ struct Index {
: (showWeekLabel ? $r('app.color.text_secondary') : $r('app.color.text_hint')))
.maxLines(1)
}
// 事件点:无事件时透明但仍占位,保证行高一致、整月不跳
Circle({ width: this.wideLayout ? 4 : 3.5, height: this.wideLayout ? 4 : 3.5 })
.fill(cell.dateMs === this.selectedDate
? $r('app.color.button_text') : $r('app.color.soft_red'))
@@ -3377,8 +3383,10 @@ struct Index {
}
.justifyContent(FlexAlign.Center)
}
}
.layoutWeight(1)
.padding({ top: this.wideLayout ? 2 : 3, bottom: this.wideLayout ? 2 : 1 })
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.selectedDate = cell.dateMs;
if (!cell.inMonth) {
@@ -3391,7 +3399,6 @@ struct Index {
}
})
}
/** 把 42 个格子按每周 7 个分组 */
private chunkCells(cells: MonthCell[]): MonthCell[][] {
const weeks: MonthCell[][] = [];