如何在鴻蒙上實現(xiàn)聊天列表滑動刪除功能

本項目基于 ArkUI 中 TS 擴展的聲明式開發(fā)范式，關于語法和概念直接看官網(wǎng)。

基于 TS 擴展的聲明式開發(fā)范式 1：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-ts-overview-0000001192705715

https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-framework-directory-0000001111581264

本文介紹列表滑動刪除：

• 列表中只允許滑出其中一項

• 如果有打開的項，點擊或滑動其他項都會關閉打開的項

• 點擊刪除，刷新列表界面

主要知識點

可滑動的容器組件（Scroll）：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-container-scroll-0000001163543527

觸摸事件（onTouch）：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-universal-events-touch-0000001158261221

實現(xiàn)思路

我把界面精簡了一下，減少代碼量，幫助更好的理解主要邏輯。

.....
Scroll(){
Row(){
Text('內(nèi)容數(shù)據(jù)')
.width('100%').height(65)

Button(){
Text('刪除')
}
.width(100).height(65)
}
}.scrollable(ScrollDirection.Horizontal)//設置為橫向滑動
.....

給 Scroll 容器綁定滑動組件的控制器，只用到其中的一個方法：滑動到指定位置 scrollTo。

scrollTo(
value:{
xOffset:number|string,yOffset:number|string,animation?
:{duration:number,curve:Curve}
}
);

部分代碼如下：

.....
//初始化控制器
privatescroller=newScroller()
Scroll(scroller){//控制器綁定到滑動容器中
Row(){
Text('內(nèi)容數(shù)據(jù)')
.width('100%').height(65)

Button(){
Text('刪除')
}
.width(100).height(65)
}
}.scrollable(ScrollDirection.Horizontal)

Button(){
Text('點擊回到原位')
}.onClick(()=>{
scroller.scrollTo({xOffset:0,yOffset:0,animation:{duration:200,curve:Curve.Linear}})
})
.....

部分代碼如下：

.....
//初始化控制器
privatescroller=newScroller()
//按下的x軸坐標
privatedownX=0
//刪除按鈕的寬度
privatedeleteWidth=100

Scroll(scroller){//控制器綁定到滑動容器中
Row(){
Text('內(nèi)容數(shù)據(jù)')
.width('100%').height(65)

Button(){
Text('刪除')
}
.width(this.deleteWidth).height(65)
}
}.scrollable(ScrollDirection.Horizontal)
.onTouch((event:TouchEvent)=>{//觸摸事件
//根據(jù)觸摸類型判斷
switch(event.type){
caseTouchType.Down://觸摸按下
//記錄按下的x軸坐標
this.downX=event.touches[0].x
break
caseTouchType.Up://觸摸抬起
//觸摸抬起，根據(jù)x軸總偏移量，判斷是否打開刪除
letxOffset=event.touches[0].x-this.downX
//滑到目標x軸的位置
vartoxOffset=0
//偏移量超過刪除按鈕一半且左滑，設置打開
if(Math.abs(xOffset)>vp2px(this.deleteWidth)/2&&xOffset0){
//刪除布局寬度
toxOffset=vp2px(this.deleteWidth)
}
//滑動指定位置，設置動畫
item.scroller.scrollTo({xOffset:toxOffset,yOffset:0,
animation:{duration:300,curve:Curve.Linear}})
//重置按下的x軸坐標
this.downX=0
break
}
})
.....

• 需要給每個 item 綁定控制器，這樣才能控制對應的 item 打開或關閉

• 打開的 item 記錄一下數(shù)據(jù)，點擊內(nèi)容或刪除、滑動其他 item：如果有帶打開的 item，進行關閉

以下是完整代碼，可直接粘貼運行使用：

classTestData{
content:string
scroller:Scroller

constructor(content:string,scroller:Scroller){
this.content=content
this.scroller=scroller
}
}

@Entry
@Component
structSlidingDeleteList{
//刪除按鈕的寬度
privatedeleteWidth=100
//按下的x軸坐標
privatedownX=0
//已經(jīng)打開刪除的數(shù)據(jù)
privateopenDeleteData:TestData=null
//測試數(shù)據(jù)
@StateprivatelistData:Array=[
{content:'內(nèi)容數(shù)據(jù)1',scroller:newScroller()},{content:'內(nèi)容數(shù)據(jù)2',scroller:newScroller()},
{content:'內(nèi)容數(shù)據(jù)3',scroller:newScroller()},{content:'內(nèi)容數(shù)據(jù)4',scroller:newScroller()},
{content:'內(nèi)容數(shù)據(jù)5',scroller:newScroller()},{content:'內(nèi)容數(shù)據(jù)6',scroller:newScroller()},
{content:'內(nèi)容數(shù)據(jù)7',scroller:newScroller()},{content:'內(nèi)容數(shù)據(jù)8',scroller:newScroller()},
]

@BuilderCustomItem(item:TestData){
Scroll(item.scroller){
Row(){
Text(item.content)
.width('100%').height(65)
.fontSize(16).textAlign(TextAlign.Center)
.onClick(()=>{
//如果刪除按鈕打開，關閉刪除按鈕且返回
if(this.openDeleteData!=null){
this.openDeleteData.scroller.scrollTo({xOffset:0,yOffset:0,
animation:{duration:100,curve:Curve.Linear}})
this.openDeleteData=null
return
}
console.log('========點擊內(nèi)容=========')
})

Button(){
Text('刪除')
.fontSize(15)
.fontColor(Color.White)
}
.type(ButtonType.Normal)
.width(this.deleteWidth).height(65)
.backgroundColor(Color.Red)
.onClick(()=>{
//刪除當前數(shù)據(jù)
this.listData.splice(this.listData.indexOf(item),1)

//關閉刪除按鈕
if(this.openDeleteData!=null){
this.openDeleteData.scroller.scrollTo({xOffset:0,yOffset:0,
animation:{duration:100,curve:Curve.Linear}})
this.openDeleteData=null
}
console.log('========點擊刪除=========')
})
}
}.scrollable(ScrollDirection.Horizontal)
.onTouch((event:TouchEvent)=>{//觸摸事件
//判斷是否有打開刪除組件，有則關閉
if(this.openDeleteData!=null&&this.openDeleteData!=item){
this.openDeleteData.scroller.scrollTo({xOffset:0,yOffset:0,
animation:{duration:100,curve:Curve.Linear}})
}

//根據(jù)觸摸類型判斷
switch(event.type){
caseTouchType.Down://觸摸按下
//記錄按下的x軸坐標
this.downX=event.touches[0].x
break
caseTouchType.Up://觸摸抬起
//觸摸抬起，根據(jù)x軸總偏移量，判斷是否打開刪除
letxOffset=event.touches[0].x-this.downX
//防止消費點擊事件
if(xOffset==0){
return
}
//滑到x軸的位置
vartoxOffset=0
//開啟刪除的對象置為null
this.openDeleteData=null;
//偏移量超過刪除按鈕一半且左滑，設置打開
if(Math.abs(xOffset)>vp2px(this.deleteWidth)/2&&xOffset0){
//刪除布局寬度
toxOffset=vp2px(this.deleteWidth)
this.openDeleteData=item
}
//滑動指定位置，設置動畫
item.scroller.scrollTo({xOffset:toxOffset,yOffset:0,
animation:{duration:300,curve:Curve.Linear}})
//重置按下的x軸坐標
this.downX=0
break
}
})
}

build(){
Column(){
List(){
ForEach(this.listData,item=>{
ListItem(){
this.CustomItem(item)
}
},item=>item.toString())
}.divider({color:'#f1efef',strokeWidth:1})
}
.width('100%')
.height('100%')
}
}

結尾