实现List组件中每一个ListItem中的子组件都可以拖动而不被其他组件覆盖

实现消息列表,未读消息,拖动释放后消失。

HarmonyOS
2024-05-26 15:57:17
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
mafast

使用的核心API

  •  gesture属性
  •  zIndex属性
  •  onTouch属性

核心代码解释

HarmonyOS组件之间的层级关系是同一容器组件中先比较兄弟组件的zindex,在zindex相同的情况下,靠后的组件比靠前的组件层级要高,是不可能存在两个组件绝对平级,所以在List组件中,如果不进行任何的设置,后面的组件层级是比前面大的,如果前面的组件或者其子组件有移动,那么组件会被层级比它高的组件盖住。但是当静态的将ListItem的层级进行提高,由于List的渲染机制,其实所有的ListItem层级都进行了提升,所以相互之间的层级关系时间上是没有变化的。所以我们需要动态的提升当前ListItem的层级,这样就能实现我们想要的效果了。

@Component 
struct RowItem { 
  @Prop item: string 
  @State offsetX: number = 0; 
  @State offsetY: number = 0; 
  @State showBubble: boolean = true 
  //子组件 
  build() { 
    Row() { 
      Text('' + this.item) 
        .height(100) 
        .fontSize(16) 
        .textAlign(TextAlign.Center) 
        .width('90%') 
        .zIndex(2) 
        .onClick(() => { 
          if (!this.showBubble) { 
            this.showBubble = true; 
            this.offsetX = 0; 
            this.offsetY = 0; 
          } 
        }) 
      if (this.showBubble) { 
        Circle({ width: 20, height: 20 }) 
          .fill(Color.Red)// .position({ x: this.offsetX, y: this.offsetY }) 
          .translate({ x: this.offsetX, y: this.offsetY, z: 100 }) 
          .gesture(// 绑定拖动手势 
            PanGesture() 
              .onActionStart((event: GestureEvent) => { 
                console.info('Pan start'); 
              })// 当触发拖动手势时,根据回调函数修改组件的布局位置信息 
              .onActionUpdate((event: GestureEvent) => { 
                this.offsetX = event.offsetX; 
                this.offsetY = event.offsetY; 
              }) 
              .onActionEnd(() => { 
                this.showBubble = false 
              }) 
          ) 
      } 
    } 
    .backgroundColor(0xFFFFFF) 
    .width('100%') 
    .borderRadius(10) 
  } 
} 
 
//父组件 
@Entry 
@Component 
struct RedBubble { 
  private arr: number[] = [1, 2, 3, 4, 5, 6, 7] 
  @State touchIndex: number = 0 
 
  build() { 
    Column() { 
      List({ space: 20, initialIndex: 0 }) { 
        ForEach(this.arr, (iem: number, index) => { 
          ListItem() { 
            RowItem({ item: iem.toString() }) 
          } 
          //当渲染到当前组件时,动态的提升当前组件的层级 
          .zIndex(this.touchIndex == index ? 1 : 0) 
          .onTouch((e) => { 
            if (e.type === TouchType.Down) { 
              this.touchIndex = index; 
            } else if (e.type === TouchType.Up) { 
              this.touchIndex = -1; 
            } 
            console.log("demoTest " + index) 
          }) 
        }, item => item) 
      } 
      .zIndex(998) 
      .listDirection(Axis.Vertical) // 排列方向 
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 
      .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果 
      .onScrollIndex((firstIndex: number, lastIndex: number) => { 
        console.info('first' + firstIndex) 
        console.info('last' + lastIndex) 
      }) 
      .width('90%') 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xDCDCDC) 
    .padding({ top: 5 }) 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 21:07:23
相关问题
ListListItem组件使用
514浏览 • 1回复 待解决
如何实现一个折叠组件
403浏览 • 1回复 待解决
如何在自定义函数创建一个UI组件
706浏览 • 1回复 待解决
组件如何处理组件内点击事件
1260浏览 • 1回复 待解决
如何实现一个组件不停地旋转
876浏览 • 1回复 待解决
为何RichText组件内容可以滚动
801浏览 • 1回复 待解决
组件调用组件方法
470浏览 • 1回复 待解决