1# ComposeListItem 2 3 4列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 5 6 7>  **说明：** 8> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10 11## 导入模块 12 13``` 14import { ComposeListItem } from "@ohos.arkui.advanced.ComposeListItem" 15``` 16 17 18## 子组件 19 20无 21 22 23## 接口 24 25ComposeListItem({contentItem?: ContentItem, operateItem?: OperateItem}) 26 27**装饰器类型：**\@Component 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31 32**参数：** 33 34 35| 参数名 | 参数类型 | 必填 | 装饰器类型 | 参数描述 | 36| -------- | -------- | -------- | -------- | -------- | 37| contentItem | [ContentItem](#contentitem) | 否 | \@Prop | 定义左侧以及中间元素。 | 38| operateItem | [OperateItem](#operateitem) | 否 | \@Prop | 定义右侧元素。 | 39 40 41## ContentItem 42 43| 名称 | 值 | 必填 | 描述 | 44| -------- | -------- | -------- | -------- | 45| iconStyle | [IconType](#icontype枚举说明) | 否 | 左侧元素-图标样式。 | 46| icon | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 左侧元素-图标。 | 47| primaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 中间元素-标题内容。 | 48| secondaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 中间元素-副标题内容。 | 49| description | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 中间元素-描述内容。 | 50 51 52## IconType枚举说明 53 54| 名称 | 描述 | 55| -------- | -------- | 56| BADGE | 左侧图标为badge类型，图标大小为8\*8dp。 | 57| NORMAL_ICON | 左侧图标为小图标类型，图标大小为16\*16dp。 | 58| SYSTEM_ICON | 左侧图标为系统图标类型，图标大小为24\*24dp。 | 59| HEAD_SCULPTURE | 左侧图标为头像类型，图标大小为40\*40dp。 | 60| APP_ICON | 左侧图标为应用图标类型，图标大小为64\*64dp。 | 61| PREVIEW | 左侧图标为预览图类型，图标大小为96\*96dp。 | 62| LONGITUDINAL | 左侧图标为横向特殊比例（宽比高大），保持最长边为96dp。 | 63| VERTICAL | 左侧图标为竖向特殊比例（高比宽大），保持最长边为96dp。 | 64 65 66## OperateItem 67 68| 名称 | 值 | 必填 | 描述 | 69| -------- | -------- | -------- | -------- | 70| arrow | [OperateIcon](#operateicon) | 否 | 右侧元素-箭头，大小为12\*24dp。 | 71| icon | [OperateIcon](#operateicon) | 否 | 右侧元素-第一个图标，大小为24\*24dp。 | 72| subIcon | [OperateIcon](#operateicon) | 否 | 右侧元素-第二个图标，大小为24\*24dp。 | 73| button | [OperateButton](#operatebutton) | 否 | 右侧元素-按钮。 | 74| switch | [OperateCheck](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/blob/master/doc/ts-composite-components-composelistitem.md#switchcheckboxradio-operatecheck) | 否 | 右侧元素-开关。 | 75| checkbox | [OperateCheck](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/blob/master/doc/ts-composite-components-composelistitem.md#switchcheckboxradio-operatecheck) | 否 | 右侧元素-多选框，大小为24\*24dp。 | 76| radio | [OperateCheck](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/blob/master/doc/ts-composite-components-composelistitem.md#switchcheckboxradio-operatecheck) | 否 | 右侧元素-单选，大小为24\*24dp。 | 77| image | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 右侧元素-图片，大小为48\*48dp。 | 78| text | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 右侧元素-文字。 | 79 80 81## OperateIcon 82 83| 名称 | 值 | 必填 | 描述 | 84| -------- | -------- | -------- | -------- | 85| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 右侧元素-图标/箭头。 | 86| action | ()=>void | 否 | 右侧元素-图标/箭头点击事件。 | 87 88 89## OperateButton 90 91| 名称 | 值 | 必填 | 描述 | 92| -------- | -------- | -------- | -------- | 93| text | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 右侧元素-按钮文字。 | 94 95 96## Switch/CheckBox/Radio-OperateCheck 97 98| 名称 | 值 | 必填 | 描述 | 99| -------- | -------- | -------- | -------- | 100| isCheck | boolean | 否 | 右侧元素-右侧Switch/CheckBox/Radio选中状态。 | 101| onChange | (value: boolean)=>void | 否 | 右侧元素-右侧Switch/CheckBox/Radio选中状态改变时触发回调。 | 102 103 104## 示例1-纯文本 105 106```ts 107import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem'; 108import { ContentItem } from '@ohos.arkui.advanced.ComposeListItem'; 109 110@Entry 111@Component 112struct ComposeListItemExample { 113 build() { 114 Column() { 115 List() { 116 ListItem(){ 117 ComposeListItem({ 118 contentItem: ({ 119 primaryText: '单行列表' 120 }) 121 }) 122 } 123 } 124 } 125 } 126} 127``` 128 129 130 131 132 133## 示例2-左侧元素+文本 134 135```ts 136import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem'; 137import { IconType } from '@ohos.arkui.advanced.ComposeListItem'; 138import { ContentItem } from '@ohos.arkui.advanced.ComposeListItem'; 139 140@Entry 141@Component 142struct ComposeListItemExample { 143 build() { 144 Column() { 145 List() { 146 ListItem(){ 147 ComposeListItem({ 148 contentItem: ({ 149 iconStyle: IconType.NORMAL_ICON, 150 icon: $r('sys.media.ohos_app_icon'), 151 primaryText: '双行列表', 152 secondaryText: '辅助文字' 153 }) 154 }) 155 } 156 } 157 } 158 } 159} 160``` 161 162 163 164 165 166## 示例3-右侧元素 167 168```ts 169import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem'; 170import { OperateItem } from '@ohos.arkui.advanced.ComposeListItem'; 171import promptAction from '@ohos.promptAction' 172 173@Entry 174@Component 175struct ComposeListItemExample { 176 build() { 177 Column() { 178 List() { 179 ListItem() { 180 ComposeListItem({ 181 operateItem: ({ 182 icon: { 183 value: $r('sys.media.ohos_app_icon'), 184 action: () => { 185 promptAction.showToast({ message: 'icon' }) 186 } 187 }, 188 text: '右侧文本' 189 }) 190 }) 191 } 192 } 193 } 194 } 195} 196``` 197 198 199 200 201 202## 示例4-左右元素+文本 203 204```ts 205import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem'; 206import { IconType } from '@ohos.arkui.advanced.ComposeListItem'; 207import { ContentItem } from '@ohos.arkui.advanced.ComposeListItem'; 208import { OperateItem } from '@ohos.arkui.advanced.ComposeListItem'; 209import promptAction from '@ohos.promptAction' 210 211@Entry 212@Component 213struct ComposeListItemExample { 214 build() { 215 Column() { 216 List() { 217 ListItem() { 218 ComposeListItem({ 219 contentItem: ({ 220 iconStyle: IconType.NORMAL_ICON, 221 icon: $r('sys.media.ohos_app_icon'), 222 primaryText: '双行列表', 223 secondaryText: '辅助文字' 224 }), 225 operateItem: ({ 226 icon: { 227 value: $r('sys.media.ohos_app_icon'), 228 action: () => { 229 promptAction.showToast({ message: 'icon' }) 230 } }, 231 text: '右侧文本' 232 }) 233 }) 234 } 235 } 236 } 237 } 238``` 239 240 241
