HarmonyOS NEXT鸿蒙开发:ListItem

介绍

官网API

搭配 List 列表使用,是 List 的子控件

ListItem 只能放一个控件,如果要放多个控件,可以添加 Row 控件,再向 Row 放入多个控件

接口

ListItem(value?: ListItemOptions)
参数
  • value:类型:ListItemOptions 对象

ListItemOptions 对象

属性:

  • style:类型:ListItemStyle,设置List组件卡片样式。

    • ListItemStyle.NONE:默认值,表示无样式

    • ListItemStyle.CARD:卡片样式

ListItemStyle.CARD

建议配合ListItemGroup的ListItemGroupStyle.CARD同时使用,显示默认卡片样式。

卡片样式下,ListItem默认规格:高度48vp,宽度100%,左右内边距8vp。

如果需要实现ListItem高度自适应,可以把height设置为undefined。

卡片样式下, 为卡片内的列表选项提供了默认的focus、hover、press、selected和disable样式。

说明:

当前卡片模式下,使用默认 Axis.Vertical 排列方向,如果 listDirection 属性设置为 Axis.Horizontal,会导致显示混乱;List属性alignListItem默认为ListItemAlign.Center,居中对齐显示。

例子

上接 HarmonyOS NEXT鸿蒙开发:List列表 例子

@Entry
@Component
struct ListAndListItemDemo {

  build() {
    Column() {
      // 人员列表
      List() {
        ListItem() {
          Text('李雷')
            .fontSize(20)
        }
        .padding({
          top:15,
          bottom:15,
          left:5
        })

        ListItem() {
          Text('韩梅梅')
            .fontSize(20)
        }
        .padding({
          top:15,
          bottom:15,
          left:5
        })

        ListItem() {
          Text('lucy')
            .fontSize(20)
        }
        .padding({
          top:15,
          bottom:15,
          left:5
        })

      }

      .width('90%')
      .height('100%')
      .divider({ //设置分割线
        strokeWidth: 1,
        color: '#333',
        // startMargin: 10,
        // endMargin: 10
      })
      .scrollBar(BarState.On) // 显示滚动条
    }
    .height('100%')
    .width('100%')
  }
}

原文出处:/show_1GW55DElFof.html