50 lines
2.3 KiB
Plaintext
50 lines
2.3 KiB
Plaintext
|
/**
|
|||
|
|
* 家书 FamilyBook · 可选中胶囊片（鸿蒙端）
|
|||
|
|
*
|
|||
|
|
* 日程「新建/编辑」里给**重复**和**提醒**两组选项用。
|
|||
|
|
*
|
|||
|
|
* 🔴🔴 为什么必须是**组件**而不是 `@Builder`（用户 2026-10-16 报的真 bug）：
|
|||
|
|
* 「重复和提醒都挤在一块了……而且**重复和提醒什么的都点不了**。」
|
|||
|
|
* 根因：原来是 `FbEventEditSheet.chip(label, on: boolean, onTap)` ——
|
|||
|
|
* **`@Builder` 的值类型参数（boolean）不参与状态观察**
|
|||
|
|
* （SDK 规则 `r/quick-rules/05-state.md`：按值传递「状态变化刷新 ❌」）。
|
|||
|
|
* ⇒ 点一下 `this.fRepeat` / `this.fRemind` 确实改了、保存也发得出去，
|
|||
|
|
* 但**选中态那份子树不重建** ⇒ 界面上没有任何反馈 ⇒ 看着"点不了"。
|
|||
|
|
* 本项目已在 `FbTagChip`、`FbCalOptionRow` 上踩过同一个坑（各见其文件头）。
|
|||
|
|
* ⇒ 统一做法：抽成 `@ComponentV2` + `@Param active`。
|
|||
|
|
*
|
|||
|
|
* ⚠️ 顺带的另一处：它原来是裸放在 `Flex({wrap})` 里、**没有 margin** ——
|
|||
|
|
* 项目里别处的 wrap 都写了 `.margin({ right: 8, bottom: 8 })`
|
|||
|
|
* （见 `FbHomePage` 的标签云、`FbSettingsPage` 的色板）。
|
|||
|
|
* 少了 margin，两行 chip 会**贴在一起**（这正是"挤在一块"的观感来源）。
|
|||
|
|
* ⇒ margin 放在**本组件根节点**上，调用方不用再写。
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { FbColors, FbMetric } from '../common/Theme';
|
|||
|
|
|
|||
|
|
@ComponentV2
|
|||
|
|
export struct FbEventChip {
|
|||
|
|
/** 显示文字 */
|
|||
|
|
@Param label: string = '';
|
|||
|
|
/** 是否选中（**必须由父组件按状态算好传进来**） */
|
|||
|
|
@Param active: boolean = false;
|
|||
|
|
/** 选中时的底色（默认用日程模块的主题色；日历本那组传本色） */
|
|||
|
|
@Param activeBg: string = '#4A7C82';
|
|||
|
|
/** 被点击 */
|
|||
|
|
@Event onPick: () => void = (): void => {
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
build() {
|
|||
|
|
Text(this.label)
|
|||
|
|
.fontSize(FbMetric.fontSmall)
|
|||
|
|
.fontColor(this.active ? Color.White : FbColors.muted)
|
|||
|
|
.backgroundColor(this.active ? this.activeBg : FbColors.inputBg)
|
|||
|
|
.borderRadius(FbMetric.radiusPill)
|
|||
|
|
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
|
|||
|
|
// ⚠️ 间距放在组件内部：wrap 容器里的子项必须自己有 margin，否则会贴在一起
|
|||
|
|
.margin({ right: 8, bottom: 8 })
|
|||
|
|
.onClick((): void => {
|
|||
|
|
this.onPick();
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|