@ohos.arkui.advanced.ComposeListItem (List)

The list component is a container that presents a series of items arranged in a column with the same width. You can use it to present data of the same type in a multiple and coherent row style, for example, images or text.

NOTE

This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.

Modules to Import

import { ComposeListItem } from "@ohos.arkui.advanced.ComposeListItem"

Child Components

Not supported

Attributes

The universal attributes are supported.

ComposeListItem

ComposeListItem({contentItem?: ContentItem, operateItem?: OperateItem})

Decorator: @Component

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

ContentItem

IconType

OperateItem

OperateIcon

OperateButton

OperateCheck

Events

The universal events are supported.

Example

import { IconType, ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem';
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct ComposeListItemExample {
  build() {
    Column() {
      List() {
        ListItem() {
          ComposeListItem({
            contentItem: ({
              iconStyle: IconType.NORMAL_ICON,
              icon: $r('sys.media.ohos_app_icon'),
              primaryText: 'Two-row list',
              secondaryText:'Secondary text'
            }),
            operateItem: ({
              icon: {
                value: $r('sys.media.ohos_app_icon'),
                action: () => {
                  promptAction.showToast({ message: 'icon' })
                } },
              text:'Text on the right'
            })
          })
        }
      }
    }
  }
}