refactor(app): 优化 AI 文档视图样式和交互

- 调整 AIDocumentView 组件的样式,移除底部边距
- 实现 SwipeView 组件的滑动删除功能,增加触摸事件处理
这个提交包含在:
徐勤民 2025-05-22 19:08:04 +08:00
父节点 67a57048ad
当前提交 19c6da53f9

查看文件

@ -1,6 +1,8 @@
@Component
export struct SwipeView {
private _scroller: Scroller = new Scroller()
@State h: Length = 40
@State downX: number = 0
@Builder
doNothingBuilder() {
@ -11,7 +13,7 @@ export struct SwipeView {
// @BuilderParam btnBuilder: () => void = this.doNothingBuilder
build() {
Scroll() {
Scroll(this._scroller) {
Row() {
this.customBuilderParam()
Text('删除')
@ -30,6 +32,39 @@ export struct SwipeView {
}.onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
this.h = newValue.height ?? 40
}).alignItems(VerticalAlign.Center)
}.width('100%').scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)
.onTouch((event: TouchEvent) => { // 触摸事件
// 判断是否有打开删除组件,有则关闭
// 根据触摸类型判断
switch (event.type) {
case TouchType.Down: // 触摸按下
// 记录按下的x轴坐标
this.downX = event.touches[0].x
break
case TouchType.Up: // 触摸抬起
// 触摸抬起,根据x轴总偏移量,判断是否打开删除
let xOffset = event.touches[0].x - this.downX
// 防止消费点击事件
if (xOffset == 0) {
return
}
// 滑到x轴的位置
let toxOffset = 0
// 开启删除的对象置为null
// 偏移量超过删除按钮一半且左滑,设置打开
if (Math.abs(xOffset) > 35 && xOffset < 0) {
// 删除布局宽度
toxOffset = 70
}
// 滑动指定位置,设置动画
this._scroller.scrollTo({ xOffset: toxOffset, yOffset: 0,
animation: { duration: 300, curve: Curve.Linear } })
// 重置按下的x轴坐标
this.downX = 0
break
}
})
}
}