鸿蒙学习笔记（3）-像素单位、this指向问题、RelativeContainer布局、@Style装饰器和@Extend装饰器

一、像素单位

物理像素：用px表示。

逻辑像素：在布局的时候，底层针对物理像素和屏幕尺寸关系进行转化的中间层。

分辨率：代表在屏幕上到底布局了多少了像素点（发光点)

官方同时也提供了相关单位，在开发中使用官方提供的来实现。

名称	描述
px	屏幕物理像素单位。
vp	屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。说明： vp与px的比例与屏幕像素密度有关。
fp	字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。
lpx	视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。

二、this指向问题

（1）使用场景

面向对象开发的时候，会出现this的使用；在进行事件绑定的时候，也会涉及this调用指向；在箭头函数中我们也会用到this,准确判断他的指向。

（2）注意事项

1、this永远指向一个对象，即new出来的一个实例。

2、普通函数中的this，谁调用这个函数，默认this就指向谁。

3、箭头函数默认没有this指向，如果箭头函数中有this出现，一定指向父级作用域。

（3）总结

1、类模板中this默认占位符，如果你没有通过类来new一个对象，实际上类中的this就没有意义。

2、当你执行new操作符的时候，通过类模板创建出一个对象，类中的this代表new出来对象。

3、类中的函数和属性要相互调用，都必须通过this来进行调用。

4、事件函数中绑定了普通函数过后，内部的this默认指向事件源对象。

5、箭头函数谁使用了this，就指向谁，也就是父级作用域。

（4）改变this指向

call：可以传递多个参数，第一个表示当前this环境，第二个往后就是参数。call(this,1,2,3)

apply：可以传递两个参数，第一个当前this环境，第二个是参数数组。apply(this,[1,2,3])

bind：参数跟call一样，传递多个，但是返回一个函数。接收一个函数const fun=bind(this,1,2,3) 再调用一下 fun（）

三、RelativeContainer布局

（1）概念

使得容器布局更加多样化，尤其涉及多个组件层叠，设计各个子组件之间的位置调整。

容器内子组件区分水平方向，垂直方向：
- 水平方向为left， middle， right，对应容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。
- 垂直方向为top， center， bottom，对应容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。

注意理解：子组件相对于父容器位置变化时定位线的位置变化

（2）相对容器布局

1、相对父容器特性

1.1 在RelativeContainer容器中设置子元素，默认情况没有设置子元素的相对偏移，默认所有元素是层叠在一起的，对齐方式是容器左上角。

1.2 在RelativeContainer容器中，子元素可以设置偏移位置，难点：子元素可以以RelativeContainer父元素容器作为参考，当然也可以以其他子元素作为偏移参考。

anchor：参考锚点设置

.alignRules({

//可以给子组件设置一个属性，代表子元素设置相对位置，组要提供参考元素和子元素指定水平方向哪一边作为参考线，以及父级元素的参考线

.alignRules({

top: { anchor: "__container__", align: VerticalAlign.Top },//子组件顶部以container父容器作为参考，以父容器垂直方向顶部对齐

right: { anchor: "__container__", align: HorizontalAlign.End }//子组件右边以container父容器作为参考，以父容器水平方向右边对齐

})

ps：跟学过的相对定位有点类似，position：绝对定位，确定子组件相对父组件的位置（相对父组件）。

可以使用offset来设置子元素定位好以后的细节