
HarmonyOS Developer 常见组件开发指导
list开发指导
list是用来显示列表的组件,包含一系列相同宽度的列表项,适合连续、多行地呈现同类数据。具体用法请参考list API。
创建list组件
在pages/index目录下的hml文件中创建一个list组件。
说明
- <list-item-group>是<list>的子组件,实现列表分组功能,不能再嵌套<list>,可以嵌套<list-item>。
- <list-item>是<list>的子组件,展示列表的具体项。
添加滚动条
设置scrollbar属性为on即可在屏幕右侧生成滚动条,实现长列表或者屏幕滚动等效果。
添加侧边索引栏
设置indexer属性为自定义索引时,索引栏会显示在列表右边界处,indexer属性设置为true,默认为字母索引表。
说明
- indexer属性生效需要flex-direction属性配合设置为column,且columns属性设置为1。
- indexer可以自定义索引表,自定义时"#"必须要存在。
实现列表折叠和展开
为list组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。
说明
- groupcollapse和groupexpand事件仅支持list-item-group组件使用。
场景示例
在本场景中,开发者可以根据字母索引表查找对应联系人。
dialog开发指导
dialog组件用于创建自定义弹窗,通常用来展示用户当前需要或用户必须关注的信息或操作。具体用法请参考dialog API。
创建dialog组件
在pages/index目录下的hml文件中创建一个dialog组件,并添加Button组件来触发dialog。dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。
设置弹窗响应
开发者点击页面上非dialog的区域时,将触发cancel事件而关闭弹窗。同时也可以通过对dialog添加show和close方法来显示和关闭弹窗。
说明
- 仅支持单个子组件。
- dialog属性、样式均不支持动态更新。
- dialog组件不支持focusable、click-effect属性。
