arkui-x 前端布局编码模板

build() {Column() {Row() {// 上侧页面布局实现}// 下侧页面布局实现}.width(Const.THOUSANDTH_1000).height(Const.THOUSANDTH_1000).justifyContent(FlexAlign.SpaceBetween).backgroundImage($r('app.media.background_xxx')).backgroundImageSize(ImageSize.Cover).backgroundImagePosition(Alignment.Center).linearGradient({direction: GradientDirection.Bottom,colors: [['rgba(57, 59, 170, 0.6)', 0], ['rgba(17, 38, 137, 0.6)', 0.5], ['rgb(18, 32, 92)', 1]]}).padding({    // 数值供参考top: this.getActualHeight(100),bottom: this.getActualHeight(150),left: this.getActualWidth(150),right: this.getActualWidth(150),})}

在鸿蒙开发前端页面中，上面写法作为页面布局编码模板，可以较好的解决以下问题：

1、避免设置position等绝对布局组件，通过嵌套的Column和Row组件，以及更多的嵌套叠加，结合padding的效果，统一设置容器四个方向的内边距，可灵活调整组件位置，实现相对布局；

2、线性渐变色linearGradient，可在背景图片基础上叠加。如果背景图片相对于线性渐变色是深色，也可能覆盖渐变色的效果；

3、支持多分辨率，this.getActualHeigh、this.getActualWidth可自动获取不同分辨率下对应的屏幕尺寸，实现自适应布局

参考实现如下：

  public getActualHeight(height: number): PX {return `${Math.floor((this.screenHeight / DisPlayInfo.STANDARD_HEIGHT) * height)}px`}