HarmonyOS 鸿蒙Next ListItem滑动效果

HarmonyOS 鸿蒙Next ListItem滑动效果 ListItem，是一个有曲度的卡片，向左滑动的时候，如何使得右边的新出现的组件丝滑的保持相同的border弧度?

3 回复

首先，你需要确保 ListItem 的 borderRadius 属性已正确设置。在你的 ListItem 组件中，可以这样设置边框弧度：

ListItem() {
    Text('item' + item)
    .width('100%')
    .height(100)
    .textAlign(TextAlign.Center)
    .borderRadius(10) // 设置边框弧度为10
    .backgroundColor(0xFFFFFF)
}

接下来，为了保证右侧新出现的组件也能保持相同的边框弧度，你需要确保这些组件的样式与 ListItem 一致，特别是 borderRadius 属性。如果右侧的组件也是 ListItem，可以直接在它们的样式设置中复制上述的 borderRadius 设置。如果使用的是其他类型的组件，应确保它们的 borderRadius 与 ListItem 的设置相匹配。

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


绑定一个@State 动态弧度咯，根据滑动距离改变下就好了

在HarmonyOS（鸿蒙Next）中，ListItem的滑动效果可以通过使用SwipeAction组件来实现。SwipeAction允许用户通过左右滑动来触发特定的操作。SwipeAction通常包含两个部分：SwipeAction.Start和SwipeAction.End，分别用于定义滑动开始和结束时的操作。

以下是一个简单的示例代码，展示如何在ListItem中实现滑动效果：

@Entry
@Component
struct SwipeExample {
  @State message: string = 'Swipe Me!'

  build() {
    List() {
      ListItem() {
        Text(this.message)
          .fontSize(20)
          .margin({ left: 10 })
      }
      .swipeAction({
        start: {
          builder: () => {
            Button('Delete')
              .width(80)
              .height('100%')
              .backgroundColor(Color.Red)
              .onClick(() => {
                this.message = 'Deleted!'
              })
          }
        },
        end: {
          builder: () => {
            Button('Archive')
              .width(80)
              .height('100%')
              .backgroundColor(Color.Green)
              .onClick(() => {
                this.message = 'Archived!'
              })
          }
        }
      })
    }
    .width('100%')
    .height('100%')
  }
}

在这个示例中，ListItem包含一个Text组件，显示“Swipe Me!”。当用户向左或向右滑动ListItem时，会分别显示“Delete”和“Archive”按钮。点击这些按钮会触发相应的操作，并更新Text组件的内容。

SwipeAction组件提供了灵活的配置选项，可以根据需要自定义滑动效果和操作。通过调整builder函数中的内容，可以实现不同的滑动效果和交互逻辑。

回到顶部