鸿蒙学习笔记（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来设置子元素定位好以后的细节
.offset({
x:-10,y:10 //向左偏移，向下偏移10
})
2、相对子元素特性
如果想要以子元素作为参考，需要给你的子组件设置一个id作为唯一标识，anchor锚点参考改为你想参考的子组件的唯一标识id，其余用法思路根父组件是一样的。
每次移动一个子元素时，参考的那个子元素要固定下来，如果参考的子元素的位置发生了变化，其他以它作为参考对象的子元素都会受到影响。
四、@Style装饰器
一、简介
在我们页面开发的过程中，将一个页面中重复的一些样式代码提取出来实现公用，并且只负责当前页面的样式复用，有组件内定义和组件外定义两种，组件外定义记得加fuction。
二、注意事项
1、不是所有的样式都有可以提取到@Style装饰器装饰器中，只可以抽取公共样式事件。
2、@Style不支持传参。
3、可以在组件下继续添加一样的样式来覆盖掉@Style装饰器复用的样式。
五、@Extend装饰器
一、简介
定义扩展组建的样式，主要用于鸿蒙中原生组件的样式和事件进行扩展，换句话说，就是可以用这个装饰器对原生组件进行重定义，在页面实现复用，类似于@Style装饰器效果。
二、注意事项
1、必须指定对哪个原生组件进行拓展。
2、和@Styles不同，@Extend仅支持在全局定义，不支持在组件内部定义。
3、和@Styles不同，@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。
4、@Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染。