HarmonyOS gridcell问题

希望能有实现gridCell拖拽排序的Demo。

HarmonyOS
2024-09-29 10:21:38
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

请参考以下demo:

@Observed  
class showData {  
  text: string  
  imgUrl: Resource  
  constructor(text: string, imgUrl: Resource) {  
    this.text = text  
    this.imgUrl = imgUrl  
  }  
}  
@Observed  
class showDataArray extends Array<showData> {  
}  
@Component  
struct itemC {  
  @ObjectLink showItem: showData  
  build() {  
    Column() {  
      Image(this.showItem.imgUrl)  
        .width(50)  
        .draggable(false)  
      Text(this.showItem.text)  
        .fontSize(16)  
        .textAlign(TextAlign.Center)  
    }  
    .width('100%')  
    .height(100)  
    .backgroundColor(Color.White)  
    .justifyContent(FlexAlign.Center)  
  }  
}  
@Entry  
@Component  
struct page240520190227060 {  
  @State numbers: showDataArray = []  
  scroller: Scroller = new Scroller()  
  @State text: string = 'drag'  
  gridH: number = 0  
  @State draggableItemW: number = 0  
  @Builder  
  pixelMapBuilder(text: string, imgUrl: Resource) { //拖拽过程样式  
    Column() {  
      Image(imgUrl)  
        .width(50)  
      Text(text)  
        .fontSize(16)  
        .textAlign(TextAlign.Center)  
    }  
    .width(this.draggableItemW)  
    .height(100)  
    .backgroundColor(Color.White)  
    .justifyContent(FlexAlign.Center)  
  }  
  aboutToAppear() {  
    for (let i = 1; i <= 15; i++) {  
      this.numbers.push(new showData(i.toString(), $r('app.media.background')))  
    }  
    this.setGridHeight()  
  }  
  setGridHeight() {  
    const temp = this.numbers.length % 4  
    if (temp) {  
      this.gridH = 40 + 100 * (Math.floor(temp) + 1)  
    } else {  
      this.gridH = 40 + 100 * temp  
    }  
  }  
  changeIndex(index1: number, index2: number) { //排序  
    if (index1 === index2) {  
      return  
    }  
    let tmp = this.numbers.splice(index1, 1)  
    this.numbers.splice(index2, 0, tmp[0])  
  }  
  build() {  
    Column() {  
      Column() {  
        Text('常用')  
          .width('100%')  
          .height(40)  
          .padding({ left: 20 })  
          .backgroundColor(Color.White)  
          Grid(this.scroller) {  
          ForEach(this.numbers, (item: showData) => {  
            GridItem() {  
              itemC({ showItem: item })  
            }  
            .width('25%')  
          }, (item: showData) => JSON.stringify(item))  
        }  
        .columnsTemplate('1fr 1fr 1fr 1fr')  
        .width('100%')  
        .editMode(true) //设置Grid是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部GridItem  
        .supportAnimation(true)  
        .onAreaChange((oldValue: Area, newValue: Area) => {  
          this.draggableItemW = newValue.width as number / 4  
        })  
        .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时,触发回调。  
          const tempObj = this.numbers[itemIndex]  
          return this.pixelMapBuilder(tempObj.text, tempObj.imgUrl) //设置拖拽过程中显示的图片。  
        })  
        .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number,  
          isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标,当在本组件范围内停止拖拽行为时,触发回调。  
          // isSuccess=false时,说明drop的位置在grid外部;insertIndex > length时,说明有新增元素的事件发生  
          if (!isSuccess || insertIndex >= this.numbers.length) {  
            return  
          }  
          console.info('beixiang' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置,insertIndex拖拽插入位置  
          this.changeIndex(itemIndex, insertIndex)  
        })  
      }  
      .width('90%')  
      .height(this.gridH)  
      .borderRadius(10)  
      .backgroundColor('#F2F2F4')  
      .clip(true)  
    }  
    .width('100%')  
    .margin({ top: 5 })  
    .backgroundColor('#F2F2F4')  
  }  
}
分享
微博
QQ
微信
回复
2024-09-29 18:09:23
相关问题
HarmonyOS LazyForEach问题刷新UI问题
551浏览 • 1回复 待解决
HarmonyOS lpx问题
211浏览 • 1回复 待解决
HarmonyOS ImageBitmap问题
207浏览 • 1回复 待解决
HarmonyOS SideBarContaine问题
170浏览 • 1回复 待解决
HarmonyOS setWindowPrivacyMode问题
144浏览 • 1回复 待解决
HarmonyOS 卡片问题
374浏览 • 1回复 待解决
HarmonyOS formKit问题
178浏览 • 1回复 待解决
HarmonyOS 布局问题
370浏览 • 1回复 待解决
HarmonyOS 编译问题
364浏览 • 1回复 待解决
HarmonyOS subwindow问题
169浏览 • 1回复 待解决
HarmonyOS UI问题
464浏览 • 1回复 待解决
HarmonyOS 通知问题
116浏览 • 1回复 待解决
HarmonyOS 语法问题
529浏览 • 1回复 待解决
HarmonyOS ObjectLink问题
443浏览 • 1回复 待解决
HarmonyOS Toggle问题
736浏览 • 0回复 待解决
HarmonyOS pushPath问题
228浏览 • 1回复 待解决
HarmonyOS TextInput问题
206浏览 • 1回复 待解决
HarmonyOS NumberFormat问题
177浏览 • 1回复 待解决
HarmonyOS RichText问题
163浏览 • 1回复 待解决
HarmonyOS UIContext()问题
338浏览 • 1回复 待解决
HarmonyOS eventHub问题
206浏览 • 1回复 待解决
HarmonyOS this指向问题
215浏览 • 2回复 待解决
HarmonyOS setResponseData问题
573浏览 • 1回复 待解决
HarmonyOS openCustomDialog问题
217浏览 • 1回复 待解决