fix(待办): 新建/编辑弹层改为「固定头 + 可滚动字段 + 固定底部按钮」(#46)
## 现象
新建待办弹层字段越来越多(日历本/标题/截止/循环/优先级/提醒/标签/地点/
父任务/附件/备注),整块 Column 一路往下铺,总高超出屏幕后**滑不动**,
底部「取消」「创建」按钮点不到,导致无法建单。
## 根因
弹层外层 `Column({ space: 12 })` 只有 `width('100%')`,**没有高度约束,也没有 Scroll**。
内容超过屏幕高度时直接溢出,超出部分既不可见也不可滚。
## 改法(参照新建日程页 EventEditPage 的做法)
1. 外层 Column 加 `.constraintSize({ maxHeight: '88%' })`
—— 内容少时自动收缩,内容多时不再顶出屏幕
2. 标题行保留在 Scroll 之外(固定可见)
3. 所有字段包进 `Scroll` + `Column`,`layoutWeight(1)` 吃掉剩余高度
4. 「取消/创建」按钮移出 Scroll,固定在底部
结构变成:固定头 → Scroll(字段) → 固定底部按钮,与日程编辑页一致。
## 编译
BUILD SUCCESSFUL
## 未验证
真机(设备锁屏),需解锁后验证:能滚动到备注、取消/创建可点。
This commit is contained in:
@@ -3034,6 +3034,12 @@ struct Index {
|
|||||||
}
|
}
|
||||||
.width('100%')
|
.width('100%')
|
||||||
|
|
||||||
|
// ⭐ 中间字段区可滚动(#46):原来整块 Column 直接铺开,
|
||||||
|
// 字段一多就顶出屏幕且滑不动 → 底部按钮点不到。
|
||||||
|
// 这里参照新建日程页:固定头 + Scroll 承载字段 + 固定底部按钮。
|
||||||
|
Scroll() {
|
||||||
|
Column({ space: 12 }) {
|
||||||
|
|
||||||
// 日历本区:新建时**铺开全部可写本供选择**(与新建日程一致的交互),
|
// 日历本区:新建时**铺开全部可写本供选择**(与新建日程一致的交互),
|
||||||
// 编辑时只读显示归属本(改归属等于搬家,不支持原地改)
|
// 编辑时只读显示归属本(改归属等于搬家,不支持原地改)
|
||||||
if (this.todoCreating) {
|
if (this.todoCreating) {
|
||||||
@@ -3358,6 +3364,15 @@ struct Index {
|
|||||||
this.todoEditDesc = v;
|
this.todoEditDesc = v;
|
||||||
})
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.layoutWeight(1)
|
||||||
|
.width('100%')
|
||||||
|
.scrollBar(BarState.Off)
|
||||||
|
.edgeEffect(EdgeEffect.Spring)
|
||||||
|
.align(Alignment.Top)
|
||||||
|
|
||||||
|
// 底部按钮固定在 Scroll 之外,滚动时始终可见(#46)
|
||||||
Row({ space: 10 }) {
|
Row({ space: 10 }) {
|
||||||
Button('取消')
|
Button('取消')
|
||||||
.layoutWeight(1)
|
.layoutWeight(1)
|
||||||
@@ -3382,6 +3397,8 @@ struct Index {
|
|||||||
.width('100%')
|
.width('100%')
|
||||||
}
|
}
|
||||||
.width('100%')
|
.width('100%')
|
||||||
|
// ⭐ 高度上限 88%(#46):内容少时自动收缩,内容多时不再顶出屏幕
|
||||||
|
.constraintSize({ maxHeight: '88%' })
|
||||||
.padding(18)
|
.padding(18)
|
||||||
.borderRadius({ topLeft: 18, topRight: 18 })
|
.borderRadius({ topLeft: 18, topRight: 18 })
|
||||||
.backgroundColor($r('app.color.card_bg'))
|
.backgroundColor($r('app.color.card_bg'))
|
||||||
|
|||||||
Reference in New Issue
Block a user