v60b:所有弹框统一主题色描边环 + 编辑改居中弹框 + 修名册下拉回弹吃掉悬浮栏
1)9 个浮层统一描边环(抽组件,不复制 8 遍)
新增 components/FbSheetRing.ets:环宽 FB_RING_W=2 全工程唯一一处;
实现是"外层 Column 铺色 + padding",不是 border(border 画在盒子内侧);
外圆角 = 内圆角 + 环宽。简要卡/详情/编辑/日程详情/日程编辑/观影详情/影院/
日程设置/模块设置全部改用;各浮层的环色 = 所属模块的主题色。
2)编辑从"贴底满宽 + 只有上圆角"改成居中弹框
人员编辑与日程编辑:Stack 对齐改 Center,卡片 92% 宽 + 四角圆 + 环;
constraintSize 留在卡片自己身上(挪到外层会让内层 Scroll().layoutWeight
拿到 0 高度,资料区塌成一条线)。日程的日期时间选择弹层、两个删除确认框
一并套环,避免同一次交互里出现两种形态。
3)修名册下拉到头回弹后悬浮按钮消失
EdgeEffect.Spring 在越界松手后把内容弹回,每帧 offset>0 被当成"用户在往上滑"
⇒ 收起悬浮栏。判据 = 手指已抬起 + 最后一次方向是下滑 + 抬手不到 500ms;
拦截必须排在 offset >= HIDE_AT 快路径之前(回弹第一帧位移常 >= 12vp)。
4)真机截图暴露的两个观感问题(静态检查全绿也照错)
- Scroll().layoutWeight(1) 让短内容也撑满 maxHeight ⇒ 卡片空半屏
(日程详情/模块设置),改为 flexShrink(1);内容本来就长的浮层不动。
- 人员编辑"虚拟人物(还没弄清真实身份)"被卡片裁掉半句:两个小开关从
并排 Row 改为 Flex(wrap) 换行,间距改走 margin。
验证:ArkTS 守卫 444/0;反向验证 17/17;真机 _fb_v60b_verify.py 11/0,
且关掉回弹拦截重编重装后该用例确实变红(证明测试不是假绿);
9 个浮层逐个真机截图确认。
This commit is contained in:
@@ -37,11 +37,13 @@
|
||||
|
||||
import { hilog } from '@kit.PerformanceAnalysisKit';
|
||||
import { FbColors, FbMetric, FB_MASK } from '../common/Theme';
|
||||
import { FbModuleDef, fbModuleOf, fbThemeVars } from '../model/Modules';
|
||||
import { FbCalEventFull, FbCalEventInput, FbCalRepo } from '../data/FbCalRepo';
|
||||
import { FbCalBook } from '../model/Types';
|
||||
import { FB_TOKEN_STORE } from '../data/FbTokenStore';
|
||||
import { FB_CAL_SETTINGS } from '../data/FbCalSettings';
|
||||
import { FbEventChip } from './FbEventChip';
|
||||
import { FbSheetRing } from './FbSheetRing';
|
||||
|
||||
const DOMAIN: number = 0x0000;
|
||||
const TAG: string = 'FbEventEdit';
|
||||
@@ -102,6 +104,23 @@ export struct FbEventEditSheet {
|
||||
@Param presetDate: string = '';
|
||||
/** 可选的日历本(新建时要选落到哪本) */
|
||||
@Param books: FbCalBook[] = [];
|
||||
|
||||
/**
|
||||
* 卡片外圈描边环的颜色(hex,'' = 用日程模块色)。
|
||||
*
|
||||
* ⚠️ 必须是字符串:环色要直接当背景色(`FbColors.brand` 是 `Resource`,用不了)。
|
||||
*/
|
||||
@Param accent: string = '';
|
||||
|
||||
/** 环色:显式给了就用给的,否则取日程模块色 */
|
||||
private accentColor(): string {
|
||||
if (this.accent !== '') {
|
||||
return this.accent;
|
||||
}
|
||||
const m: FbModuleDef | undefined = fbModuleOf('calendar');
|
||||
return fbThemeVars(m !== undefined ? m.color : '#A84A28').brand;
|
||||
}
|
||||
|
||||
/** 取消 */
|
||||
@Event onCancel: () => void = (): void => {
|
||||
};
|
||||
@@ -343,8 +362,10 @@ export struct FbEventEditSheet {
|
||||
build() {
|
||||
// 🔴 外层 `Stack` 是**必需**的:本组件有**三个**要显示的层
|
||||
// (编辑卡片 + 日期时间弹层 + 删除确认遮罩),而 build() 只能有一个根节点。
|
||||
// ⚠️ `alignContent: Bottom` 让卡片/弹层都贴底(同一形态)。
|
||||
Stack({ alignContent: Alignment.Bottom }) {
|
||||
// 🔴 2026-10-19 用户:「所有弹框都加线,编辑也弄成弹框,保持一致。」
|
||||
// ⇒ 原来 `alignContent: Bottom`(贴底抽屉),现在改成**居中**,
|
||||
// 与名册的编辑/详情、日程详情同一个形态(四角圆角浮卡 + 主题色环)。
|
||||
Stack({ alignContent: Alignment.Center }) {
|
||||
this.editCard()
|
||||
|
||||
// ---- 「日期 + 时间」选择弹层(照 SyncCalendar)----
|
||||
@@ -362,7 +383,11 @@ export struct FbEventEditSheet {
|
||||
|
||||
@Builder
|
||||
editCard() {
|
||||
Column({ space: 0 }) {
|
||||
// ⚠️ 这一层只给**宽度**(92%);卡片自己必须 100%,
|
||||
// 否则 0.92×0.92 ≈ 84.6%,比别的浮层窄一圈。
|
||||
Column() {
|
||||
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
|
||||
Column({ space: 0 }) {
|
||||
// ---- 标题栏 ----
|
||||
Row({ space: 12 }) {
|
||||
Text(this.isCreate ? '新建日程' : '编辑日程')
|
||||
@@ -538,10 +563,11 @@ export struct FbEventEditSheet {
|
||||
}
|
||||
.width('100%')
|
||||
.constraintSize({ maxHeight: '86%' })
|
||||
.padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP })
|
||||
.backgroundColor(FbColors.surface)
|
||||
.borderRadius({ topLeft: FbMetric.radius, topRight: FbMetric.radius })
|
||||
.padding({ left: 18, right: 18, top: 18, bottom: 20 })
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
}
|
||||
.width('92%')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -640,7 +666,10 @@ export struct FbEventEditSheet {
|
||||
*/
|
||||
@Builder
|
||||
dateTimePickerSheet() {
|
||||
Column({ space: 14 }) {
|
||||
// 🔴 2026-10-19:与其它弹框统一(92% 宽 + 四角圆角 + 主题色环)。
|
||||
Column() {
|
||||
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
|
||||
Column({ space: 14 }) {
|
||||
Text(this.pickIsEnd ? '选择结束时间' : '选择开始时间')
|
||||
.fontSize(FbMetric.fontTitle)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
@@ -693,10 +722,11 @@ export struct FbEventEditSheet {
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.backgroundColor(FbColors.surface)
|
||||
.borderRadius({ topLeft: FbMetric.radius, topRight: FbMetric.radius })
|
||||
.padding({ left: 18, right: 18, top: 8, bottom: 20 + FB_SHEET_BOTTOM_GAP })
|
||||
.padding({ left: 18, right: 18, top: 8, bottom: 20 })
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
}
|
||||
.width('92%')
|
||||
}
|
||||
|
||||
/** `YYYY-MM-DD` → `10月16日 周五`(比裸日期好读,且和时刻并排也不长) */
|
||||
@@ -733,7 +763,10 @@ export struct FbEventEditSheet {
|
||||
@Builder
|
||||
deleteConfirm() {
|
||||
Column() {
|
||||
Column({ space: 8 }) {
|
||||
// 🔴 2026-10-19:确认框也加主题色环("所有弹框都加线"不能漏这一层)
|
||||
Column() {
|
||||
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
|
||||
Column({ space: 8 }) {
|
||||
Text('删除这条日程?')
|
||||
.fontSize(FbMetric.fontBody)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
@@ -772,9 +805,10 @@ export struct FbEventEditSheet {
|
||||
}
|
||||
.width('100%')
|
||||
.padding(18)
|
||||
.backgroundColor(FbColors.surface)
|
||||
.borderRadius(FbMetric.radius)
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
|
||||
Reference in New Issue
Block a user