1# @ohos.arkui.advanced.ComposeListItem (列表) 2 3 4列表包含一系列相同宽度的列表项。内容包括适合连续、多行呈现同类数据的组合，例如图片和文本。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14``` 15import { ComposeListItem } from "@ohos.arkui.advanced.ComposeListItem" 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24支持[通用属性](ts-universal-attributes-size.md) 25 26 27## ComposeListItem 28 29ComposeListItem({contentItem?: ContentItem, operateItem?: OperateItem}) 30 31**装饰器类型：**\@Component 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35 36**参数：** 37 38 39| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 40| -------- | -------- | -------- | -------- | -------- | 41| contentItem | [ContentItem](#contentitem) | 否 | \@Prop | 定义左侧以及中间元素。 | 42| operateItem | [OperateItem](#operateitem) | 否 | \@Prop | 定义右侧元素。 | 43 44 45## ContentItem 46 47| 名称 | 类型 | 必填 | 说明 | 48| -------- | -------- | -------- | -------- | 49| iconStyle | [IconType](#icontype) | 否 | 左侧元素的图标样式。 | 50| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 左侧元素的图标资源。 | 51| primaryText | [ResourceStr](ts-types.md#resourcestr) | 否 | 中间元素的标题内容，超出以"..."显示。 | 52| secondaryText | [ResourceStr](ts-types.md#resourcestr) | 否 | 中间元素的副标题内容，超出以"..."显示。 | 53| description | [ResourceStr](ts-types.md#resourcestr) | 否 | 中间元素的描述内容，超出以"..."显示。 | 54 55 56## IconType 57 58| 名称 | 值 | 说明 | 59| -------- | -------- | -------- | 60| BADGE | 1 | 左侧图标为badge类型，图标大小为8\*8dp。 | 61| NORMAL_ICON | 2 | 左侧图标为小图标类型，图标大小为16\*16dp。 | 62| SYSTEM_ICON | 3 | 左侧图标为系统图标类型，图标大小为24\*24dp。 | 63| HEAD_SCULPTURE | 4 | 左侧图标为头像类型，图标大小为40\*40dp。 | 64| APP_ICON | 5 | 左侧图标为应用图标类型，图标大小为64\*64dp。 | 65| PREVIEW | 6 | 左侧图标为预览图类型，图标大小为96\*96dp。 | 66| LONGITUDINAL | 7 | 左侧图标为横向特殊比例（宽比高大），保持最长边为96dp。 | 67| VERTICAL | 8 | 左侧图标为竖向特殊比例（高比宽大），保持最长边为96dp。 | 68 69 70## OperateItem 71 72| 名称 | 类型 | 必填 | 说明 | 73| -------- | -------- | -------- | -------- | 74| arrow | [OperateIcon](#operateicon) | 否 | 右侧元素为箭头，大小为12\*24dp。 | 75| icon | [OperateIcon](#operateicon) | 否 | 右侧元素的第一个图标，大小为24\*24dp。 | 76| subIcon | [OperateIcon](#operateicon) | 否 | 右侧元素的第二个图标，大小为24\*24dp。 | 77| button | [OperateButton](#operatebutton) | 否 | 右侧元素为按钮。 | 78| switch | [OperateCheck](#operatecheck) | 否 | 右侧元素为开关。 | 79| checkbox | [OperateCheck](#operatecheck) | 否 | 右侧元素为多选框，大小为24\*24dp。 | 80| radio | [OperateCheck](#operatecheck) | 否 | 右侧元素为单选，大小为24\*24dp。 | 81| image | [ResourceStr](ts-types.md#resourcestr) | 否 | 右侧元素为图片，大小为48\*48dp。 | 82| text | [ResourceStr](ts-types.md#resourcestr) | 否 | 右侧元素为文字。 | 83 84 85## OperateIcon 86 87| 名称 | 类型 | 必填 | 说明 | 88| -------- | -------- | -------- | -------- | 89| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 右侧图标/箭头资源。 | 90| action | ()=>void | 否 | 右侧图标/箭头点击事件。 | 91 92 93## OperateButton 94 95| 名称 | 类型 | 必填 | 说明 | 96| -------- | -------- | -------- | -------- | 97| text | [ResourceStr](ts-types.md#resourcestr) | 否 | 右侧按钮文字。 | 98 99 100## OperateCheck 101 102| 名称 | 类型 | 必填 | 说明 | 103| -------- | -------- | -------- | -------- | 104| isCheck | boolean | 否 | 右侧Switch/CheckBox/Radio选中状态。<br> isCheck默认值为false。<br> isCheck为true时，表示为选中。<br> isCheck为false时，表示为未选中。 | 105| onChange | (value: boolean)=>void | 否 | 右侧Switch/CheckBox/Radio选中状态改变时触发回调。<br> value为true时，表示从未选中变为选中。<br> value为false时，表示从选中变为未选中。 | 106 107## 事件 108支持[通用事件](ts-universal-events-click.md) 109 110## 示例 111 112```ts 113import { IconType, ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem'; 114import promptAction from '@ohos.promptAction' 115 116@Entry 117@Component 118struct ComposeListItemExample { 119 build() { 120 Column() { 121 List() { 122 ListItem() { 123 ComposeListItem({ 124 contentItem: ({ 125 iconStyle: IconType.NORMAL_ICON, 126 icon: $r('sys.media.ohos_app_icon'), 127 primaryText: '双行列表', 128 secondaryText: '辅助文字' 129 }), 130 operateItem: ({ 131 icon: { 132 value: $r('sys.media.ohos_app_icon'), 133 action: () => { 134 promptAction.showToast({ message: 'icon' }) 135 } }, 136 text: '右侧文本' 137 }) 138 }) 139 } 140 } 141 } 142 } 143} 144``` 145 146 147
