ComposeListItem

The ComposeListItem 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 "@kit.ArkUI"

Child Components

Not supported

Attributes

The universal attributes are not supported.

ComposeListItem

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

Decorator: @Component

System capability: SystemCapability.ArkUI.ArkUI.Full

ContentItem

System capability: SystemCapability.ArkUI.ArkUI.Full

IconType

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

OperateItem

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

OperateIcon

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

OperateButton

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

OperateCheck

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Events

The universal events are not supported.

Example

Example 1: Configuring a Simple List Item

This example demonstrates how to create a simple list item that includes a primary text, a secondary text, a description, and a button with accompanying text on the right.

// This example demonstrates the basic functionality of the component, including the use of elements on the left and right.
import { IconType, ComposeListItem, promptAction } from '@kit.ArkUI';

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

Example 2: Implementing Screen Reader Announcement for Right-Side Elements

This example shows how to use the accessibilityText, accessibilityDescription, and accessibilityLevel properties to customize the screen reader announcements for different right-side elements such as icons, buttons, and radio buttons in a list item.

import { IconType, ComposeListItem, promptAction } from '@kit.ArkUI';
@Entry
@Component
struct ComposeListItemExample {
  build() {
    Column() {
      List() {
        ListItem() {
          ComposeListItem({
            contentItem: ({
              iconStyle: IconType.NORMAL_ICON,
              icon: $r('sys.media.ohos_app_icon'),
              primaryText: 'Double-line list',
              secondaryText: 'Secondary text',
              description: 'Description'
            }),
            operateItem: ({
              radio: {
                accessibilityText: 'Radio button', // Screen reader announcement for the radio button.
                accessibilityDescription: 'Unselected', // Description read by screen reader when the radio button is unselected.
                accessibilityLevel: 'yes'  // Configure this element to be focused by accessibility screen readers.
              }
            })
          })
        }

        ListItem() {
          ComposeListItem({
            contentItem: ({
              iconStyle: IconType.NORMAL_ICON,
              icon: $r('sys.media.ohos_app_icon'),
              primaryText: 'Double-line list',
              secondaryText: 'Secondary text',
              description: 'Description'
            }),
            operateItem: ({
              button: {
                text: 'OK',
                accessibilityText: 'This is a button',
                accessibilityDescription: 'Double tap to activate',
                accessibilityLevel: 'no'  // Configure this button to be not recognizable by screen readers.
              }
            })
          })
        }

        ListItem() {
          ComposeListItem({
            contentItem: ({
              iconStyle: IconType.NORMAL_ICON,
              icon: $r('sys.media.ohos_app_icon'),
              primaryText: 'Double-line list',
              secondaryText: 'Secondary text',
              description: 'Description'
            }),
            operateItem: ({
              icon: {
                value: $r('sys.media.ohos_app_icon'),
                action: () => {
                  promptAction.showToast({ message: 'icon' });
                },
                accessibilityText: 'This is an icon', // Screen reader announcement for the icon.
                accessibilityDescription: 'Double-tap to show the toast', // Description read by screen reader for the icon action.
                accessibilityLevel: 'yes'  // Configure this element to be focused by  screen readers.
              }
            })
          })
        }
      }
    }
  }
}

Example 3: Setting the Symbol Icon

This example demonstrates how to use symbolStyle in ContentItem, OperateItem, and OperateIcon to set custom symbol icons.

import { IconType, ComposeListItem, promptAction, SymbolGlyphModifier } from '@kit.ArkUI';
@Entry
@Component
struct ComposeListItemExample {
  build() {
    Column() {
      List() {
        ListItem() {
          ComposeListItem({
            contentItem: ({
              iconStyle: IconType.NORMAL_ICON,
              icon: $r('sys.symbol.house'),
              primaryText: 'Double-line list',
              secondaryText: 'Secondary text',
              description: 'Description'
            }),
            operateItem: ({
              image: $r('sys.symbol.car'),
            })
          })
        }

        ListItem() {
          ComposeListItem({
            contentItem: ({
              iconStyle: IconType.NORMAL_ICON,
              icon: $r('sys.symbol.house'),
              symbolStyle: new SymbolGlyphModifier($r('sys.symbol.bell')).fontColor([Color.Red]),
              primaryText: 'Double-line list',
              secondaryText: 'Secondary text',
              description: 'Description'
            }),
            operateItem: ({
              image: $r('sys.symbol.car'),
              symbolStyle: new SymbolGlyphModifier($r('sys.symbol.heart')).fontColor([Color.Pink]),
            })
          })
        }

        ListItem() {
          ComposeListItem({
            contentItem: ({
              iconStyle: IconType.NORMAL_ICON,
              icon: $r('sys.symbol.house'),
              symbolStyle: new SymbolGlyphModifier($r('sys.symbol.bell')).fontColor([Color.Blue]),
              primaryText: 'Double-line list',
              secondaryText: 'Secondary text',
              description: 'Description'
            }),
            operateItem: ({
              icon: {
                value: $r('sys.symbol.car'),
                symbolStyle: new SymbolGlyphModifier($r('sys.symbol.heart')).fontColor([Color.Orange]),
                action: () => {
                  promptAction.showToast({ message: 'icon' });
                }
              }
            })
          })
        }
      }
    }
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArcButton

harmony 鸿蒙ArcSlider

harmony 鸿蒙Chip

harmony 鸿蒙ChipGroup

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙Dialog Box (Dialog)

harmony 鸿蒙DialogV2

harmony 鸿蒙DownloadFileButton

harmony 鸿蒙EditableTitleBar