布局单位

• 物理像素 px：屏幕的实际像素
• 逻辑像素 vp：处理物理像素和尺寸关系转化的中间层，可以不加单位 假设两块相同大小的屏幕，但是 PPI 不同，像素密度不同，如果写死分辨率会导致 PPI 更低的屏幕上字体相对较小，而 PP 更高的屏幕上字体相对较大。采用 vp 可以保证在不同 PPI 的屏幕上字体大小一致，其他元素同理。
• 字体大小 fp：随系统字体设置大小变化
• lpx：1 lpx = $\frac{screenLength}{screenWidth}$ 可以调用相应接口实现转换（vp2px() + "px" 等）。例如将后端返回的 px 转换为 vp 显示布局。

对齐

以 Row() 为例，alignItems 设置的是侧轴上的对齐方式，justifyItems 设置的是主轴上的对齐方式。 Row() ，默认居中显示。例如：

@Entry  
@Component  
struct Page02_TaskList {  
  @State message: string = 'Hello World';  
  
  build() {  
    Column(){  
      Text(this.message)  
        .width("100%")  
        .height("10%")  
        .fontColor(Color.White)  
    }.backgroundColor(Color.Black)  
  }  
}

Column 垂直主轴，Row 水平主轴。

stack 层叠布局

zIndex 属性

值越大，越靠前，层级相同由代码顺序决定上下 默认为横向和纵向居中。

RelativeContainer 相对布局

官方文档 减少代码层级，减少性能开销。包含 web 的相对定位和绝对定位概念。 容器内子元素区分水平方向和垂直方向布局。

• 锚点：通过锚点设置当前元素基于哪个元素确定位置。
• 对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。

对齐规则 alignRules

指定设置在相对容器中子组件的对齐规则。 不许同时使用两个相对的组件自身锚点，因为不能既在左边对齐，又同时在右边对齐。 例如：

.alignRules({  
  left: { anchor: "__container__", align: HorizontalAlign.Start },  
  center: { anchor: "__container__", align: VerticalAlign.Top }  
}).zIndex(999)

就是组件自身的左中位置位于相对布局容器的左上。 这里的映射关系就是组件自身的 left 线和锚点组件的 HorizontalAlign.Start 线重合。 同时可以使用 offset 设置相当于定位点的偏移量

Image($r('app.media.addbar')).width(40).alignRules({  
  right: {anchor: "__container__", align: HorizontalAlign.End},  
  bottom: {anchor: "__container__", align: VerticalAlign.Bottom}  
}).offset({  
  x:-40,  
  y:-30

x： 正数靠右移动 y： 正数向下移动 水平方向居中： 让组件在容器中又贴近左侧又贴近右侧：

.alignRules({  
  left: { anchor: "__container__", align: HorizontalAlign.Start},  
  right: { anchor: "__container__", align: HorizontalAlign.End }

垂直方向居中同理。

@Styles 装饰器：定义组件重用样式

1. 属性和事件限制 ：@Styles仅能支持通用属性和事件，不支持组件特有的属性 。

2. 多态样式限制 ：虽然@Styles支持在多态样式下使用，但它不支持传参，无法对外开放一些属性 。

3. 跨文件导出限制 ：@Styles 不支持跨文件的导出复用，必须放在同一文件中。

4. 组件内定义

@Styles alignLeft() {  
  .borderRadius(10)  
}
Text().alignLeft()

2. 组件外定义

@Styles function alignLeft() {  
  .borderRadius(10)  
}

@Extend 装饰器：定义扩展组件样式

1. 扩展组件样式 ：@Extend支持开发者封装指定组件的私有属性和私有事件 。这意味着你可以为某个组件添加额外的样式或行为，而不需要修改原始组件的代码。
2. 支持参数传递 ：与@Styles不同，@Extend装饰的方法支持参数  。这使得开发者可以根据不同的需求动态地调整组件的属性。例如，你可以定义一个@Extend方法，根据传递的参数动态改变文本的颜色和字体大小。
3. 动态属性设置 ：虽然@Extend本身不支持跨文件导出复用，但它允许在当前文件内灵活地定义和使用样式 。这使得@Extend非常适合用于设置一些局部且变化的属性。

必须写在全局（带 function），可以传参

@Extend(Text) function textStyles(size: string = "24fp"){  
  .fontSize(size)  
}