# harmonyosAdvancedComponen

**Repository Path**: bingtengaoyu/harmonyos-advanced-componen

## Basic Information

- **Project Name**: harmonyosAdvancedComponen
- **Description**: ArkTS开发组件
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 5
- **Created**: 2023-11-14
- **Last Updated**: 2024-11-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 鸿蒙, HarmonyOS组件

## README

# @ohos.arkui.advanced.MeshObjectEdit（网格对象编辑排序组件）

MeshObjectEdit是用于网格对象编辑排序的组件。

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

## 导入模块

```ets
import { MeshObjectEdit, dataListType, optionType } from '@ohos.arkui.advanced.MeshObjectEdit';
```

##  子组件

无

## Component

**装饰器类型：**@Component

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

**组件能力**：编辑、拖动排序、新增、删除

**参数**：

| 名称     | 类型                            | 必填 | 装饰器类型 | 说明         |
| -------- | ------------------------------- | ---- | ---------- | ------------ |
| options  | [optionType](#optionType)       | 是   | @Link      | 组件配置信息 |
| dataList | [dataListType[]](#dataListType) | 是   | @Link      | 传入的元数据 |

##  optionType

optionType定义MeshObjectEdit组件的类型及参数。

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

| 名称           | 类型   | 必填 | 说明                                                         |
| -------------- | ------ | ---- | ------------------------------------------------------------ |
| type           | string | 否   | 组件展示形态：default（文字）\| object（图片+文字），默认：default |
| title          | string | 否   | 未编辑状态下显示的标题，默认：频道                           |
| subTitleFirst  | string | 否   | 第一个子标题，默认：长按拖动排序                             |
| subTitleSecond | string | 否   | 第二个子标题，默认：点击添加                                 |
| editTitle      | string | 否   | 编辑状态下头部标题显示，默认：编辑                           |
| backUrl        | string | 否   | 组件返回上一页的地址路径，默认: /(首页)                      |

## dataListType

dataListType定义MeshObjectEdit的元数据。

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

| 名称  | 类型             | 必填 | 说明                                       |
| ----- | ---------------- | ---- | ------------------------------------------ |
| id    | string \| number | 是   | 数据id序号，不可重复                       |
| text  | string           | 是   | 显示文本信息                               |
| state | number           | 是   | 是否已经被添加，0：未添加 \| 1：已添加     |
| url   | string           | 否   | optionType类型为object时，需要传入图片地址 |
| sort  | number           | 是   | 顺序序号                                   |



## 示例

### 示例1：文本形态

```ets
import { MeshObjectEdit, dataListType, optionType } from '@ohos.arkui.advanced.MeshObjectEdit'

@Entry
@Component
struct Index {
  @State dataList: dataListType[] = [
    {
      id: 0,
      text: '1',
      state: 1,
      sort: 3
    },
    {
      id: 1,
      text: '2',
      state: 0,
      sort: 9
    },
    {
      id: 2,
      text: '3',
      state: 1,
      sort: 1
    },
    {
      id: 3,
      text: '4',
      state: 0,
      sort: 4
    },
    {
      id: 4,
      text: '5',
      state: 0,
      sort: 5
    }
  ]

  @State option: optionType = {
    type: '',
    title: '',
    editTitle: '',
    subTitleFirst: "长按拖动排序111",
    subTitleSecond: "点击添加001",
    backUrl: '/',
  }

  build() {
    Column() {
      MeshObjectEdit({ options: $option, dataList: $dataList });
    }
  }
}
```
![输入图片说明](gif/20231114-100855-text.gif)

### 示例2：图文形态

```ets
import { MeshObjectEdit, dataListType, optionType } from '@ohos.arkui.advanced.MeshObjectEdit'

@Entry
@Component
struct Index {
  @State dataList: dataListType[] = [
    {
      id: 0,
      url: '/pages/vr.png',
      text: '1',
      state: 1,
      sort: 3
    },
    {
      id: 1,
      url: '/pages/game.png',
      text: '2',
      state: 0,
      sort: 9
    },
    {
      id: 2,
      url: '/pages/vr.png',
      text: '3',
      state: 1,
      sort: 1
    },
    {
      id: 3,
      url: '/pages/game.png',
      text: '4',
      state: 0,
      sort: 4
    },
    {
      id: 4,
      url: '/pages/vr.png',
      text: '5',
      state: 0,
      sort: 5
    }
  ]

  @State option: optionType = {
    type: 'object',
    title: '',
    editTitle: '',
    subTitleFirst: "长按拖动排序111",
    subTitleSecond: "点击添加001",
    backUrl: '/',
  }

  build() {
    Column() {
      MeshObjectEdit({ options: $option, dataList: $dataList });
    }
  }
}
```
![输入图片说明](gif/20231114-100515-image.gif)