鸿蒙HarmonyOS开发规范：网格对象的编辑排序-GridObjectSortComponent

粉红鱼头

于 2024-08-10 19:19:30 发布

阅读量664

点赞数 14

分类专栏： HarmonyOS OpenHarmony 鸿蒙开发文章标签： harmonyos 华为前端鸿蒙 html 鸿蒙系统数据库

本文链接：https://blog.csdn.net/zxc195818/article/details/141094967

版权

HarmonyOS 同时被 3 个专栏收录

48 篇文章 0 订阅

订阅专栏

OpenHarmony

48 篇文章 0 订阅

订阅专栏

鸿蒙开发

48 篇文章 0 订阅

订阅专栏

网格对象的编辑排序是用于网格对象的编辑、拖动排序、新增和删除。

说明

该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@kit.ArkUI'

子组件

无

属性

支持通用属性

GridObjectSortComponent

GridObjectSortComponent({options: GridObjectSortComponentOptions, dataList: Array<GridObjectSortComponentItem>, onSave: (select: Array<GridObjectSortComponentItem>, unselect: Array<GridObjectSortComponentItem>) => void, onCancel: () => void })

装饰器类型：@Component

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

名称	类型	装饰器类型	必填	说明
options	GridObjectSortComponentOptions	@Prop	是	组件配置信息。
dataList	Array<GridObjectSortComponentItem>	-	是	传入的数据，最大长度为50，数据长度超过50，只会取前50的数据。
onSave	(select: Array<GridObjectSortComponentItem>, unselect: Array<GridObjectSortComponentItem>) => void	-	是	保存编辑排序的回调函数，返回编辑后的数据。
onCancel	() => void	-	是	取消保存数据的回调。

GridObjectSortComponentOptions

元服务API： 从API version 12开始，该接口支持在元服务中使用。

名称	类型	必填	说明
type	GridObjectSortComponentType	否	组件展示形态：文字\|图片+文字。默认：GridObjectSortComponentType.text。
imageSize	number \| Resource	否	图片的尺寸。默认值：56。
normalTitle	ResourceStr	否	未编辑状态下显示的标题。默认：频道。
showAreaTitle	ResourceStr	否	展示区域标题，第一个子标题。默认：长按拖动排序。
addAreaTitle	ResourceStr	否	添加区域标题，第二个子标题。默认：点击添加。
editTitle	ResourceStr	否	编辑状态下头部标题显示。默认：编辑。

GridObjectSortComponentType

元服务API： 从API version 12开始，该接口支持在元服务中使用。

名称	值	说明
IMAGE_TEXT	'image_text'	图片文字类型。
TEXT	'text'	文字类型。

GridObjectSortComponentItem

元服务API： 从API version 12开始，该接口支持在元服务中使用。

名称	类型	必填	说明
id	string \| number	是	数据id序号，不可重复。
text	ResourceStr	是	显示文本信息。
selected	boolean	是	是否已经被添加，添加：true，未添加：false。
url	ResourceStr	否	GridObjectSortComponentType类型为IMAGE_TEXT时，需要传入图片地址。
order	number	是	顺序序号。

事件

不支持通用事件。

示例

import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State dataList: GridObjectSortComponentItem[] = [
    {
      id: 0,
      url: $r('app.media.ic_controlcenter_location_filled'),
      text: '位置信息',
      selected: true,
      order: 3
    },
    {
      id: 1,
      url: $r('app.media.ic_controlcenter_mobiledata_filled'),
      text: '移动数据',
      selected: true,
      order: 9
    },
    {
      id: 2,
      url: $r('app.media.ic_controlcenter_nfc_filled'),
      text: 'NFC',
      selected: false,
      order: 1
    },
    {
      id: 3,
      url: $r('app.media.ic_controlcenter_ring_off_filled'),
      text: '响铃关闭',
      selected: true,
      order: 4
    },
    {
      id: 4,
      url: $r('app.media.ic_controlcenter_ring_on_filled'),
      text: '响铃',
      selected: false,
      order: 5
    },
    {
      id: 5,
      url: $r('app.media.ic_controlcenter_ultra_power_saver_filled'),
      text: '低电量模式',
      selected: true,
      order: 6
    },
    {
      id: 6,
      url: $r('app.media.ic_controlcenter_screenshot_filled'),
      text: '截屏',
      selected: true,
      order: 7
    },
    {
      id: 7,
      url: $r('app.media.ic_controlcenter_screen_recording_filled'),
      text: '屏幕录制',
      selected: true,
      order: 8
    },
    {
      id: 8,
      url: $r('app.media.ic_controlcenter_super_power_saver_filled'),
      text: '超级省电',
      selected: false,
      order: 9
    },
  ]

  @State option: GridObjectSortComponentOptions = {
    type: GridObjectSortComponentType.IMAGE_TEXT,
    imageSize: 45,
    normalTitle: '菜单',
    editTitle: '编辑',
    showAreaTitle: '长按拖动排序',
    addAreaTitle: '点击添加'
  }

  build() {
    Column() {
      GridObjectSortComponent({
        options: this.option,
        dataList: this.dataList,
        onSave: (
          select: Array<GridObjectSortComponentItem>,
          unselect: Array<GridObjectSortComponentItem>
        ) => {
          // save ToDo
        },
        onCancel: () =>{
          // cancel ToDo
        }
      })
    }
  }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

点击→【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助！~

鸿蒙（HarmonyOS NEXT）最新学习路线

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

2.视频学习资料+学习PDF文档

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

HarmonyOS Next 最新全套视频教程