实现简单店铺应用鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例构建了一个简单的店铺应用，应用案例内主要包含以下两个功能。

• 消息页面，通过任务、消息、通报Tab的切换，实现消息的分类
• 店掌页面，点击全部应用按钮后，自定义布局展示常用服务以及各类经营服务，点击编辑按钮可进行新增操作

简单店铺应用实现源码链接

效果预览

使用说明

1. 进入应用后，首先展示店掌页面，点击按钮，即可进入全部应用页面。
2. 在全部应用页面可以进行常用服务的查看，点击编辑按钮可以进行常用服务的新增。
3. 点击返回后进入消息页面，可以查看任务页面，Tab组件展示待执行、待验收等任务类型，点击可进行切换。
4. 点击消息按钮，切换页面，展示消息列表。
5. 点击通报按钮，切换页面，展示通报信息列表。

实现思路

消息页面的构建

1. 通过两层嵌套Tabs实现应用的不同页面的切换，消息页面的不同类型的切换。

Tabs({ controller: this.tabsController }) {
}
  .tabBar('店掌')

  TabContent() {
    Column() {
      Row() {
        ···
      Tabs({ controller: this.tabsController2 }) {
        TabContent() {
          this.taskTabContent()
        }.tabBar(this.checkIndex(0, '任务', $r('app.media.ic_task')))
        ···
      }
    }
  }
  .tabBar('消息')

  TabContent() {
    Text('商城')
  }
  .tabBar('商城')
  ···
}

2. 使用List组件，实现消息列表的呈现；其中使用LazyForEach，相比ForEach在处理大量数据时有明显性能上的优势。

  listDataForEach(infoData: ListItemAdapter<InfoDataModel>) {
    LazyForEach(infoData, (item: InfoDataModel, index: number) => {
      if (item.previewType == PreviewType.Normal) {
        ListItem(){
        ···
        }
    }
  })
}

店掌页面的构建

1. 实现数据处理能力，主要包括getList、setList、addList、totalCount等。

export class ListItemAdapter<T> implements IDataSource {
  private listItems: T[] = [];
  private listeners: DataChangeListener[] = [];
  ···
}

2. 实现取消增加服务功能，实现对编辑中想要添加的图标进行取消操作；构造reset函数，将所有值置为0。

reset() {
  this.selectedItem = undefined
  this.scrollLen = 0
  this.dragStartX = 0
  this.dragStartY = 0
  this.dragOffsetX = 0
  this.dragOffsetY = 0
  this.offsetX = 0
  this.offsetY = 0
  this.scroller.scrollTo(this.scroller.currentOffset())
}

3. 构造itemMove函数，函数的主要功能是用于将经营服务的一些图标添加到常用服务列表中。首先，使用splice方法从list数组中移除位置为index的元素，并存储在一个临时变量tmp中。这个操作会修改原始数组，并且tmp会包含北一出的元素。

itemMove(index: number, newIndex: number) {
  let tmp = this.list.splice(index, 1)
  this.list.splice(newIndex, 0, tmp[0])
}

4. 构造handleDrag()函数，通过判断index的大小，决定要进行添加的位置；根据index的大小，总共分为下、上、右、左、右下、右上、左上、左下八个位置。

handleDrag() {
  let index = -1
  this.list.forEach((item: ItemInfo, i: number) => {
    ···
    if (index < 4) {
      return
    }
    this.itemMove(index, index - 4)
    this.dragOffsetY -= itemLength
    ···
  })
}

5. 对于Grid组件的每个图标设置一个组合手势，其中包含一个长按手势LongPressGesture。GestureGroup创建一个手势组，其中手势按序列Sequence模式执行；LongPressGesture是一个长按手势，设置为可重复触发；.onAction()这是长按手势的处理函数，用于定义当长按手势被识别时应该执行的操作。

GestureGroup(GestureMode.Sequence,
  LongPressGesture({ repeat: true })
    .onAction((event?: GestureEvent) => {
      if (this.selectedItem === undefined && this.edit) {
        this.selectedItem = item
        this.dragStartX = Number(event?.target.area.globalPosition.x)
        this.dragStartY = Number(event?.target.area.globalPosition.y)
      }
    })
    .onActionEnd(() => {
      this.reset()
    }))