HarmonyOS学习(Day03-Day05)：项目进度列表实战（首页）

#学习视频：bilibili蜗牛学苑#
【最新】全套鸿蒙开发HarmonyOS NEXT5.0实战教程
本篇文章重要为以下页面所用到的干系知识点
Day03

示例图

一、布局单元

在我们布局中，经常会采用px来作为布局的一个尺寸参考单元，这个单元在浏览器中已经是布局的标准。在鸿蒙开发中，提出了一些新的单元用于布局。
物理像素：一样寻常用px来表示。
逻辑像素：在布局的时间，底层针对物理像素和屏幕的尺寸关系进行了转化的中心层。
分辨率：代表在屏幕上面到底布局了多少个像素点（发光点）。

1. // 屏幕尺寸：1680px  分辨率：3560px
2. div{
3.     width: 500px,
4.     height: 500px
5. }

复制代码

这里写的的500px实际上参考3560px像素为布局，但是最终渲染出来的结果，转化为了1680px尺寸的比例。
鸿蒙开发中，要进行布局，我们采用官方提供的单元来实现
名称描述px屏幕物理像素单元。预览器默认1080px，假如你的盒子100px，默认参考1080px来布局vp屏幕密度干系像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单元时，默认单元vp。阐明：vp与px的比例与屏幕像素密度有关。以屏幕的实际巨细为参考布局（逻辑像素）fp字体像素，与vp类似实用屏幕密度厘革，随系统字体巨细设置厘革。lpx视窗逻辑像素单元，lpx单元为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px巨细。 代码为：

1. @Entry
2. @Component
3. struct Page01 {
4.  @State message: string = 'Hello World';
5. ​
6.  build() {
7.    Column(){
8.      Text("文本")
9.        .fontSize("30fp")  // 与不加单位时效果一样，但是当改变设备字体大小时也会跟着改变
10.      Row()
11.        .width("100vp")  // 以屏幕的实际大小为参考布局,与不加单位时效果一样
12.        .height("100vp")
13.        .backgroundColor("#ccc")
14.      Row()
15.        .width("100lpx")  // 1vp = 2lpx
16.        .height("100lpx")
17.        .backgroundColor("red")
18.    }
19.    .height('100%')
20.    .width('100%')
21.   }
22. }

复制代码

总结：
1、假如采用px作为单元，在鸿蒙中参考的物理像素作为布局参考尺寸，物理像素的值可能是动态厘革的，即放在不同手机上面，物理像素可能厘革。
2、vp作为鸿蒙开发中我们推荐的单元，采用当前装备的屏幕宽度来作为我们布局的参考，不管物理像素到底是多少。可以镌汰屏幕之间布局差别。不写单元时默认是vp。
3、fp一样寻常用于设置字体巨细，不写单元时默认会采用vp作为字体巨细单元。fp最大的特点是随着系统字体巨细的厘革而厘革。
4、lpx这个单元要进行换算。当计划稿为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px巨细。
Day04

二、Column和Row的布局

Column默认垂直方向为主轴，水平方向为侧轴。
Row默认水平方向为主轴，垂直方向为侧轴。
元素放在这两个容器中，子元素默认会在侧轴方向上面水平居中。

1. @Entry
2. @Component
3. struct Page01 {
4.  @State message: string = 'Hello World';
5. ​
6.  build() {
7.    // 以弹性布局为基础来理解
8.    Column(){
9.      Column(){
10.        Text("你好，小王")
11.          .fontSize(30)
12.          .fontWeight(FontWeight.Bold)
13.          .fontColor("#12175E")
14.        Text("测试代码")
15.      }
16.      .width("100%")
17.      .height("50%")
18.      .backgroundColor(Color.Gray)
19.      .alignItems(HorizontalAlign.Start) // 侧轴（水平方向）对齐方式
20.      .justifyContent(FlexAlign.Center) // 主轴（垂直方向）对齐方式
21.        
22.      Row(){
23.        Text("Row1")
24.        Text("Row2")
25.      }
26.      .width("100%")
27.      .height("50%")
28.      .backgroundColor(Color.Orange)
29.      .alignItems(VerticalAlign.Top)  // 侧轴（水平方向）对齐方式
30.      .justifyContent(FlexAlign.SpaceBetween)  // 主轴（垂直方向）对齐方式
31.    }
32.   }
33. }

复制代码

在布局过程中这两个组件都可以用alignItems和justifyContent来调解子元素的布局方案。
关于颜色配置

在布局中，但凡遇到需要配置颜色，我们可以采用四个方案来计划

1. // 设置颜色可以允许：英文单词、16进制、rgb、枚举
2. .fontColor("red")  // 英文单词
3. .fontColor("#12175E") // 16进制
4. .fontColor("rgb(233,456,12)")  // rgb
5. .fontColor(Color.orange)  // 枚举

复制代码

可以根据计划师提供的原稿进行颜色吸取并用于布局页面。
三、Scroll滚动组件

在移动端开发过程中，我们都会遇到在水平方向或者垂直方向内容超出过后，默认无法检察的问题，这个需要借助官方提供Scroll组件来实现页面滚动。
支持水平方向滚动，也可以支持垂直方向滚动。
基础代码

1. import { curves } from '@kit.ArkUI'
2. ​
3. @Entry
4. @Component
5. struct ScrollExample {
6.  // 滚动的控制器
7.  scroller: Scroller = new Scroller()
8.  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
9. ​
10.  build() {
11.    Stack({ alignContent: Alignment.TopStart }) {
12.      Scroll(this.scroller) {
13.        Column() {
14.          ForEach(this.arr, (item: number) => {
15.            Text(item.toString())
16.              .width('90%')
17.              .height(150)
18.              .backgroundColor(0xFFFFFF)
19.              .borderRadius(15)
20.              .fontSize(16)
21.              .textAlign(TextAlign.Center)
22.              .margin({ top: 10 })
23.          }, (item: string) => item)
24.        }.width('100%')
25.      }
26.      .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
27.      .scrollBar(BarState.On) // 滚动条常驻显示
28.      .scrollBarColor(Color.Gray) // 滚动条颜色
29.      .scrollBarWidth(10) // 滚动条宽度
30.      .friction(0.6)  // 设置摩擦系数，在穿戴设备，手机和平板一般不一样
31.      .edgeEffect(EdgeEffect.None) // 滚动到边缘位置的效果
32.      // 即将滚动的时候触发的事件
33.      .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
34.        console.info(xOffset + ' ' + yOffset)
35.      })
36.      // 滚动完成后触发的事件
37.      .onDidScroll(()=>{
38.        console.log("滚动完成")
39.      })
40.      // 滚动到边缘触发事件
41.      .onScrollEdge((side: Edge) => {
42.        console.info('To the edge')
43.      })
44.      // 滚动停止触发事件
45.      .onScrollStop(() => {
46.        console.info('Scroll Stop')
47.      })
48. ​
49.      Button('scroll 150')
50.        .height('5%')
51.        .onClick(() => { // 点击后下滑指定距离150.0vp
52.          this.scroller.scrollBy(0, 150)
53.        })
54.        .margin({ top: 10, left: 20 })
55.      Button('scroll 100')
56.        .height('5%')
57.        .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离
58.          const yOffset: number = this.scroller.currentOffset().yOffset;
59.          this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 100 })
60.        })
61.        .margin({ top: 60, left: 20 })
62.      Button('scroll 100')
63.        .height('5%')
64.        .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离，滑动过程配置有动画
65.          let curve = curves.interpolatingSpring(10, 1, 228, 30) //创建一个阶梯曲线
66.          const yOffset: number = this.scroller.currentOffset().yOffset;
67.          this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 100, animation: { duration: 1000, curve: curve } })
68.        })
69.        .margin({ top: 110, left: 20 })
70.      Button('back top')
71.        .height('5%')
72.        .onClick(() => { // 点击后回到顶部
73.          this.scroller.scrollEdge(Edge.Top)
74.        })
75.        .margin({ top: 160, left: 20 })
76.      Button('next page')
77.        .height('5%')
78.        .onClick(() => { // 点击后滑到下一页
79.          this.scroller.scrollPage({ next: true })
80.        })
81.        .margin({ top: 210, left: 20 })
82.    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
83.   }
84. }

复制代码

常用属性

1. .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
2. .scrollBar(BarState.On) // 滚动条常驻显示
3. .scrollBarColor(Color.Gray) // 滚动条颜色
4. .scrollBarWidth(10) // 滚动条宽度
5. .friction(0.6)  // 设置摩擦系数，在穿戴设备，手机和平板一般不一样
6. .edgeEffect(EdgeEffect.None) // 滚动到边缘位置的效果

复制代码

常用变乱

1. // 即将滚动的时候触发的事件
2. .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
3.    console.info(xOffset + ' ' + yOffset)
4. })
5. // 滚动完成后触发的事件
6.    .onDidScroll(()=>{
7.    console.log("滚动完成")
8. })
9. // 滚动到边缘触发事件
10.    .onScrollEdge((side: Edge) => {
11.    console.info('To the edge')
12. })
13. // 滚动停止触发事件
14.    .onScrollStop(() => {
15.    console.info('Scroll Stop')
16. })

复制代码

控制器的作用

1. Scroll(this.scroller)
2. ​
3. Button('scroll 150')
4.        .height('5%')
5.        .onClick(() => { // 点击后下滑指定距离150.0vp
6.          this.scroller.scrollBy(0, 150)
7.        })
8.        .margin({ top: 10, left: 20 })
9.      Button('scroll 100')
10.        .height('5%')
11.        .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离
12.          const yOffset: number = this.scroller.currentOffset().yOffset;
13.          this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 100 })
14.        })
15.        .margin({ top: 60, left: 20 })

复制代码

scrollBy：在目前的滚动距离上面进行滚动距离累加
scrollTo：指定滚动到哪个位置
scrollEdge：滚动到容器边缘，不区分滚动轴方向
scrollPage：滚动到下一页或者上一页
Day05

四、this指向问题

面向对象开发的时间，会出现this利用
在进行变乱绑定的时间，也会调用this调用指向
在箭头函数中也会用到this，正确判断他的指向
结论：

   1、this永远指向一个对象，不管在哪种场景下面
  2、普通函数中的this，谁调用这个函数，默认this就指向谁
  3、箭头函数默认没有this指向，假如箭头函数中有this出现，一定指向父级作用域
  场景一：普通函数

1. /**
2. * 场景一：普通函数中的this
3. */
4. function show(){
5.    // this这个关键字，只是一个占位符
6.    console.log(this);  // Window
7. }
8. show()

复制代码

场景二：面向对象

1. /**
2. * 场景二：Student只是类模板，真正的对象是new出来的
3. */
4. class Student{
5.    constructor(id,name){
6.        // 当new第一个实例stu1时，this指向stu1，当new第二个实例stu2时，this指向stu2
7.        this.id = id
8.        this.name = name
9.        this.message()
10.    }
11.    message(){
12. ​
13.    }
14.    play(){
15.        this.message()
16.    }
17. }
18. const stu1 = new Student
19. console.log(stu.id);
20. const stu2 = new Student

复制代码

总结：
1、类模板中的this默认只是一个占位符，假如你没有通过类来new一个对象。实际上类中的this就没有意义。
2、当你执行new操作符的时间，通过类模板创建出一个对象，类中this代表new出来的对象。
3、类中函数和属性要相互调用，都必须通过this来进行调用。
场景三：变乱函数

1. /**
2. * 场景三：通过事件调用函数
3. */
4. const obtn = document.getElementById("btn")
5. obtn.onclick = function(){
6.    // button节点
7.    console.log(this);
8. }

复制代码

变乱函数中绑定了普通函数过后，内部的this默认指向变乱源对象。
场景四：箭头函数

1. /**
2. * 场景四：箭头函数中的this
3. * 作用域：全局作用域、局部作用域(函数作用域)、eval作用域(忽略)、块级(不参与)
4. */
5. const user = {
6.    id: 1,
7.    name: "张三",
8.    play: ()=>{
9.        console.log(this);  // Window
10.    },
11.    say: function(){
12.        return ()=>{
13.            console.log(this); // user
14.        }
15.    },
16.     sing: ()=>{
17.        return function(){
18.            console.log(this); // Window
19.            // 普通函数的this指向当前调用者，
20.        }
21.    }
22. }
23. user.play()
24. user.say()()
25. user.sing()()
26. /**
27. * user.sing()()相当于
28. * const fun = user.sing()
29. * fun()
30. */

复制代码

改变this指向

  

1. call: call可以传递多个参数，第一个是当前this环境，第二个往后是参数 call(this,1,2,3)
2. apply: 可以传递两个参数，第一个是当前this环境，第二个往后是数组 apply(this,[1,2,3])
3. bind: 参数跟call一样，传递多个。但是返回一个函数。const fun = bind(this,1,2,3) fun()

复制代码

五、Stack布局

概念

Stack层叠布局，可以实现子元素在指定的布局空间内，重叠在一起渲染。
类似于以前前端布局的绝对定位，默认情况下所有元素都叠在一起渲染。
基础代码

1. @Entry
2. @Component
3. struct Page03_Stack {
4.  @State message: string = 'Hello World';
5. ​
6.  build() {
7.    Column(){
8.      Stack(){
9.        Column(){
10. ​
11.        }
12.        .width(300)
13.        .height(300)
14.        .backgroundColor(Color.Brown)
15.        Column(){
16. ​
17.        }
18.        .width(200)
19.        .height(200)
20.        .backgroundColor(Color.Blue)
21.        Column(){
22. ​
23.        }
24.        .width(100)
25.        .height(100)
26.        .backgroundColor(Color.Orange)
27.      }
28.    }
29.    .height('100%')
30.    .width('100%')
31.   }
32. }

复制代码

结果如下：

总结：
1、放在Stack容器里的元素，默认会产生重叠。
2、所有子元素在重叠的时间，默认居中排列
位置的设置

在Stack容器加载的时间，可以设置参数。
   Stack({alignContent:Alignment.TopStart})
  alignContent：就是代表默认的子元素排列位置
Alignment：官方提供位置罗列数据，左上、右上、左下、右下、居中、上下左右的位置来布局
zIndex控制层级

zIndex控制层级类似于绝对定位里面层级控制，值越大层级越高

1. Column(){}
2.     .width(200)
3.    .height(200)
4.    .backgroundColor(Color.Blue)
5.    .zIndex(999)

复制代码

zIndex是一个属性，用在子元素身上。
六、相对布局 (RelativeContainer)

概念

RelativeContainer出现为了让容器布局更加多样化，尤其是多个组件层叠，多个组件之间位置调解。在鸿蒙中RelativeContainer容器包罗了相对定位和绝对定位概念。重要用于控制页面中某一区域，以及这个区域内部的元素排列规则。
指定一个容器作为RelativeContainer，里面的元素在排列过程中，参考以下的布局规范：
   容器内子元素区分水平方向布局和垂直方向布局。
  水平方向：left、middle、right，对应容器的位置为：start、center、end
  垂直方向：top、center、bottom，对应容器的位置为：top、center、bottom
  相对定位特性1

在RelativeContainer容器中设置子元素，默认情况没有设置子元素的相对偏移，默认所有元素层叠在一起，对齐容器的左上角
代码：

1. @Entry
2. @Component
3. struct Page04_RelativeContainer {
4.  @State message: string = 'Hello World';
5. ​
6.  build() {
7.    RelativeContainer() {
8.      Column(){
9.        Text("box1")
10.      }
11.      .width(300)
12.      .height(300)
13.      .backgroundColor(Color.Brown)
14.      Column(){
15. ​
16.      }
17.      .width(200)
18.      .height(200)
19.      .backgroundColor(Color.Blue)
20.      Column(){
21. ​
22.      }
23.      .width(100)
24.      .height(100)
25.      .backgroundColor(Color.Orange)
26. ​
27.    }
28.    .height('50%')
29.    .width('100%')
30.    .border({
31.      width: 1,
32.      color: Color.Pink
33.    })
34.   }
35. }

复制代码

结果：

相对定位特性2

在RelativeContainer中子元素可以设置偏移位置。
难点：子元素可以以RelativeContainer作为偏移参考，也可以以其他子元素作为偏移参考。
所有子元素以RelativeContainer作为定位的偏移参考，代码如下：

1. @Entry
2. @Component
3. struct Page04_RelativeContainer {
4.  @State message: string = 'Hello World';
5. ​
6.  build() {
7.    Column(){
8.      RelativeContainer() {
9.        Column(){
10.          Text("box1")
11.        }
12.        .width(100)
13.        .height(100)
14.        .backgroundColor(Color.Brown)
15.          
16.        .alignRules({
17.          // left：子元素水平方向参考线，anchor：锚点（参考元素），align：锚点水平位置参考线
18.          // top：子元素垂直方向参考线，anchor：锚点（参考元素），align：锚点垂直位置参考线
19.          /** left:{anchor:"__container__",align:HorizontalAlign.Start}
20.            * 表示：子容器的最左边的边参考父容器，与父容器的最左边的边对齐
21.          */
22.          left:{anchor:"__container__",align:HorizontalAlign.Start},
23.          top:{anchor:"__container__",align:VerticalAlign.Top}
24.        })
25.        Column(){
26.          Text("box2")
27.        }
28.        .width(100)
29.        .height(100)
30.        .backgroundColor(Color.Blue)
31.        .alignRules({
32.          right: {anchor:"__container__",align:HorizontalAlign.End},
33.          top:{anchor:"__container__",align:VerticalAlign.Top}
34.        })
35.        Column(){
36.          Text("box3")
37.        }
38.        .width(100)
39.        .height(100)
40.        .backgroundColor(Color.Orange)
41.        .alignRules({
42.          middle:{anchor:"__container__",align:HorizontalAlign.Center},
43.          center:{anchor:"__container__",align:VerticalAlign.Center}
44.        })
45.        Column(){
46.          Text("box4")
47.        }
48.        .width(100)
49.        .height(100)
50.        .backgroundColor(Color.Brown)
51.        .alignRules({
52.          bottom:{anchor:"__container__",align:VerticalAlign.Bottom},
53.          left:{anchor:"__container__",align:HorizontalAlign.Start}
54.        })
55.        Column(){
56.          Text("box5")
57.        }
58.        .width(100)
59.        .height(100)
60.        .backgroundColor(Color.Yellow)
61.        .alignRules({
62.          right:{anchor:"__container__",align:HorizontalAlign.End},
63.          bottom:{anchor:"__container__",align:VerticalAlign.Bottom}
64.        })
65.      }
66.      .height(300)
67.      .width(300)
68.      .border({
69.        width: 1,
70.        color: Color.Red
71.      })
72.    }
73.    .width("100%")
74.    .height("100%")
75.    .justifyContent(FlexAlign.Center)
76.    .alignItems(HorizontalAlign.Center)
77.   }
78. }

复制代码

结果：

总结：
   1、alignRules放在子元素身上，代表子元素设置相对位置，需要提供参考元素（锚点），以及子元素的参考线，以及对齐元素的参考线
  2、水平方向参考线有三个，垂直方向参考线有三个
  3、参考元素默认 __container__ 代表父级容器，后面可换成你指定的其他容器
  可以利用offset来设置子元素定位好了之后，位置细节调解

1. .alignRules({
2.    right:{anchor:"__container__",align:HorizontalAlign.End},
3.    bottom:{anchor:"__container__",align:VerticalAlign.Bottom}
4. })
5.    .offset({
6.    x: -30,
7.    y: -100
8. })

复制代码

x：正数代表水平靠右移动，反之相反。
y：正数代表垂直向下移动，反之相反。
相对定位特性3

子元素可以相对于其他子元素进行位置控制，之前的案例都是相对于父元素来进行位置控制，其实可以以子元素为参考来进行位置设置。

1. @Entry
2. @Component
3. struct Page04_RelativeContainer {
4.  @State message: string = 'Hello World';
5. ​
6.  build() {
7.    Column(){
8.      RelativeContainer() {
9.        Column(){
10.          Text("box1")
11.        }
12.        .width(100)
13.        .height(100)
14.        .backgroundColor(Color.Brown)
15.        .id("row1")
16.        Column(){
17.          Text("box2")
18.        }
19.        .width(100)
20.        .height(100)
21.        .backgroundColor(Color.Blue)
22.        .id("row2")
23.        .alignRules({
24.          right: {anchor:"__container__",align:HorizontalAlign.End},
25.          top:{anchor:"__container__",align:VerticalAlign.Top}
26.        })
27.        Column(){
28.          Text("box3")
29.        }
30.        .width(100)
31.        .height(100)
32.        .backgroundColor(Color.Orange)
33.        .id("row3")
34.       // 以box1作为锚点
35.       /*.alignRules({
36.          left:{anchor:"row1",align:HorizontalAlign.End},
37.          top:{anchor:"row1",align:VerticalAlign.Bottom}
38.        })*/
39.        // 以box2作为锚点
40.        .alignRules({
41.          right:{anchor:"row2",align:HorizontalAlign.Start},
42.          top:{anchor:"row2",align:VerticalAlign.Bottom}
43.        })
44.        Column(){
45.          Text("box4")
46.        }
47.        .width(100)
48.        .height(100)
49.        .backgroundColor(Color.Brown)
50.        .id("row4")
51.        .alignRules({
52.          top:{anchor:"row3",align:VerticalAlign.Bottom},
53.          right:{anchor:"row3",align:HorizontalAlign.Start}
54.        })
55.        Column(){
56.          Text("box5")
57.        }
58.        .width(100)
59.        .height(100)
60.        .backgroundColor(Color.Yellow)
61.        .id("row5")
62.        .alignRules({
63.          left:{anchor:"row3",align:HorizontalAlign.End},
64.          top:{anchor:"row3",align:VerticalAlign.Bottom}
65.        })
66.      }
67.      .height(300)
68.      .width(300)
69.      .border({
70.        width: 1,
71.        color: Color.Red
72.      })
73.    }
74.    .width("100%")
75.    .height("100%")
76.    .justifyContent(FlexAlign.Center)
77.    .alignItems(HorizontalAlign.Center)
78.   }
79. }

复制代码

总结：
1、子元素之间可以相互作为移动位置的参考，anchor设置为对应子元素id编号
2、每次移动一个子元素时，参考的那个子元素要固定下来，否则参考子元素位置发生厘革，其他元素会受到影响
相对定位特性4

设置一个元素在父容器中水平垂直居中显示。
实现方案如下：
方案一：

1. .alignRules({
2.    middle:{anchor:"__container__",align:HorizontalAlign.Center},
3.    center:{anchor:"__container__",align:VerticalAlign.Center}
4. })

复制代码

总结：
1、子元素水平方向的中心线和父元素水平方向的居中位置重叠，水平方向居中。
2、子元素垂直方向的中心线和父元素垂直方向的居中位置重叠，垂直方向居中。
方案二（类似于前端中用定位实现元素水平垂直居中）：

1. .alignRules({
2.    left:{anchor:"__container__",align:HorizontalAlign.Start},
3.    right:{anchor:"__container__",align:HorizontalAlign.End}，
4.    top:{anchor:"__container__",align:VerticalAlign.Top},
5.    bottom:{anchor:"__container__",align:VerticalAlign.Bottom}
6. })

复制代码

总结：
1、设置水平方向居中显示，单独设置left、right，让容器自己去移动元素在水平方向居中
1、设置垂直方向居中显示，单独设置top、bottom，让容器自己去移动元素在垂直方向居中