鸿蒙开发 - 循环控制、列表布局List、自定义组件

本文介绍了React中的ForEach函数用于遍历数组并减少不必要的渲染,以及List组件的使用,包括其作为复杂容器、滚动功能、ListItem限制和layoutWeight属性在实现动态布局中的作用。
摘要由CSDN通过智能技术生成

一、循环控制

ForEach(){

1.arr:要遍历的数组

2.页面的生成函数

3.键生成函数,提供唯一标识,如果后续数组中数据发生变化,会判断元素的唯一标识是否发生变化,有变更再去做渲染,这样减少了不必要的渲染,提高了页面的渲染效率(可选参数,如果不填会会有默认的键生成函数,生成规则是用角标拼上数组元素的数据)

}

二、列表布局List

List(){

1.List 是一种复杂容器,可以用来替换colum容器,当数量超过屏幕后,会自动提供滚动功能

2.ListItem里只能有一个根组件,如果有多个内容可以使用 Row、Colum 等容器包裹

3.listDirection:列表方向支持两种,一般默认垂直方向排列(Vertical),水平方向(Horizontal)

}

需要注意的是,当我们在使用List组件的时候,如果想要做到下图中,滑动过程中标题不动,列表动的效果,就需要用到 layoutWeight 这个属性了, layoutWeight 是一个特殊的属性,代表了布局的权重。一般是0 和1 两种值。权重值默认是零,我们把整个高度进行一个分配,如果权重默认值是 0 ,这时候的高度就是我们自己配置的高度,如果权重值为 1 的话,就按比例分配。

比如说下图案例,如果标题部分和列表部分都设置 layoutWeight为 1 的话,就代表两个组件平分,如果标题部分默认权重值为 0 ,而列表部分权重值为1 的话,就代表除了标题部分以外都是列表部分的高度。

当然,如果想要标题和列表一起滚动,只需要把标题部分也放在列表里即可

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值