HarmonyOS 用List组件实现组合列表项

界面分析：

由于整体UX设计图符合从上至下的布局，所以可以采用Column组件作为外层容器

简介：

1. 最上方的标题可以使用Text组件进行加载渲染
2. 中间的Banner图和简介分别可以使用Image组件和Text组件进行加载
3. 最后一部分可以看作是一个列表，它由若干个列表项ListItem构成

实现标题、Banner、简介：

1. 标题栏可以采用Text组件进行加载渲染

   1. Column() {
   2. Text('标题')
   3. .fontFamily('HarmonyHeiTi-Bold')
   4. .fontSize(24)
   5. .fontColor(Color.Black)
   6. .textAlign(TextAlign.Start)
   7. .lineHeight(33)
   8. .fontWeight(700)
   9. .width('100%')
   10. }
   11. .padding({ top: 12, right: 16, bottom: 12, left: 16})
   12. .backgroundColor('#F1F3F5')

2. 放入图片资源：./src/main/resources/base/media目录中

3. 使用Image组件加载放入的Banner图片，设置其宽度百分百，并设置圆角。同时注意到banner图与上方的title间有19单位的空隙，与下方的组件有8单位的空隙

   1. Image($r('app.media.yourpicture'))
   2. .width('100%')
   3. .borderRadius(16)
   4. .margin({ top: 19, bottom: 8 })

4. 简介的部分也可以采用Text组件来进行数据的渲染

   1. Text('简介')
   2. .fontFamily('HarmonyHeiTi')
   3. .fontSize(14)
   4. .fontColor('rgba(0,0,0,0.60)')
   5. .fontWeight(400)
   6. .textAlign(TextAlign.Start)

5. 实现List的列表项

   // @Component功能更加多样，有自己的生命周期，还能支持预览效果
   // 而@Builder更加轻量，能满足基础的组件封装，性能更好，但是不支持预览

   1. @Component

   2. export struct Item {

   3. build() {

   4. Row(){

   5. }

   6. .width('100%')

   7. .height(48)

   8. .borderRadius(16)

   9. .alignItems(VerticalAlign.Center)

   10. .padding({ left: 12, right: 12 })

   11. .backgroundColor('#F1F3F5')

   12. }

   13. }

6. 导出数据接口

   1. export struct Item {
   2. @State navBarItem: NavBarItemType = {
   3. order: '01',
   4. title: '标题'
   5. };
   6. ...
   7. }

7. 实现序号

   1. @Component

   2. export struct Item {

   3. ...

   4. build() {

   5. Row() {

   6. Text(this.navBarItem.order)

   7. .margin({ right: 6 })

   8. .fontFamily('HarmonyHeiTi-Bold')

   9. .fontSize(21)

   10. .fontColor('#182431')

   11. .textAlign(TextAlign.Start)

   12. .lineHeight(22)

   13. .fontWeight(700)

   14. }

   15. ...

   16. }

   17. }

8. 实现标题

   1. @Component

   2. export struct Item {

   3. ...

   4. build() {

   5. Row() {

   6. Text(this.navBarItem.order)

   7. ...

   8. Text(this.navBarItem.title)

   9. .fontFamily('HarmonyHeiTi-Medium')

   10. .fontSize(16)

   11. .fontColor('#182431')

   12. .textAlign(TextAlign.Start)

   13. .lineHeight(22)

   14. .fontWeight(500)

   15. }

   16. }

   17. }

9. 将指向下一页的图标放置于 ./src/main/resources/base/media目录下，并填充

   1. @Component

   2. export struct Item {

   3. ...

   4. build() {

   5. Row() {

   6. Text(this.navBarItem.order)

   7. ...

   8. Text(this.navBarItem.title)

   9. ...

   10. Blank()

   11. Image($r('app.media.ic_arrow'))

   12. .width(12)

   13. .height(24)

   14. }

   15. ...

   16. }

   17. }

组合列表项：

1. 定义数据集，在分栏Tab的首页进行定义

   1. @State navBarList: NavBarItemType[] = [
   2. { order: '01', title: '准备与学习' },
   3. { order: '02', title: '构建应用' },
   4. { order: '03', title: '应用测试' },
   5. { order: '04', title: '上架' },
   6. { order: '05', title: '运营增长' },
   7. { order: '06', title: '商业变现' },
   8. { order: '07', title: '更多' }
   9. ];

2. 循环渲染

   1. List({ space: 12 }) {
   2. ForEach(this.navBarList, (item: NavBarItemType, index: number) => {
   3. ListItem() {
   4. NavBarItem({ navBarItem: item })
   5. }
   6. .width('100%')
   7. }, (item: NavBarItemType): string => item.title)
   8. }
   9. .width('100%')
   10. .margin({ top: 24 })

3. 在build（）函数中，加入Scroll组件。可以解决当内容条数不足时，Scroll组件滚动时会出现空白区域的错误效果。edgeEffect用于设置边缘滑动效果，设置为EdgeEffect.Spring表示设置为弹性物理动效