【鸿蒙开发】一次开发多端部署

一次开发多端部署

拉伸能力

    Column({ space: 5 }) {
      Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // flexGrow()表示剩余空间分配给该元素的比例
      Flex() {
        Text('flexGrow(2)')
          .flexGrow(2) // 父容器分配给该Text的宽度为剩余宽度的2/3
          .height(100)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('flexGrow(1)')
          .flexGrow(1) // 父容器分配给该Text的宽度为剩余宽度的1/3
          .height(100)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
    }.width('100%').margin({ top: 5 })

Column({ space: 5 }) {
      Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // flexShrink()表示该元素的压缩比例，基于超出的总尺寸进行计算
      // 第一个text压缩比例是0,另外两个都是1,因此放不下时等比例压缩后两个,第一个不压缩
      Flex({ direction: FlexDirection.Row }) {
        Text('flexShrink(0)')
          .flexShrink(0) // 不压缩，总是占据50%的宽度
          .width('50%')
          .height(100)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('default flexShrink') // 默认值为1, 压缩，占据25%宽度
          .width('40%')
          .height(100)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
        Text('flexShrink(1)')
          .flexShrink(1) // 压缩，占据25%宽度
          .width('40%')
          .height(100)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

    }.width('100%').margin({ top: 5 })

• flexGrow 用于定义子元素在父容器中占据剩余空间的比例。当父容器有剩余空间时，子元素会根据 flexGrow 的值按比例分配这些空间。默认值为 0，表示不占据剩余空间。
• flexShrink 用于定义子元素在父容器空间不足时的收缩比例。当父容器空间不足时，子元素会根据 flexShrink 的值按比例收缩。默认值为 1，表示所有子元素按相同比例收缩。

均分能力

Column() {
  Row() {
    ForEach(this.list, (item:number) => {…})
  }.width('100%’)
   // 均匀分配父容器主轴方向的剩余空间
  .justifyContent(FlexAlign.SpaceEvenly)
  // 同上Row
  Row() {...}
}
.width(this.rate * 100 + '%')

• justifyContent 用于均匀分配父容器主轴方向的剩余空间。

占比能力

Row() {
  Column() {…}
  .layoutWeight(1)  // 设置子组件在父容器主轴方向的布局权重
  Column() {…}
  .layoutWeight(1)  // 设置子组件在父容器主轴方向的布局权重
  Column() {…}
  .layoutWeight(1)  // 设置子组件在父容器主轴方向的布局权重
}
.width(this.rate * 100 + '%')

• layoutWeight 用于设置子组件在父容器主轴方向的布局权重，本例中每个组件占据1/3。

缩放能力

Column() {
  Column() {
    Image($r("app.media.illustrator")).width('100%').height('100%')
  }
  .aspectRatio(1)                           // 固定宽高比
}
.height(this.sliderHeight)
.width(this.sliderWidth)

• aspectRatio 用于设置图片的宽高比，本例中宽高比固定为1:1，在屏幕尺寸发生变化时依然能保持1:1的宽高比。

延伸能力

Row({ space: 10 }) {
  // 通过List组件实现自动延伸能力
  List({ space: 10 }) {...}
  .listDirection(Axis.Horizontal)
  .width('100%')
}
.width(this.rate * 100 + '%')

• List组件可以自动根据屏幕大小显示一定数量的内容，从而达到自动延伸的目的。但是，并不会自动换行。

隐藏能力

Row() {
  Image($r("app.media.favorite"))
    .displayPriority(1)  // 布局优先级
  Image($r("app.media.down"))
    .displayPriority(2)  // 布局优先级
  Image($r("app.media.pause"))
    .displayPriority(3)  // 布局优先级
  Image($r("app.media.next"))
    .displayPriority(2)  // 布局优先级
  Image($r("app.media.list"))
    .displayPriority(1)  // 布局优先级
}
.width(this.rate * 100 + '%')

• displayPriority 通过设置优先级，当空间不够时，优先级低的优先隐藏。

折行能力

Column() {
  // 通过Flex组件warp参数实现自适应折行
  Flex({
    wrap: FlexWrap.Wrap,
    direction: FlexDirection.Row
  }) {
    ForEach(this.imageList, (item:Resource) => {
      Image(item).width(183).height(138)
    })
  }
  .width(this.rate * 100 + '%')
}

• Flew 通过该组件可实现自适应折行

栅格布局

断点名称	取值范围（vp）	设备描述
xs	[0, 320）	最小宽度类型设备。
sm	[320, 520)	小宽度类型设备。
md	[520, 840)	中等宽度类型设备。
lg	[840, +∞)	大宽度类型设备。

鸿蒙系统中，栅格的默认列数12列，可以根据不同断点设置不同的列数(Column)，设置不同的间隔(Gutter)，设置栅格子组件占据的栅格容器列数。

• GridRow的columns：设置不同断点的列数
• GridRow的gutter: 设置子元素在水平和垂直方向的间距
• GridCol的offset：设置栅格子组件相对于前一个子组件的偏移列数，默认为0。
• GridCol的span：设置子组件占栅格布局的列数，决定了子组件的宽度，默认为1。

事件：onBreakpointChange在断点发生变化时触发，可以针对不同的断点进行个性化定制开发，例如针对超大屏幕固定显示某个组件等。