git收录

自适应布局

1. 拉伸能力

拉伸能力通过flexGrow和flexShrink属性实现，flexGrow拉伸，flexShrink收缩，通过给定份数，实现收或缩所占相对父容器的大小

Row(){
    Row()
      .width(200)
      .height(200)
      .backgroundColor(Color.Red)
      .border({ width: 4, color: Color.Grey })
      .flexGrow(2)
      .flexShrink(1)

    Row()
      .width(200)
      .height(200)
      .backgroundColor(Color.Pink)
      .border({ width: 4, color: Color.Grey })
      .flexShrink(2)
      .flexGrow(1)
  }

2. 均分能力

均分能力通过容器组件的justifyContent属性实现，其属性参数的FlexAlign枚举，实现三种不同的均分能力

SpaceBetween：父组件的首尾子组件与父组件首尾对齐，其他子组件平均分配剩余空间
SpaceAround：每个子组件左右各有间隙，导致相邻间隙是头部或尾部间隙的2倍
SpaceEvenly：子组件在父组件中均匀分布，子组件间隔相等

@Builder
aroundBox() {
  Column({ space: 10 }) {
    Text('around')
      .fontSize(26)
    Row() {
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Brown)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Green)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Orange)
    }
    .width("100%")
    .justifyContent(FlexAlign.SpaceAround)
  }
}

@Builder
bewteenBox() {
  Column({ space: 10 }) {
    Text('bewteen')
      .fontSize(26)
    Row() {
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Brown)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Green)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Orange)
    }
    .width("100%")
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

@Builder
evenlyBox() {
  Column({ space: 10 }) {
    Text('evenly')
      .fontSize(26)
    Row() {
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Brown)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Green)
      Row()
        .width(100)
        .height(100)
        .backgroundColor(Color.Orange)
    }
    .width("100%")
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

3.占比能力

占比能力通过子组件宽度百分比或者父组件（容器组件）的layout属性实现

@Builder
percentageBuilder() {
  Text('百分比')
    .fontSize(22)
  Row() {
    Row()
      .width('33.33%')
      .height(100)
      .backgroundColor(Color.Red)
      .border({ width: 4, color: Color.Grey })

    Row()
      .width('33.33%')
      .height(100)
      .backgroundColor(Color.Pink)
      .border({ width: 4, color: Color.Grey })
    Row()
      .width('33.33%')
      .height(100)
      .backgroundColor(Color.Green)
      .border({ width: 4, color: Color.Grey })
  }
  .width(this.containVal)

  this.sliderBuilder()
}

@Builder
layoutWeightBuilder() {
  Text('layoutWeight')
    .fontSize(22)
  Row() {
    Row()
      .layoutWeight(1)
      .height(100)
      .backgroundColor(Color.Red)
      .border({ width: 4, color: Color.Grey })

    Row()
      .layoutWeight(1)
      .height(100)
      .backgroundColor(Color.Pink)
      .border({ width: 4, color: Color.Grey })
    Row()
      .layoutWeight(1)
      .height(100)
      .backgroundColor(Color.Green)
      .border({ width: 4, color: Color.Grey })
  }
  .width(this.containVal)

  this.sliderBuilder()
}

4. 缩放能力

缩放能力通过aspectRatio属性通过设置宽高比，保持图片的完整显示

 Image($r('app.media.ic_video_grid_1'))
    .width('100%')
    .height('100%')
}
// .aspectRatio(1 / 1)
// .aspectRatio(1 / 2)
.aspectRatio(1072 / 616)
.border({ width: 2, color: "#66F1CCB8" })

5. 延伸能力

延伸能力通过List组件和scroll组件实现，超出的内容隐藏，滚动显示，根据容器尺寸的内容显示多个内容

List({ space: 10 }) {
  ForEach(this.appList, (item: NavItem) => {
    ListItem() {
      Column() {
        Image(item.icon)
          .width(48)
          .height(48)
          .margin({ top: 8 })
        Text(item.title)
          .width(64)
          .height(30)
          .lineHeight(15)
          .fontSize(12)
          .textAlign(TextAlign.Center)
          .margin({ top: 8 })
          .padding({ bottom: 15 })
      }
      .width(80)
      .height(102)
    }
    .width(80)
    .height(102)
  })
}
.listDirection(Axis.Horizontal)
.padding({ top: 16, left: 10 })
.width('100%')
.height(118)
.borderRadius(16)
.backgroundColor(Color.White)

Scroll() {
  Row({ space: 10 }) {
    ForEach(this.appList, (item: NavItem, index: number) => {
      Column() {
        Image(item.icon)
          .width(48)
          .height(48)
          .margin({ top: 8 })
        Text(item.title)
          .width(64)
          .height(30)
          .lineHeight(15)
          .fontSize(12)
          .textAlign(TextAlign.Center)
          .margin({ top: 8 })
          .padding({ bottom: 15 })
      }
      .width(80)
      .height(102)
    })
  }
}
.scrollable(ScrollDirection.Horizontal)
.edgeEffect(EdgeEffect.Fade)
.padding({ top: 16, left: 10 })
.height(118)
.borderRadius(16)
.backgroundColor(Color.White)

6. 隐藏能力

隐藏能力通过组件的displayPriority属性实现，属性设置权重，当父组件大小不足时，权重高的组件优先显示，权重相同的，会一起显示

Image($r("app.media.ic_public_favor"))
  .width(48)
  .height(48)
  .displayPriority(1)

Image($r("app.media.ic_public_play_last"))
  .width(48)
  .height(48)
  .displayPriority(2)

Image($r("app.media.ic_public_pause"))
  .width(48)
  .height(48)
  .displayPriority(3)

7. 折行能力

折行能力通过Flex组件的wrap属性实现，实现一行无法展示，转换成多行展示

Flex({
  direction: FlexDirection.Row,
  alignItems: ItemAlign.Center,
  justifyContent: FlexAlign.Center,
  wrap: FlexWrap.Wrap
}) {
  ForEach(this.imageList, (item: NavItem) => {
    Column() {
      Image(item.icon)
        .width(80)
        .height(80)
      Text(item.title)
    }
    .margin(10)

  })
}
.backgroundColor('#FFFFFF')
.padding(20)
.width(this.rate * 100 + '%')
.borderRadius(16)

鸿蒙-自适应布局