输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
文档管理中心

HarmonyOS 5.0.0(12)

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
API参考
高级筛选
元服务API集不筛选
您当前浏览的HarmonyOS 5.0.0(API 12)文档归档不再维护，推荐您使用最新版本。详细请参考文档维护策略变更。
API参考应用框架ArkUI（方舟UI框架）ArkTS组件滚动与滑动ComposeListItem

ComposeListItem

更新时间: 2025-03-17 00:08
本文导读
展开章节

列表包含一系列相同宽度的列表项。内容包括适合连续、多行呈现同类数据的组合，例如图片和文本。

说明

该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

收起
自动换行
深色代码主题
复制
  1. import { ComposeListItem } from "@kit.ArkUI"

子组件

无

属性

不支持通用属性

ComposeListItem

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

装饰器类型：@Component

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
名称 类型 必填 装饰器类型 说明
contentItem ContentItem 否 @Prop

定义左侧以及中间元素。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
operateItem OperateItem 否 @Prop

定义右侧元素。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

ContentItem

展开
名称 类型 必填 说明
iconStyle IconType 否

左侧元素的图标样式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
icon ResourceStr 否

左侧元素的图标资源。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
primaryText ResourceStr 否

中间元素的标题内容。

文字处理规则： 只显示一行文字，超出内容以“...”显示。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
secondaryText ResourceStr 否

中间元素的副标题内容。

文字处理规则： 只显示一行文字，超出内容以“...”显示。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
description ResourceStr 否

中间元素的描述内容。

文字处理规则： 只显示一行文字，超出内容以“...”显示。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

IconType

元服务API： 从API version 11开始，该接口支持在元服务中使用。

展开
名称 值 说明
BADGE 1 左侧图标为badge类型，图标大小为8*8vp。
NORMAL_ICON 2 左侧图标为小图标类型，图标大小为16*16vp。
SYSTEM_ICON 3 左侧图标为系统图标类型，图标大小为24*24vp。
HEAD_SCULPTURE 4 左侧图标为头像类型，图标大小为40*40vp。
APP_ICON 5 左侧图标为应用图标类型，图标大小为64*64vp。
PREVIEW 6 左侧图标为预览图类型，图标大小为96*96vp。
LONGITUDINAL 7 左侧图标为横向特殊比例（宽比高大），保持最长边为96vp。
VERTICAL 8 左侧图标为竖向特殊比例（高比宽大），保持最长边为96vp。

OperateItem

元服务API： 从API version 11开始，该接口支持在元服务中使用。

展开
名称 类型 必填 说明
arrow OperateIcon 否 右侧元素为箭头，大小为12*24vp。
icon OperateIcon 否 右侧元素的第一个图标，大小为24*24vp。
subIcon OperateIcon 否 右侧元素的第二个图标，大小为24*24vp。
button OperateButton 否 右侧元素为按钮。
switch OperateCheck 否 右侧元素为开关。
checkbox OperateCheck 否 右侧元素为多选框，大小为24*24vp。
radio OperateCheck 否 右侧元素为单选，大小为24*24vp。
image ResourceStr 否 右侧元素为图片，大小为48*48vp。
text ResourceStr 否 右侧元素为文字。

OperateIcon

元服务API： 从API version 11开始，该接口支持在元服务中使用。

展开
名称 类型 必填 说明
value ResourceStr 是 右侧图标/箭头资源。
action ()=>void 否 右侧图标/箭头点击事件。

OperateButton

元服务API： 从API version 11开始，该接口支持在元服务中使用。

展开
名称 类型 必填 说明
text ResourceStr 否 右侧按钮文字。

OperateCheck

元服务API： 从API version 11开始，该接口支持在元服务中使用。

展开
名称 类型 必填 说明
isCheck boolean 否

右侧Switch/CheckBox/Radio选中状态。

isCheck默认值为false。

isCheck为true时，表示为选中。

isCheck为false时，表示为未选中。
onChange (value: boolean)=>void 否

右侧Switch/CheckBox/Radio选中状态改变时触发回调。

value为true时，表示从未选中变为选中。

value为false时，表示从选中变为未选中。

事件

支持通用事件

示例

该示例实现了带有主标题、副标题、描述、右侧按钮及文本的简单列表项。

收起
自动换行
深色代码主题
复制
  1. // 该示例主要演示该组件的基础功能使用，包含左侧右侧元素的情况
  2. import { IconType, ComposeListItem, promptAction } from '@kit.ArkUI';
  3. 

  4. @Entry
  5. @Component
  6. struct ComposeListItemExample {
  7.   build() {
  8.     Column() {
  9.       List() {
  10.         ListItem() {
  11.           ComposeListItem({
  12.             contentItem: ({
  13.               iconStyle: IconType.NORMAL_ICON,
  14.               icon: $r('sys.media.ohos_app_icon'),
  15.               primaryText: '双行列表',
  16.               secondaryText: '辅助文字',
  17.               description: '描述内容文字'
  18.             }),
  19.             operateItem: ({
  20.               icon: {
  21.                 value: $r('sys.media.ohos_app_icon'),
  22.                 action: () => {
  23.                   promptAction.showToast({ message: 'icon' });
  24.                 } },
  25.               text: '右侧文本'
  26.             })
  27.           })
  28.         }
  29.       }
  30.     }
  31.   }
  32. }

Refresh
GridObjectSortComponent
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 API参考 中进行搜索
请输入您想要搜索的关键词