今日核心： 列表List
1. 列表 List
列表是一种复杂的容器，当列表项达到一定数量，超过List容器组件大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。
使用列表可以轻松高效地显示结构化、可滚动的信息。通过在 list 组件中按垂直或者水平方向线性排列子组件。
列表作为一种容器，会自动按其滚动方向排列子组件，向列表中添加组件或从列表中移除组件会重新排列子组件。
垂直滚动列表
水平滚动列表
List表示列表容器，ListItem表示单个列表项，可以包含单个子组件。
1.1. 基本使用
1.1.1. 组件
List() {
listItem() {}
.....
}
1.1.2.示例代码
1.2. 开发布局
1.2.1. 设置主轴方向
List组件主轴默认是垂直方向，即默认情况下不需要手动设置List方向，就可以构建一个垂直滚动列表。若是水平滚动列表场景，将 List 的 listDirection 属性设置为 Axis.Horizontal 即可实现。listDirection 默认为 Axis.Vertical，即主轴默认是垂直方向。
属性：listDirection()
参数：枚举 Axis
●Vertical：垂直方向，默认值
●Horizontal：水平方向
List() {
listItem()
......
}
.listDirection(Axis.Horizontal)
1.2.2. 设置交叉轴布局
1.2.2.1. 列模式
属性：lanes()
参数：
●参数1： 交叉轴方向列数
●参数2： 交叉轴方向列间距
List() {
listItem()
......
}
// 参数1：交叉轴方向列数
// 参数2： 交叉轴方向列间距
.lanes(3, 10)
1.2.2.2. 列对齐方式
List交叉轴方向宽度大于ListItem交叉轴宽度列数时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。
属性：alignListItem()
参数：枚举 ListItemAlign
●Start：首部对齐（默认）
●Center：居中对齐
●End：尾部对齐
List() {
listItem()
......
}
.alignListItem(ListItemAlign.Center)****
1.3. 自定义列表样式
1.3.1. 滚动条状态
属性：scrollBar()
参数：枚举 BarState
● Off： 不显示
● On：常驻显示
● Auto：按需显示（触摸时显示，2s 后消失）
List() {
listItem()
......
}
.scrollBar(BarState.Off)****
1.3.2. 分割线样式
列表默认没有分割线
属性：divider()
参数：{ strokeWidth: 数字， color?: 'color', startMargin?: 数字, endMargin?: 数字 }
List() {
listItem()
......
}
.divider({
.strokeWidth: 1,
.color: Color.Orange,
.startMargin: 10,
.endMargin: 10
})
2. 综合案例-频道列表
示例图
代码如下
@Entry
@Component
struct Index {
build() {
Column() {
List() {
ListItem() {
Column({ space: 5}) {
Image('/images/chaoshi.png')
.height(25)
Text('京东超市')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/fushi.png')
.height(25)
Text('美妆服饰')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/shengxian.png')
.height(25)
Text('京东生鲜')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/paimai.png')
.height(25)
Text('京东拍卖')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/woerma.png')
.height(25)
Text('沃尔玛')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/guoji.png')
.height(25)
Text('京东国际')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/dianqi.png')
.height(25)
Text('京东电器')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/car.png')
.height(25)
Text('买车养车')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/chongzhi.png')
.height(25)
Text('充值中心')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/yundong.png')
.height(25)
Text('运动健康')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/paipai.png')
.height(25)
Text('拍拍二手')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/plus.png')
.height(25)
Text('Plus 会员')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/caipiao.png')
.height(25)
Text('福利彩票')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/maiyao.png')
.height(25)
Text('买药')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
ListItem() {
Column({ space: 5}) {
Image('/images/gengduo.png')
.height(25)
Text('更多频道')
.fontSize(14).fontColor('#727070')
}
}
.width('20%')
}
.height(120)
.lanes(2)
.listDirection(Axis.Horizontal)
.scrollBar(BarState.Off)
}
.padding({top: 10})
}
}
3. 通用属性
3.1. 颜色渐变
作用：设置组件颜色渐变效果
分类：线性渐变 和 径向渐变
3.1.1. 线性渐变
属性：linearGradient()
参数：
●angle：线性渐变的起始角度。0点方向顺时针旋转为正向角度，默认值：180
●direction:线性渐变的方向，设置 angle 后不生效，值为 枚举类型 GradientDirection
○Left：从右向左
○Top：从下向上
○Right：从左向右
○Bottom：从上向下
○LeftTop：从右下 到 左上
○LeftBottom：从右上 到 左下
○RightTop：从左下 到 右上
○RightBottom：从左上 到 右下
@Entry
@Component
struct Index {
build() {
Column({ space: 10}) {
Text('线性')
.width(100).height(50).backgroundColor(Color.Pink)
.linearGradient({
direction: GradientDirection.Right,
colors: [['red', 0.1], ['#fc0', 0.8]]
})
}
.padding(20)
}
}
3.1.2. 径向渐变
属性：radialGradient()
参数：
●center：径向渐变的中心点，即相对于当前组件左上角的坐标，写法[x坐标, y坐标]
@Entry
@Component
struct Index {
build() {
Column({ space: 10}) {
Text('径向')
.width(100).height(50).backgroundColor(Color.Pink)
.radialGradient({
center: [40, 0],
radius: 40,
// colors: [['red', 0.1], ['#fc0', '0.8']],
colors: [
['rgba(255, 255, 255, 0.6)', 0],
['rgba(255, 255, 255, 0)', 1]
]
// repeating:true
})
}
.padding(20)
}
}
3.2. 阴影
作用：为组件添加阴影效果
属性：shadow()
参数：{}
参数写法
{
radius: 模糊半径,
type?: 阴影类型,
color?: 阴影颜色,
offsetX?: X轴偏移,
offsetY?: Y轴偏移,
fill?: 是否内部填充
}
组件阴影
@Entry
@Component
struct Index {
build() {
Column() {
Row() {}
.width('100%').height(200).backgroundColor('#fff')
.shadow({
// 模糊半径
radius: 20,
// 阴影类型
type: ShadowType.COLOR,
// 阴影颜色
color: 'rgba(0,0,0,0.5)',
// X 轴偏移
offsetX: 0,
// Y 轴偏移
offsetY: 0,
// 是否内部填充，值为布尔型，默认为flase
fill: false
})
}
.padding(20)
}
}
3.3. 多态样式
属性：stateStyles()
参数
描述
normal
组件无状态时的样式（默认状态）
pressed
组件按下状态的样式
disabled
组件禁用状态的样式
focused
组件获焦状态的样式
clicked
组件点击状态的样式
/*
.stateStyles({
状态: {
属性
}
})
*/
@Entry
@Component
struct Index {
build() {
Column() {
Text('文本')
.width(50)
.height(50)
.backgroundColor(Color.Pink)
.stateStyles({
pressed: {
.width(200)
}
})
}
.padding(20)
}
}
3.4. 动画 animation
组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
属性：animation
参数： {}
参数
描述
duration
设置动画时长。
默认值：1000
单位：毫秒
curve
设置动画曲线
默认值：Curve.EaseInOut
delay
设置动画延迟执行的时长。
默认值：0，不延迟播放。
单位：毫秒
iterations
设置播放次数。
默认值：1
设置为-1时表示无限次播放。设置为0时表示无动画效果。
import curves from '@ohos.curves'
@Entry
@Component
struct Index {
build() {
Column() {
Text('文本')
.width(50)
.height(50)
.backgroundColor(Color.Pink)
.stateStyles({
pressed: {
.width(200)
}
})
.animation({
duration: 2000,
// 速度曲线
curve: curves.springMotion(),
delay: 1000,
iterations: -1
})
}
.padding(20)
}
}
3.5. 图形变换
用于对组件进行平移、旋转、缩放、矩阵变换等操作。
3.5.1. 平移
作用：可使组件在以组件左上角为坐标原点的坐标系中进行移动
属性：translate()
参数：{x?: X轴移动距离, y?: Y轴移动距离, z?: Z轴移动距离}
import curves from '@ohos.curves'
@Entry
@Component
struct Index {
build() {
Column() {
Image('/images/cat.jpg')
.width(200)
.aspectRatio(1)
.stateStyles({
normal: {
.translate({x: 0})
},
pressed: {
.translate({x: 100})
}
})
.animation({
curve: curves.springMotion()
})
}
.padding(20)
}
}
3.5.2. 缩放
作用：分别设置X轴、Y轴、Z轴的缩放比例，默认值为1**
属性：scale(),
参数： {x?: X轴缩放比例, y?: Y轴缩放比例, z?: Z轴缩放比例, centerX?: Y轴中心点坐标, centerY? Y轴中心点坐标}
import curves from '@ohos.curves'
@Entry
@Component
struct Index {
build() {
Column() {
Image('/images/cat.jpg')
.width(200)
.aspectRatio(1)
.stateStyles({
normal: {
.scale({x:1, y: 1})
},
pressed: {
.scale({x: 0.8, y: 0.8})
}
})
.animation({
curve: curves.springMotion()
})
}
.padding(20)
}
}
3.5.3. 旋转
作用：可使组件在以组件左上角为坐标原点的坐标系中进行旋转
属性：rotate()
参数：{angle: 旋转角度, centerX?: Y轴中心点坐标, centerY? Y轴中心点坐标}
import curves from '@ohos.curves'
@Entry
@Component
struct Index {
build() {
Column() {
Image('/images/cat.jpg')
.width(200)
.aspectRatio(1)
.stateStyles({
normal: {
.rotate({angle: 0})
},
pressed: {
.rotate({angle: 60})
}
})
.animation({
curve: curves.springMotion()
})
}
.padding(20)
}
}
4. 综合案例-微店-卡片
import curves from '@ohos.curves'
@Entry
@Component
struct Index {
build() {
Column() {
Column({space: 10}) {
Image('/images/actor.jpg')
.width('100%')
.borderRadius(10)
Column({space: 5}) {
Text('看到游本昌年轻时候，终于知道他为啥看见胡歌眼泛泪光，两人真的好像啊，谁看见年轻时候不会感慨万千呢？')
.fontSize(14)
.lineHeight(20)
.textOverflow({overflow:TextOverflow.Ellipsis})
.maxLines(2)
Row() {
Text(){
ImageSpan('/images/avatar.jpg')
.width(15)
.borderRadius(10)
.margin({right: 5})
Span('娱小鱼')
.fontColor('#676767')
.fontSize(12)
}
Text() {
ImageSpan($r('app.media.ic_browse'))
.width(15)
.margin({right: 5})
Span('6万')
.fontColor('#676767')
.fontSize(12)
}
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.padding({left: 5, right: 5, bottom: 10})
}
.width('50%')
.borderRadius(10)
.stateStyles({
normal: {
.scale({x:1, y:1})
},
pressed: {
.scale({x: 0.95, y: 0.95})
}
})
.animation({
duration: 500,
curve: curves.springMotion()
})
}
.padding(20)
}
}
效果：按压卡片有缩放效果
Tips：
1.Span()：Text组件的子组件，用于显示行内文本的组件
2.ImageSpan()：Text组件的子组件，用于显示行内图片
