72 lines
2.6 KiB
Plaintext
72 lines
2.6 KiB
Plaintext
|
/**
|
|||
|
|
* 家书 FamilyBook · 设置里的「单选行」（鸿蒙端）
|
|||
|
|
*
|
|||
|
|
* 🔴🔴 为什么必须是**组件**而不是 `@Builder`（用户 2026-10-16 报的真 bug）：
|
|||
|
|
* 「设置里面这个"**默认视图**"，**都没法点**，也没有办法设置。」
|
|||
|
|
* 根因：原来是 `FbCalSettingsSheet.radioRow(label, hint, on: boolean, onTap)` ——
|
|||
|
|
* **`@Builder` 的值类型参数（boolean）不参与状态观察**
|
|||
|
|
* （SDK 规则 `r/quick-rules/05-state.md`：按值传递「状态变化刷新 ❌」）。
|
|||
|
|
* ⇒ 点一下 `this.view` 确实变了、`FB_CAL_SETTINGS.setView()` 也确实写了，
|
|||
|
|
* 但**打勾 ✓ 与高亮底色的那份子树不重建** ⇒ 看着"点了没反应"。
|
|||
|
|
* 本项目已在 `FbTagChip` 上踩过同一个坑（见那份文件头），这里照同样办法修。
|
|||
|
|
*
|
|||
|
|
* ⚠️ 顺带说明：ForEach 的 key **不用**带选中态 —— 只要这一片是
|
|||
|
|
* `@ComponentV2` + `@Param`，`active` 变了它自己就会重建。
|
|||
|
|
* （`FbTagChip` 的 key 也只是标签名。）
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { FbColors, FbMetric } from '../common/Theme';
|
|||
|
|
import { FbDot } from './Widgets';
|
|||
|
|
|
|||
|
|
@ComponentV2
|
|||
|
|
export struct FbCalOptionRow {
|
|||
|
|
/** 主文字 */
|
|||
|
|
@Param label: string = '';
|
|||
|
|
/** 副说明（小字；空则不占位） */
|
|||
|
|
@Param hint: string = '';
|
|||
|
|
/** 是否选中（**必须由父组件算好传进来**） */
|
|||
|
|
@Param active: boolean = false;
|
|||
|
|
/** 左侧色点（日历本那几行用它；空则不画） */
|
|||
|
|
@Param dotColor: string = '';
|
|||
|
|
/** 被点击 */
|
|||
|
|
@Event onPick: () => void = (): void => {
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
build() {
|
|||
|
|
Row({ space: 10 }) {
|
|||
|
|
if (this.dotColor !== '') {
|
|||
|
|
FbDot({ dia: 10, fillC: this.dotColor })
|
|||
|
|
}
|
|||
|
|
Column({ space: 2 }) {
|
|||
|
|
Text(this.label)
|
|||
|
|
.fontSize(FbMetric.fontSmall)
|
|||
|
|
.fontColor(this.active ? '#4A7C82' : FbColors.ink)
|
|||
|
|
.fontWeight(this.active ? FontWeight.Medium : FontWeight.Normal)
|
|||
|
|
.maxLines(2)
|
|||
|
|
if (this.hint !== '') {
|
|||
|
|
Text(this.hint)
|
|||
|
|
.fontSize(FbMetric.fontTiny)
|
|||
|
|
.fontColor(FbColors.faint)
|
|||
|
|
.maxLines(2)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.alignItems(HorizontalAlign.Start)
|
|||
|
|
.layoutWeight(1)
|
|||
|
|
|
|||
|
|
Text(this.active ? '✓' : '')
|
|||
|
|
.fontSize(FbMetric.fontSmall)
|
|||
|
|
.fontColor('#4A7C82')
|
|||
|
|
.width(20)
|
|||
|
|
.textAlign(TextAlign.Center)
|
|||
|
|
}
|
|||
|
|
.width('100%')
|
|||
|
|
.padding({ top: 10, bottom: 10, left: 12, right: 12 })
|
|||
|
|
.backgroundColor(this.active ? '#EAF2F2' : FbColors.inputBg)
|
|||
|
|
.borderRadius(FbMetric.radiusS)
|
|||
|
|
.margin({ bottom: 8 })
|
|||
|
|
.alignItems(VerticalAlign.Center)
|
|||
|
|
.onClick((): void => {
|
|||
|
|
this.onPick();
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|