前言
当移动端一个页面中，如果网格单元格选项比较多的话，一般都会提供一个应用排序的功能。以防止用户为了找一个经常使用但默认排序位置比较靠下，而需要滑动较长的时间。这也算是优化用户体验经常使用到的一个技巧。
在 iOS 中，如果需要对这种页面布局的排序还是比较复杂的，在 iOS 11 版本之前，开发者需要自己添加手势然后去计算网格移动的位置。在 iOS 11 版本 Apple 暴露了相关代理的 API，开发者去实现代理，然后自己去处理数据源的逻辑即可。
在鸿蒙系统中，开发一个类似的相关页面是非常简单的，使用系统的 GridObjectSortComponent 组件即可。下面来看下具体需要哪几个接口实现。
网格拖拽组件 - GridObjectSortComponent
该组件一共包含以下四部分：
- options：当前页组件面的操作栏。
- dataList：组件的数据源，需要注意的是，支持的最大长度为 50，如果数据源超过 50 只会截取前 50 的数据。
- onSave：保存排序的回调函数，点击右上角对钩按钮时调用（注：在普通状态下，点击待选区域的单元格添加按钮也会调用）。
- onCancel：取消排序的回调函数，点击左上角取消按钮的时候调用。
下面来详细介绍下 GridObjectSortComponentOptions(options) 和 GridObjectSortComponentItem(dataList) 的各项参数。
标签栏配置接口 - GridObjectSortComponentOptions
该接口共有以下六个参数：
- type：组件单元格的展示形式，支持以下两种
- IMAGE_TEXT：图片加文字(图片在上，文字在下)
- TEXT：仅文字（默认为此选项）。
- imageSize：图片的尺寸，默认大小为 56 vp。
- normalTitle：普通状态下操作栏的标题。
- editTitle：编辑状态下操作栏的标题。
- showAreaTitle：已添加区域的标题。
- addAreaTitle：待添加区域的标题。
数据源接口 - GridObjectSortComponentItem
该接口共有下面五个参数：
- id：数据项的唯一标识，不可重复。
- text：单元格显示标题。
- url：单元格显示图片。
- selected：单元格是否已经被添加。
- order：单元格在数据源中的顺序。
网格拖拽组件的接口已经全部介绍完毕，下面来看下代码中具体如何实现。
代码实现
首先，需要导入使用到的接口模块：
import { GridObjectSortComponent,
GridObjectSortComponentItem,
GridObjectSortComponentOptions,
GridObjectSortComponentType } from '@kit.ArkUI'
导入组件之后，接下来我们需要来构建页面的标签栏，代码如下：
@State option: GridObjectSortComponentOptions = {
type: GridObjectSortComponentType.IMAGE_TEXT,
normalTitle: '全部应用',
editTitle: '编辑',
showAreaTitle: '长按拖动排序',
addAreaTitle: '点击添加按钮添加'
}
普通状态效果图如下：
编辑状态效果图如下：
构建完页面的标签栏，接下来需要去构建页面单元格的数据源，代码如下：
@State dataList: GridObjectSortComponentItem[] = [
{
id: 0,
text: '转账',
selected: true,
url: $r('app.media.transform'),
order: 1
},
{
id: 1,
text: '生活缴费',
selected: true,
url: $r('app.media.pay'),
order: 2
},
{
id: 2,
text: '市民中心',
selected: false,
url: $r('app.media.center'),
order: 3
},
{
id: 3,
text: '菜鸟',
selected: false,
url: $r('app.media.deliver'),
order: 4
},
]
该代码构建了四个数据项，两个选中，两个未选中。
普通状态效果图如下：
编辑状态效果图如下：
最后一步，就是在页面组件中构建单元格拖拽组件了，代码如下：
build() {
Column() {
GridObjectSortComponent({
options: this.option,
dataList: this.dataList,
onSave: (
select: Array<GridObjectSortComponentItem>,
unselect: Array<GridObjectSortComponentItem>
) => {
console.log(select.toString())
console.log(unselect.toString())
},
onCancel: () =>{
console.log("")
}
})
}
}
总结
在鸿蒙系统中，实现单元格拖拽是非常简单的，一共需要以下三步：
- 导入头文件。
- 构建标签栏和单元格数据源。
- 在页面组件中构建拖拽组件 - GridObjectSortComponent 即可。
