鸿蒙自适应布局的一些方法以及使用Slider 控制宽度

均分效果：

代码:

在代码中使用了Slider 滑块来控制测试组件的宽度大小

scss 复制代码

@Entry
@Component
struct Index {
  @State rate: number = 300

  // 底部滑块
  @Builder
  sliderBuilder() {
    Slider({
      value: $$this.rate,
      min: 200,
      max: 600,
      style: SliderStyle.OutSet
    })
      .blockColor(Color.White)
      .width('60%')

      .position({ x: '20%', y: '80%' })
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      // 标记现在的宽度
      Text('宽度:' + this.rate.toFixed(0))
        .margin({top:50})
        .fontSize(42)
        .zIndex(2)
        .translate({ x: 20, y: 20 })
        .fontColor(Color.Orange)

      Column() {
        Column() {
          Row() {
            ForEach(Array.from({ length: 4 }), (item:string,index: number) => {
              Column() {
                Text(index+1+'')
                  .fontSize(22)
                  .fontColor(Color.White)
              }
              .justifyContent(FlexAlign.Center)
              .border({ width: 2, color: Color.Blue })
              .width(50)
              .height(50)
              .backgroundColor(Color.Red)
            })

          }
          .justifyContent(FlexAlign.SpaceEvenly) // 均分
          .width(this.rate) // 绑定滑块改变的尺寸
          .padding({ top: 16 })
          .backgroundColor('#FFFFFF')
          .borderRadius(16)
          //下方滑块
          this.sliderBuilder()
        }
        .width('100%')
        .height('100%')
        .backgroundColor('#F1F3F5')
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
      }
    }
  }
}

隐藏效果:

代码: 第46行 .displayPriority(index) // 布局优先级

displayPriority:当父容器空间不足的时候, 低优先级的组件会被隐藏

scss 复制代码

@Entry
@Component
struct Index {
  @State rate: number = 300

  // 底部滑块
  @Builder
  sliderBuilder() {
    Slider({
      value: $$this.rate,
      min: 200,
      max: 600,
      style: SliderStyle.OutSet
    })
      .blockColor(Color.White)
      .width('60%')

      .position({ x: '20%', y: '80%' })
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      // 标记现在的宽度
      Text('宽度:' + this.rate.toFixed(0))
        .margin({top:50})
        .fontSize(42)
        .zIndex(2)
        .translate({ x: 20, y: 20 })
        .fontColor(Color.Orange)

      Column() {
        Column() {
          Row() {
            ForEach(Array.from({ length: 6 }), (item:string,index: number) => {
              Column() {
                Text(index+1+'')
                  .fontSize(22)
                  .fontColor(Color.White)
              }
              .justifyContent(FlexAlign.Center)
              .border({ width: 2, color: Color.Blue })
              .width(60)
              .height(50)
              .backgroundColor(Color.Red)
              .displayPriority(index) // 布局优先级
            })

          }
          // .justifyContent(FlexAlign.SpaceEvenly) // 均分
          .width(this.rate) // 绑定滑块改变的尺寸
          .padding({ top: 16 })
          .backgroundColor('#FFFFFF')
          .borderRadius(16)
          //下方滑块
          this.sliderBuilder()
        }
        .width('100%')
        .height('100%')
        .backgroundColor('#F1F3F5')
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
      }
    }
  }
}

还有一些: layoutWeight占比权重 / 百分比布局 / aspectRatio缩放 / FlexWrap.Wrap 折行 / flexGrow 和 flexShrink 拉伸都可以来做自适应布局

如果想要更好的适配多个适配,还是使用响应式布局更好点

鸿蒙自适应布局的一些方法 以及使用Slider 控制宽度

鸿蒙自适应布局的一些方法以及使用Slider 控制宽度