组件功能

列表视图容器组件（ListView） 用于承载并展示多个列表项（ListViewItem），是构建纵向信息列表的基础容器。

该组件负责统一管理列表结构、展示数量及整体状态信息，具体的内容与交互由内部的列表项组件定义。

基础用法

通过 children 属性配置多个 ListViewItem，即可快速构建标准列表视图。

Template 示例：

<ListView>
  <ListViewItem gap="16px" align="center">
    <Icon name="profile" size="lg" />
    <Text value="用户资料" />
    <Button label="查看" size="sm" />
  </ListViewItem>
</ListView>

效果展示如下：

属性说明

注意：

★ 标记为必填属性。

WidgetStatus 类型说明

status 用于在列表区域展示辅助状态信息，当前支持以下两种配置形式：

1. 字符串： 直接显示状态文本，适用于简单提示。

   Template 示例：

   <ListView status="共 10 条记录">
     <ListViewItem gap="16px" align="center">
       <Icon name="profile" size="lg" />
       <Text value="用户资料" />
       <Button label="查看" size="sm" />
     </ListViewItem>
   </ListView>
   

   效果展示如下：

   

2. 对象：通过包含 text 字段的对象配置状态内容。

   Template 示例：

   <ListView status={{ text: "共 10 条记录" }}>
     <ListViewItem gap="16px" align="center">
       <Icon name="profile" size="lg" />
       <Text value="用户资料" />
       <Button label="查看" size="sm" />
     </ListViewItem>
   </ListView>
   

   效果展示如下：

   

注意：

虽然类型定义中包含 icon 和 favicon 字段，但当前实现仅显示文本内容，不支持图标显示。

ListViewItem 子组件

ListView 必须包含一个或多个 ListViewItem 作为子组件，用于定义每一行的具体内容和交互行为。详细配置请参见 ListViewItem 列表项。

使用示例

以下示例展示了一个带展示数量限制和状态提示的列表视图。

Template 示例：

<ListView limit={5} status="显示前 5 条记录">
  <ListViewItem 
    gap="12px" 
    align="center" 
    onClickAction={{ type: "select_item", payload: { id: "1" } }}
>
    <Icon name="document" color="#0052D9" />
    <Text value="文档 1" />
  </ListViewItem>
  <ListViewItem gap="12px" align="center">
    <Icon name="document" color="#0052D9" />
    <Text value="文档 2" />
  </ListViewItem>
</ListView>

效果展示如下：