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`
  }