tencent cloud

腾讯云智能体开发平台

动态与公告
产品动态
产品公告
产品简介
产品概述
产品优势
应用场景
模型介绍
购买指南
套餐订阅
旧版计费
快速入门
智能体应用及其三种模式
基于“标准模式”创建“内容总结助手”
基于“单工作流模式”创建“网页内容抓取助手”
基于“Multi-Agent 模式”创建“脱口秀素材创作助手”
操作指南
应用开发
工作流
Multi-Agent
知识库
Widget
插件广场
模型列表
提示词模板
应用模板
平台管理
企业、工作空间与权限
API 文档
History
API Category
Making API Requests
Atomic Capability APIs
Operation Optimization APIs
Document Library APIs
Q&A Database APIs
Knowledge Tag APIs
Application Management APIs
Enterprise Management APIs
Billing APIs
Release Management APIs
Dialogue Endpoint APIs
Data Statistics APIs
Data Types
Error Codes
应用接口文档
对话接口总体概述
对话端接口文档(WebSocket)
对话端接口文档(HTTP SSE)
图片对话或文件对话(实时文档解析+对话)
离线文档上传
腾讯云智能体开发平台操作 cos 指南
ADP 文档解析协议
常见问题
产品常见问题
技术常见问题
相关协议
腾讯云智能体开发平台服务等级协议
腾讯云智能体开发平台服务特别条款
腾讯云智能体开发平台隐私政策
腾讯云智能体开发平台数据处理和安全协议
开源许可声明
联系我们
词汇表

ListViewItem 列表项

PDF
聚焦模式
字号
最后更新时间: 2026-02-03 15:29:52

组件功能

列表项组件(ListViewItem)用于在 ListView 中展示单个列表条目,是构建列表型界面的基本单元。
该组件支持灵活的子组件组合、对齐与间距控制,并可配置整行点击动作,适用于信息展示与操作入口并存的场景。

基础用法

通过 children 属性定义列表项内部的展示内容,可组合图标、文本等组件,形成基础列表结构。
Template 示例:
<ListViewItem gap="16px" align="center">
<Icon name="user" size="lg" />
<Text value="用户名称" />
</ListViewItem>
效果展示如下:


属性说明

属性名
类型
描述
默认值
children
ChatKitComponent[]
子组件列表
-
onClickAction
ActionConfig
点击整个列表项时触发的动作
-
gap
number | string
子元素间距
-
align
Alignment
垂直对齐方式
"start"
注意:
★ 标记为必填属性。

Alignment 类型说明

用于控制列表项内子组件的垂直对齐方式,支持以下取值:
"start" - 顶部对齐
"center" - 居中对齐
"end" - 底部对齐
"baseline" - 基线对齐
"stretch" - 拉伸对齐

交互效果说明

当配置了 onClickAction 时:
鼠标悬停时背景变灰。
显示 pointer 手形光标。
整个列表项可点击。
适用于跳转、选择等需要触发操作的场景。

使用示例

以下示例展示了一个可点击的列表项,点击后跳转至用户资料页面。
Template 示例:
<ListView>
<ListViewItem
gap="16px"
align="center"
onClickAction={{
type: "sys.go_to_url",
payload: { url: "/profile" }
}}
>
<Icon name="profile" size="lg" color="#0052D9" />
<Col gap="4px" flex={1}>
<Text value="用户资料" size="md" weight="semibold" />
<Caption value="查看和编辑个人信息" size="sm" />
</Col>
<Button label="查看" variant="outline" size="sm" />
</ListViewItem>
</ListView>
效果展示如下:




典型布局模式

1. 图标 + 文本
适用于简单的列表或轻量信息展示。
Template 示例:
<ListViewItem gap="12px" align="center">
<Icon name="document" />
<Text value="文档名称" />
</ListViewItem>
效果展示如下:



2. 图标 + 标题 + 描述
适用于需要展示补充说明信息的列表项。
Template 示例:
<ListViewItem gap="16px" align="center">
<Icon name="mail" size="lg" />
<Col gap="4px" flex={1}>
<Text value="邮件标题" weight="semibold" />
<Caption value="邮件摘要内容" />
</Col>
</ListViewItem>
效果展示如下:



3. 完整信息卡片
适用于列表中包含操作按钮的复杂场景。
Template 示例:
<ListViewItem gap="16px" align="center">
<Image src="https://cdn.xiaowei.qq.com/webim/assets/static/widget/lib-v1.0.0/img/self_introduction.png" size="48px" radius="full" />
<Col gap="4px" flex={1}>
<Text value="董俊言(Julian)" weight="semibold" />
<Caption value="产品经理" />
</Col>
<Button label="关注" size="sm" />
</ListViewItem>
效果展示如下:






帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈