鸿蒙自适应布局的一些方法 以及使用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 拉伸 都可以来做自适应布局

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

相关推荐
九流下半1 小时前
window wsl 环境下编译openharmony,HarmonyOS 三方库 FFmpeg
windows·ffmpeg·harmonyos·编译·openharmony·三方库
shayu8nian3 小时前
Hap包引用的Hsp报签名错误怎么解决
华为·harmonyos
shayu8nian8 小时前
鸿蒙的NDK开发初级入门篇
华为·harmonyos
万少19 小时前
03-自然壁纸实战教程-项目结构介绍
harmonyos
前端世界1 天前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
android·安全·harmonyos
长弓三石1 天前
鸿蒙网络编程系列57-仓颉版固定包头可变包体解决TCP粘包问题
网络·tcp/ip·harmonyos
zhanshuo1 天前
HarmonyOS 隐私安全机制实战:动态权限、沙箱隔离与分布式授权
harmonyos
zhanshuo1 天前
鸿蒙系统防黑秘籍:如何彻底防止恶意应用窃取用户数据?
harmonyos
财经三剑客1 天前
鸿蒙智行6月交付新车52747辆 单日交付量3651辆
华为·harmonyos