style(周视图): 选中/今天的圆放大到 42vp #6
用户反馈:周视图的圆不够大。
## 实测数据(设备 dump)
周条每列 Stack = 133 × 192 px
原来圆 = 113 × 113 px(36vp)
周条每列有 192px 高,圆只占 113px,显得空;而且比月视图的 138px 还小,
两个视图的"选中"视觉分量不一致。
## 关键约束:宽度是硬上限
列宽 133px ≈ 44vp。给 52vp(≈156px) 会**横向溢出被裁切**。
所以取 42vp(≈126px),留 7px 余量。
## 字号同步放大
大圆里字太小会失衡,一起调:
日期 14 → 16、日期框 30 → 34
农历 8 → 9、事件点 3.5 → 4
⚠️ 教训:改尺寸前先 dump 量格子实际宽高,别拍脑袋。
这次如果直接按"感觉不够大"给 52,会被裁成方角,又得返工。
This commit is contained in:
@@ -1697,16 +1697,20 @@ struct Index {
|
|||||||
// 原来这里选中只有 30×30 的小圈,跟月视图 46vp 的大圆不一致,
|
// 原来这里选中只有 30×30 的小圈,跟月视图 46vp 的大圆不一致,
|
||||||
// 同一个"选中"在两个视图里长得不一样,会让人以为是不同状态。
|
// 同一个"选中"在两个视图里长得不一样,会让人以为是不同状态。
|
||||||
Stack() {
|
Stack() {
|
||||||
|
// ⭐ WEEK_BIGGER 圆必须够大:实测周条每列 133×192px,
|
||||||
|
// 原来只给 36vp(≈113px),比月视图的 138px 还小,看着空。
|
||||||
|
// 但**列宽 133px ≈ 44vp 是硬上限**,给 52 会横向溢出被裁切,
|
||||||
|
// 所以取 42vp(≈126px),留 7px 余量。
|
||||||
if (cell.dateMs === this.selectedDate) {
|
if (cell.dateMs === this.selectedDate) {
|
||||||
Column()
|
Column()
|
||||||
.width(36)
|
.width(42)
|
||||||
.height(36)
|
.height(42)
|
||||||
.borderRadius('50%')
|
.borderRadius('50%')
|
||||||
.backgroundColor($r('app.color.selected_bg'))
|
.backgroundColor($r('app.color.selected_bg'))
|
||||||
} else if (cell.isToday) {
|
} else if (cell.isToday) {
|
||||||
Column()
|
Column()
|
||||||
.width(36)
|
.width(42)
|
||||||
.height(36)
|
.height(42)
|
||||||
.borderRadius('50%')
|
.borderRadius('50%')
|
||||||
.backgroundColor($r('app.color.today_bg'))
|
.backgroundColor($r('app.color.today_bg'))
|
||||||
}
|
}
|
||||||
@@ -1720,22 +1724,22 @@ struct Index {
|
|||||||
.fontColor(cell.dateMs === this.selectedDate
|
.fontColor(cell.dateMs === this.selectedDate
|
||||||
? $r('app.color.brand_text') : $r('app.color.text_hint'))
|
? $r('app.color.brand_text') : $r('app.color.text_hint'))
|
||||||
Text(String(cell.day))
|
Text(String(cell.day))
|
||||||
.fontSize(14)
|
.fontSize(16)
|
||||||
.fontWeight(cell.dateMs === this.selectedDate || cell.isToday
|
.fontWeight(cell.dateMs === this.selectedDate || cell.isToday
|
||||||
? FontWeight.Bold : FontWeight.Normal)
|
? FontWeight.Bold : FontWeight.Normal)
|
||||||
.fontColor(cell.dateMs === this.selectedDate
|
.fontColor(cell.dateMs === this.selectedDate
|
||||||
? $r('app.color.button_text') : $r('app.color.text_primary'))
|
? $r('app.color.button_text') : $r('app.color.text_primary'))
|
||||||
.width(30)
|
.width(34)
|
||||||
.height(30)
|
.height(34)
|
||||||
.textAlign(TextAlign.Center)
|
.textAlign(TextAlign.Center)
|
||||||
// 背景交给底层圆(否则会出现"大圆套小圈")
|
// 背景交给底层圆(否则会出现"大圆套小圈")
|
||||||
.backgroundColor(Color.Transparent)
|
.backgroundColor(Color.Transparent)
|
||||||
Text(cell.lunar)
|
Text(cell.lunar)
|
||||||
.fontSize(8)
|
.fontSize(9)
|
||||||
.fontColor(cell.dateMs === this.selectedDate
|
.fontColor(cell.dateMs === this.selectedDate
|
||||||
? $r('app.color.button_text') : $r('app.color.text_hint'))
|
? $r('app.color.button_text') : $r('app.color.text_hint'))
|
||||||
.maxLines(1)
|
.maxLines(1)
|
||||||
Circle({ width: 3.5, height: 3.5 })
|
Circle({ width: 4, height: 4 })
|
||||||
.fill(cell.dateMs === this.selectedDate
|
.fill(cell.dateMs === this.selectedDate
|
||||||
? $r('app.color.button_text') : $r('app.color.soft_red'))
|
? $r('app.color.button_text') : $r('app.color.soft_red'))
|
||||||
.opacity(cell.hasEvent ? 1 : 0)
|
.opacity(cell.hasEvent ? 1 : 0)
|
||||||
|
|||||||
Reference in New Issue
Block a user