【鸿蒙应用实战开发】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组件的子组件，用于显示行内图片

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V3.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……

获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料