HarmonyOS鸿蒙Next中ListItem左滑

HarmonyOS鸿蒙Next中ListItem左滑 列表正常显示UI

左滑需要显示的UI

使用swipeAction达不到效果, 然后尝试用Stack做最外容器, 删除按钮超过宽度, 左滑后能达到效果, 但是正常显示会出现漏底色情况

下面贴出ListItem代码 itemEnd是占坑位

ListItem() {

    //主-内容区域
    Stack(){
      //底部占位
      Row(){
        //占用95%
        Text().width('95%')
        //额外超出15%
        Text('删\n除')
          .fontSize(16)
          .backgroundColor($r('app.color.red_CB272D'))
          .borderRadius({ topRight: 8, bottomRight: 8 })
          .padding({left:12})
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
          .width('20%')
          .height('100%')
          .onClick(() => {
            ToastUtil.showShort('删除')

          });
      }.width('100%')
      .height('100%')
      //内容
      this.buildContent(item)
    }.width('100%')
    .height(110)


}
.margin({ top: index === 0 ? 12 : 0, bottom: 23 })
.borderRadius(8)
.border({ radius: 8 })
.swipeAction({ end:  this.itemEnd.bind(this), edgeEffect: SwipeEdgeEffect.Spring })

更多关于HarmonyOS鸿蒙Next中ListItem左滑的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

圆角保持一致就行了，但是看你也设置了，row也设置一下试试

更多关于HarmonyOS鸿蒙Next中ListItem左滑的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


row设置了也不行, 我试过了, 因为是要ListItem盖在超出去部分背景上面，

的确有点奇怪，我细看了下，那点红色好像还是直角的？，

里面的圆角再加大试试，看效果，

this.buildContent(item)

这里面组件的 borderRadius也设置成8试试 或者通过swipeactionitem的onEnterActionArea回调控制stack底部组件的可见性 对象说明

HarmonyOS Next中ListItem左滑功能通过SwipeAction组件实现。开发者可在ListItem内配置startAction和endAction区域，分别定义左右滑动时显示的按钮或操作项。每个Action支持设置背景色、文本、图标及点击事件。系统默认提供删除、收藏等预置样式，同时支持完全自定义UI和交互逻辑。滑动操作遵循HarmonyOS设计规范，具有流畅的动效和触感反馈。

在HarmonyOS Next中实现你展示的左滑删除效果，使用swipeAction是正确的方式。从你的代码和描述来看，核心问题在于swipeAction的end参数配置和ListItem的布局层级。

你的itemEnd组件（即红色“删除”按钮）被直接放在了ListItem的Stack布局中，这导致了两个问题：

  1. 布局重叠：swipeAction的end组件在滑动时会覆盖在ListItem内容之上。而你的Stack布局里，底部的Row（包含占位和删除按钮）已经和上层的内容区域重叠。这造成了视觉错乱和“漏底色”。
  2. 宽度计算：end组件的宽度应由swipeAction控制，不应在ListItem的主内容布局里预先占位。

解决方案：重构组件结构

将“删除”按钮从ListItem的主内容Stack中完全剥离，仅作为swipeAction的end参数提供。ListItem内部只负责显示主内容。

修改后的核心结构示意如下：

// 1. 首先，构建一个独立的删除按钮组件，它将被用作滑出项。
@Builder itemEnd() {
  // 这个Builder构建的是滑动后出现的按钮
  Text('删除')
    .fontSize(16)
    .backgroundColor($r('app.color.red_CB272D'))
    .borderRadius({ topRight: 8, bottomRight: 8 })
    .padding({ left: 12, right: 12 }) // 建议左右都加一些padding
    .fontColor(Color.White)
    .textAlign(TextAlign.Center)
    .height('100%') // 高度撑满ListItem
    .onClick(() => {
      ToastUtil.showShort('删除')
      // 这里可以触发删除列表项的数据操作
    })
}

// 2. 在ListItem中，只构建主内容区域。
ListItem() {
  // 这是始终可见的主内容区域
  this.buildContent(item) // 你的buildContent方法
    .width('100%')
    .height(110)
    .backgroundColor(Color.White) // 确保主内容有背景色，避免透明“漏底”
    .borderRadius(8)
}
.swipeAction({
  end: this.itemEnd.bind(this), // 将删除按钮配置为右滑终点动作
  edgeEffect: SwipeEdgeEffect.Spring
})
.margin({ top: index === 0 ? 12 : 0, bottom: 23 })
.borderRadius(8)
.border({ radius: 8, width: 1, color: '#F0F0F0' }) // 可选的边框，增强视觉完整性

关键点说明：

  • 分离关注点：ListItem内部组件是“主内容”，swipeAction的end是“滑动后出现的动作”。两者在布局上不应混合。
  • 背景色：确保主内容区域（this.buildContent(item)返回的组件）设置了不透明的背景色（如Color.White），这是解决“漏底色”问题的关键。
  • 尺寸：endBuilder中的组件高度设为'100%'，可以使其与ListItem等高。宽度通常由文本和padding决定，系统会处理滑动时的位移。
  • 交互：滑动后，end组件完全露出，点击其onClick事件即可响应删除操作。

按照这个模式调整后，swipeAction组件会管理滑动手势和end组件的动画显示，正常状态下不会出现删除按钮的残留部分，滑动时则能平滑露出红色删除按钮，达到你图示的效果。

回到顶部