# ListItemEdit

**Repository Path**: octane195/list-item-edit

## Basic Information

- **Project Name**: ListItemEdit
- **Description**: 本示例基于List组件，实现待办事项管理、文件管理、备忘录的等场景列表编辑效果。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 18
- **Created**: 2025-03-14
- **Last Updated**: 2025-03-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# List Editing

### Overview

This sample uses the List component to implement the list editing effects in scenarios such as to-do list management, file management, and notepad.

### Preview

![](./screenshots/device/listitem_edit.en.gif)

##### How to Use

- Tap the add button and select the to-do items to be added.
- Tap the check box of the to-do item. The item is automatically moved to **Completed**.
- Swipe left on a to-do item and touch the delete button to delete it.

### Project Directory

```

├──entry/src/main/ets/
│  ├──common
│  │  └──Constants.ets               // Common constant class
│  ├──entryability
│  │  └──EntryAbility.ets           // Entry point class
│  ├──model
│  │  └──ToDo.ets                    // To-do list data
│  ├──pages
│  │  └──Index.ets                   // Home page
│  └──view
│     └──TodoListItem.ets            // To-do list item
└──entry/src/main/resources          // Static resources of the app
```

### How to Implement

1. Bind the List component to the @State-decorated array variable **toDoData**.

2. Set the **swipeAction** attribute for the ListItem component so that a single list item can be swiped leftward or rightward and the customized UIBuilder is displayed.

3. Add or delete a list item, update the array variable **toDoData**, and update the UI of the List component.

4. Component Definition:
   Use @Component decorator to define the ToDoListItem struct component, which is a list item component.
5. State Variables:
   @Link achieveData: Array of completed items (bidirectionally binding)
   @Link toDoData: Array of unfinished items (bidirectional binding)
   @ObjectLink toDoItem: Current to-Do object (attribute-level binding)
   @State isEdited: Controls the local state of the edit state
6. Method addAchieveData:
   After toggling the isCompleted state, manipulate the data in the animation context animateTo:
   If marked as complete, filter the current item from toDoData and add to achieveData
   If the cancellation is complete, the reverse is reversed
   Note that push is used here to directly modify the parent component data, which may involve the ArkUI state management specification
7. Build method layout structure:
   The outer Flex container is aligned horizontally and vertically centered
   The main content area on the left, Row, contains:
   Dynamic display section (conditional rendering if control):
   The non-editing status displays checkboxes and text
   The editing status shows TextInput
8. Blank() placeholder separation
   Right action button (edit/confirm icon)
9. Style Details:
   Multiple status styles for checkboxes (fill color on completion)
   The strikethrough effect of the text is dynamically set by decoration
   The input box automatically gets the focus of the processing of focusControl.requestFocus
   UNIFORM SIZE USAGE CONSTANTS (E.G. ITEM_HEIGHT, PADDING, ETC.)
10. Interaction Logic:
    Click the checkbox to trigger the status switch and data transfer
    Click on the "Edit" text to enter the editing mode
    Click the confirm icon to exit editing
11. Possible doubts:
    The difference between @Link and @ObjectLink is that the former is used for the overall replacement of arrays, and the latter is used for listening on object properties
    Whether the scope of animateTo covers data operations
    Directly modify whether the array passed by the parent component conforms to the ArkUI state management specification
    Focus controls whether additional permissions are required to use focusControl
    It is necessary to verify that these implementations comply with the latest development specifications of HarmonyOS, especially whether there are potential problems with the state management part.

# 以下是代码的逐段解析：

##### 组件定义与状态管理

typescript
@Component
export struct ToDoListItem {
@Link achieveData: ToDo[];  // 已完成事项数组（双向绑定）
@Link toDoData: ToDo[];     // 未完成事项数组（双向绑定）
@ObjectLink toDoItem: ToDo; // 当前待办项对象（属性级绑定）
@State isEdited: boolean = false; // 本地编辑状态

###### 关键点：

@Link 实现父子组件间的双向数据同步
@ObjectLink 监听对象属性变化（而非整个对象）
@State 管理组件内部状态

##### 执行流程：
Toggle the completion status
In the context of an animation:
Filter the current item from the original array
Updating Parent Component Data (via @Link)
Push the current item to the target array
动态布局结构（build()）


##### 设计特点：

使用系统级资源标识符（$r('sys...')）
常量集中管理（STYLE_CONFIG）
动态样式根据状态变化

# 交互流程图

![img.png](img.png)

##### 关键实现技巧

状态驱动UI：通过isEdited和isCompleted控制显示差异
高效数据更新：
@ObjectLink实现细粒度更新
使用filter+push替代splice提升性能
焦点管理：
typescript
focusControl.requestFocus('textEdit')
动画集成：
typescript
animateTo({ duration: 300 }, () => {
// 数据操作
})

###### Potential optimization points

Anti-shake processing: Add anti-shake for text input to avoid frequent rendering
Null State Processing: Add an input validation
Animation refinement: Different animation curves are used for different operations
Internationalization: Implement text resource isolation through $r
This component fully implements the core functions of to-do items such as display, status switching, editing and modification, 
and complies with the HarmonyOS application development specifications and can be used as a standard component for list item reuse.

### Required Permissions

N/A

### Constraints

1. The sample is only supported on Huawei phones with standard systems.

2. The HarmonyOS version must be HarmonyOS 5.0.0 Release or later.

3. The DevEco Studio version must be DevEco Studio 5.0.0 Release or later.

4. The HarmonyOS SDK version must be HarmonyOS 5.0.0 Release SDK or later.The HarmonyOS SDK version must be HarmonyOS NEXT Developer Beta1 or later.