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:
@@ -13,7 +13,9 @@
|
||||
*/
|
||||
|
||||
import { FbColors, FbMetric } from '../common/Theme';
|
||||
import { FbModuleDef, fbModuleOf, fbThemeVars } from '../model/Modules';
|
||||
import { FbCinemaItem } from '../data/FbMovieRepo';
|
||||
import { FbSheetRing } from './FbSheetRing';
|
||||
|
||||
/**
|
||||
* 贴底卡片的手势区缓冲（vp）。
|
||||
@@ -33,122 +35,143 @@ export struct FbCinemaSheet {
|
||||
@Event onClose: () => void = (): void => {
|
||||
};
|
||||
|
||||
/**
|
||||
* 卡片外圈描边环的颜色（hex，'' = 用观影模块色）。
|
||||
*
|
||||
* ⚠️ 必须是字符串：环色要直接当背景色（`FbColors.brand` 是 `Resource`，用不了）。
|
||||
*/
|
||||
@Param accent: string = '';
|
||||
|
||||
/** 环色：显式给了就用给的，否则取观影模块色（影院属于观影） */
|
||||
private accentColor(): string {
|
||||
if (this.accent !== '') {
|
||||
return this.accent;
|
||||
}
|
||||
const m: FbModuleDef | undefined = fbModuleOf('movies');
|
||||
return fbThemeVars(m !== undefined ? m.color : '#A84A28').brand;
|
||||
}
|
||||
|
||||
build() {
|
||||
// FB_WRAP_CENTER：把卡片**垂直居中**（用户 2026-10-16 要求：浮在屏幕中间）。
|
||||
// ⚠️ 居中放在**组件内部**做，而不是改宿主的 Stack 对齐 ——
|
||||
// 宿主 Stack 里还有别的子元素（日程页的悬浮 ＋），改对齐会连带挪走它们。
|
||||
// ⚠️ 外层铺满 + Center；内层仍是那张 92% 宽的圆角卡。
|
||||
Column() {
|
||||
Column({ space: 0 }) {
|
||||
// ---- 标题 ----
|
||||
Row() {
|
||||
Column({ space: 2 }) {
|
||||
Text('影院')
|
||||
.fontSize(FbMetric.fontTitle)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(FbColors.ink)
|
||||
Text(this.cinemas.length.toString() + ' 家 · 按名字排序')
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.layoutWeight(1)
|
||||
// 🔴 2026-10-19：卡片外面加**主题色环**（用户：「所有弹框都加线」），
|
||||
// 由共用组件 `FbSheetRing` 统一给；这一层只负责 92% 宽度。
|
||||
Column() {
|
||||
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
|
||||
Column({ space: 0 }) {
|
||||
// ---- 标题 ----
|
||||
Row() {
|
||||
Column({ space: 2 }) {
|
||||
Text('影院')
|
||||
.fontSize(FbMetric.fontTitle)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(FbColors.ink)
|
||||
Text(this.cinemas.length.toString() + ' 家 · 按名字排序')
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.layoutWeight(1)
|
||||
|
||||
Text('关闭')
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(FbColors.muted)
|
||||
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
|
||||
.backgroundColor(FbColors.inputBg)
|
||||
.borderRadius(FbMetric.radiusS)
|
||||
.onClick((): void => {
|
||||
this.onClose();
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.alignItems(VerticalAlign.Center)
|
||||
|
||||
Divider()
|
||||
.color(FbColors.line)
|
||||
.margin({ top: 12, bottom: 4 })
|
||||
|
||||
// ---- 列表 ----
|
||||
// ⚠️ 用 List 而不是 ForEach 堆在 Column 里：影院可能几十家，
|
||||
// List 才会**按需渲染**（进视口才建），Column 会一次全建。
|
||||
if (this.cinemas.length === 0) {
|
||||
Text('还没有影院。同步观影记录后，去过的地方会自动出现在这里。')
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(FbColors.faint)
|
||||
Text('关闭')
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(FbColors.muted)
|
||||
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
|
||||
.backgroundColor(FbColors.inputBg)
|
||||
.borderRadius(FbMetric.radiusS)
|
||||
.onClick((): void => {
|
||||
this.onClose();
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ top: 32, bottom: 32, left: 12, right: 12 })
|
||||
.textAlign(TextAlign.Center)
|
||||
} else {
|
||||
List({ space: 0 }) {
|
||||
ForEach(this.cinemas, (c: FbCinemaItem, idx: number) => {
|
||||
ListItem() {
|
||||
Column({ space: 0 }) {
|
||||
Row({ space: 12 }) {
|
||||
// 色点：每家影院一个色（与 Web 端一致，便于在别处一眼认出来）
|
||||
Column()
|
||||
.width(10)
|
||||
.height(10)
|
||||
.backgroundColor(c.color)
|
||||
.borderRadius(5)
|
||||
Column({ space: 3 }) {
|
||||
Row({ space: 8 }) {
|
||||
Text(c.name)
|
||||
.fontSize(FbMetric.fontBody)
|
||||
.fontColor(FbColors.ink)
|
||||
.maxLines(1)
|
||||
if (c.movieCount > 0) {
|
||||
Text(c.movieCount.toString() + ' 部')
|
||||
.fontSize(10)
|
||||
.fontColor(FbColors.faint)
|
||||
.alignItems(VerticalAlign.Center)
|
||||
|
||||
Divider()
|
||||
.color(FbColors.line)
|
||||
.margin({ top: 12, bottom: 4 })
|
||||
|
||||
// ---- 列表 ----
|
||||
// ⚠️ 用 List 而不是 ForEach 堆在 Column 里：影院可能几十家，
|
||||
// List 才会**按需渲染**（进视口才建），Column 会一次全建。
|
||||
if (this.cinemas.length === 0) {
|
||||
Text('还没有影院。同步观影记录后，去过的地方会自动出现在这里。')
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(FbColors.faint)
|
||||
.width('100%')
|
||||
.padding({ top: 32, bottom: 32, left: 12, right: 12 })
|
||||
.textAlign(TextAlign.Center)
|
||||
} else {
|
||||
List({ space: 0 }) {
|
||||
ForEach(this.cinemas, (c: FbCinemaItem, idx: number) => {
|
||||
ListItem() {
|
||||
Column({ space: 0 }) {
|
||||
Row({ space: 12 }) {
|
||||
// 色点：每家影院一个色（与 Web 端一致，便于在别处一眼认出来）
|
||||
Column()
|
||||
.width(10)
|
||||
.height(10)
|
||||
.backgroundColor(c.color)
|
||||
.borderRadius(5)
|
||||
Column({ space: 3 }) {
|
||||
Row({ space: 8 }) {
|
||||
Text(c.name)
|
||||
.fontSize(FbMetric.fontBody)
|
||||
.fontColor(FbColors.ink)
|
||||
.maxLines(1)
|
||||
if (c.movieCount > 0) {
|
||||
Text(c.movieCount.toString() + ' 部')
|
||||
.fontSize(10)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
}
|
||||
.alignItems(VerticalAlign.Center)
|
||||
|
||||
// 场所 / 地址（有才显示）
|
||||
if (c.place !== '' || c.address !== '') {
|
||||
Text(c.place !== '' ? c.place : c.address)
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.muted)
|
||||
.maxLines(1)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
}
|
||||
}
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.layoutWeight(1)
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: 4, right: 4, top: 11, bottom: 11 })
|
||||
.alignItems(VerticalAlign.Center)
|
||||
|
||||
// 场所 / 地址（有才显示）
|
||||
if (c.place !== '' || c.address !== '') {
|
||||
Text(c.place !== '' ? c.place : c.address)
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.muted)
|
||||
.maxLines(1)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
if (idx < this.cinemas.length - 1) {
|
||||
Divider()
|
||||
.strokeWidth(0.5)
|
||||
.color(FbColors.line)
|
||||
}
|
||||
}
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: 4, right: 4, top: 11, bottom: 11 })
|
||||
.alignItems(VerticalAlign.Center)
|
||||
|
||||
if (idx < this.cinemas.length - 1) {
|
||||
Divider()
|
||||
.strokeWidth(0.5)
|
||||
.color(FbColors.line)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
}, (c: FbCinemaItem): string => 'cin_' + c.id.toString())
|
||||
}
|
||||
}, (c: FbCinemaItem): string => 'cin_' + c.id.toString())
|
||||
.width('100%')
|
||||
.layoutWeight(1)
|
||||
.scrollBar(BarState.Off)
|
||||
.edgeEffect(EdgeEffect.Spring)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.layoutWeight(1)
|
||||
.scrollBar(BarState.Off)
|
||||
.edgeEffect(EdgeEffect.Spring)
|
||||
}
|
||||
}
|
||||
// 🔴 用户 2026-10-16：「它应该弹出一个**圆角的、浮在上面的卡片**……
|
||||
// **不要让它左右充满整个屏幕，下面也不要挨着屏幕**，
|
||||
// 而是放在**屏幕中间**，采用**圆角浮窗**式的形式。」
|
||||
// ⇒ 不再贴底满宽：左右留边、四角圆角、垂直居中（由宿主的 Stack 对齐）。
|
||||
.width('100%')
|
||||
.constraintSize({ maxHeight: '72%' })
|
||||
.padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP })
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
}
|
||||
.width('92%')
|
||||
.constraintSize({ maxHeight: '72%' })
|
||||
.padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP })
|
||||
.backgroundColor(FbColors.surface)
|
||||
.borderRadius(FbMetric.radius)
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
|
||||
Reference in New Issue
Block a user