搜索历史

清空
搜索热词
      0
      • 聊天消息
      • 系统消息
      • 评论与回复
      查看更多
      查看更多
      查看更多
      VIP于 到期 续费
      登录后你可以
      • 下载海量资料
      • 学习在线课程
      • 观看技术视频
      • 写文章/发帖/加入社区
      会员中心
      创作中心
      发布
      创作活动

      完善资料让更多小伙伴认识你，还能领取20积分哦，立即完善>

      3天内不再提示

      鸿蒙OS开发：【一次开发，多端部署】（自适应布局）

      jf_46214456 • 来源：jf_46214456 • 作者：jf_46214456 • 2024-05-25 16:36 • 次阅读

      自适应布局

      针对常见的开发场景，方舟开发框架提炼了七种自适应布局能力，这些布局可以独立使用，也可多种布局叠加使用。

      自适应布局类别自适应布局能力使用场景实现方式
      自适应拉伸[拉伸能力]容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内 指定区域 。[Flex布局]的flexGrow和flexShrink属性
      [均分能力]容器组件尺寸发生变化时，增加或减小的空间均匀分配给容器组件内 所有空白区域 。[Row组件]、[Column组件]或[Flex组件]的justifyContent属性设置为FlexAlign.SpaceEvenly
      自适应缩放[占比能力]子组件的宽或高 按照预设的比例 ，随容器组件发生变化。基于通用属性的两种实现方式： - 将子组件的宽高设置为父组件宽高的百分比 - layoutWeight属性
      [缩放能力]子组件的宽高 按照预设的比例 ，随容器组件发生变化，且变化过程中子组件的 宽高比不变 。[布局约束]的aspectRatio属性
      自适应延伸[延伸能力]容器组件内的子组件，按照其 在列表中的先后顺序 ，随容器组件尺寸变化显示或隐藏。基于容器组件的两种实现方式： - 通过[List组件]实现 - 通过[Scroll组件]配合[Row组件]或[Column组件]实现
      [隐藏能力]容器组件内的子组件，按照其 预设的显示优先级 ，随容器组件尺寸变化显示或隐藏。 相同显示优先级的子组件同时显示或隐藏 。[布局约束]的displayPriority属性
      自适应折行[折行能力]容器组件尺寸发生变化时，如果布局方向尺寸不足以显示完整内容， 自动换行 。[Flex组件]的wrap属性设置为FlexWrap.Wrap

      下面我们依次介绍这几种自适应布局能力。

      开发前请熟悉鸿蒙开发指导文档 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]点击或者复制转到。

      拉伸能力

      拉伸能力是指容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。

      拉伸能力通常通过[Flex布局]中的flexGrow和flexShrink属性实现，flexGrow和flexShink属性常与flexBasis属性搭配使用，故将这三个属性放在一起介绍。

      属性类型默认值描述
      flexGrownumber0仅当父容器宽度大于所有子组件宽度的总和时，该属性生效。配置了此属性的子组件，按照比例拉伸，分配父容器的多余空间。
      flexShrinknumber1仅当父容器宽度小于所有子组件宽度的总和时，该属性生效。配置了此属性的子组件，按照比例收缩，分配父容器的不足空间。
      flexBasis'auto'[Length]'auto'

      说明：

      • 开发者期望将父容器的剩余空间全部分配给某空白区域时，也可以通过[Blank组件]实现。注意仅当父组件为RowColumnFlex组件时，Blank组件才会生效。
      • 类Web开发范式也是通过flex-grow和flex-shrink实现拉伸能力，同时也支持配置flex-basis，详见[通用样式]。
      • 类Web开发范式没有提供blank组件，但可以通过div组件模拟blank组件的行为，如“
        ”。

      示例1

      本示例中的页面由中间的内容区（包含一张图片）以及两侧的留白区组成，各区域的属性配置如下。

      • 中间内容区的宽度设置为400vp，同时将flexGrow属性设置为1，flexShrink属性设置为0。
      • 两侧留白区的宽度设置为150vp，同时将flexGrow属性设置为0，flexShrink属性设置为1。

      由上可知，父容器的基准尺寸是700vp（150vp+400vp+150vp）。

      可以通过拖动底部的滑动条改变父容器的尺寸，查看布局变化。

      • 当父容器的尺寸大于700vp时，父容器中多余的空间全部分配给中间内容区。
      • 当父容器的尺寸小于700vp时，左右两侧的留白区按照“1:1”的比例收缩（即平均分配父容器的不足空间）。

      zh-cn_image_0000001335796258

      @Entry
@Component
struct FlexibleCapabilitySample1 {
  @State containerWidth: number = 402

  // 底部滑块，可以通过拖拽滑块改变容器尺寸。
  @Builder slider() {
    Slider({ value: this.containerWidth, min: 402, max: 1000, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .onChange((value: number) = > {
        this.containerWidth = value;
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Column() {
        Row() {
          // 通过flexGrow和flexShrink属性，将多余的空间全部分配给图片，将不足的控件全部分配给两侧空白区域。
          Row().width(150).height(400).backgroundColor('#FFFFFF')
            .flexGrow(0).flexShrink(1)
          Image($r("app.media.illustrator")).width(400).height(400)
            .objectFit(ImageFit.Contain)
            .backgroundColor("#66F1CCB8")
            .flexGrow(1).flexShrink(0)
          Row().width(150).height(400).backgroundColor('#FFFFFF')
            .flexGrow(0).flexShrink(1)
        }
        .width(this.containerWidth)
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Center)
      }

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

      示例2

      文字和开关的尺寸固定，仅有中间空白区域（Blank组件）随父容器尺寸变化而伸缩。

      zh-cn_image_0000001335316714

      @Entry
@Component
struct FlexibleCapabilitySample2 {
  @State rate: number = 0.8

  // 底部滑块，可以通过拖拽滑块改变容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 30, max: 80, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .onChange((value: number) = > {
        this.rate = value / 100;
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Column() {
        Row() {
          Text('飞行模式')
            .fontSize(16)
            .width(135)
            .height(22)
            .fontWeight(FontWeight.Medium)
            .lineHeight(22)
          Blank()      // 通过Blank组件实现拉伸能力
          Toggle({ type: ToggleType.Switch })
            .width(36)
            .height(20)
        }
        .height(55)
        .borderRadius(12)
        .padding({ left: 13, right: 13 })
        .backgroundColor('#FFFFFF')
        .width(this.rate * 100 + '%')
      }

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

      均分能力

      均分能力是指容器组件尺寸发生变化时，增加或减小的空间均匀分配给容器组件内所有空白区域。它常用于内容数量固定、均分显示的场景，比如工具栏、底部菜单栏等。

      均分能力可以通过将[Row组件]、[Column组件]或[Flex组件]的justifyContent属性设置为FlexAlign.SpaceEvenly实现，即子元素在父容器主轴方向等间距布局，相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

      说明：

      • 均分能力还可以通过其它方式实现，如使用[Grid网格组件]或在每个组件间添加Blank组件等。
      • 类Web开发范式中，通过将[div组件]的justify-content属性设置为space-evenly来实现均分布局。

      示例：

      父容器尺寸变化过程中，图标及文字的尺寸不变，图标间的间距及图标离左右边缘的距离同时均等改变。

      zh-cn_image_0000001335477142

      @Entry
@Component
struct EquipartitionCapabilitySample {
  readonly list: number [] = [0, 1, 2, 3]
  @State rate: number = 0.6

  // 底部滑块，可以通过拖拽滑块改变容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 30, max: 60, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .onChange((value: number) = > {
        this.rate = value / 100
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Column() {
        // 均匀分配父容器主轴方向的剩余空间
        Row() {
          ForEach(this.list, (item:number) = > {
            Column() {
              Image($r("app.media.startIcon")).width(48).height(48).margin({ top: 8 })
              Text('App name')
                .width(64)
                .height(30)
                .lineHeight(15)
                .fontSize(12)
                .textAlign(TextAlign.Center)
                .margin({ top: 8 })
                .padding({ bottom: 15 })
            }
            .width(80)
            .height(102)
            .flexShrink(1)
          })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)
        // 均匀分配父容器主轴方向的剩余空间
        Row() {
          ForEach(this.list, (item:number) = > {
            Column() {
              Image($r("app.media.startIcon")).width(48).height(48).margin({ top: 8 })
              Text('App name')
                .width(64)
                .height(30)
                .lineHeight(15)
                .fontSize(12)
                .textAlign(TextAlign.Center)
                .margin({ top: 8 })
                .padding({ bottom: 15 })
            }
            .width(80)
            .height(102)
            .flexShrink(1)
          })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)
      }
      .width(this.rate * 100 + '%')
      .height(222)
      .padding({ top: 16 })
      .backgroundColor('#FFFFFF')
      .borderRadius(16)

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

      占比能力

      占比能力是指子组件的宽高按照预设的比例，随父容器组件发生变化。

      占比能力通常有两种实现方式：

      • 将子组件的宽高设置为父组件宽高的百分比，详见[尺寸设置]及[长度类型]。
      • 通过layoutWeight属性配置互为兄弟关系的组件在父容器主轴方向的布局权重，详见[尺寸设置]。
        • 当父容器尺寸确定时，其子组件按照开发者配置的权重比例分配父容器中主轴方向的空间。
        • 仅当父容器是Row、Column或者Flex时，layoutWeight属性才会生效。
        • 设置layoutWeight属性后，组件本身的尺寸会失效。比如同时设置了.width('40%')和.layoutWeight(1)，那么只有.layoutWeight(1)会生效。

      layoutWeight存在使用限制，所以实际使用过程中大多通过将子组件宽高设置为父组件的百分比来实现占比能力。

      说明：

      • 占比能力在实际开发中使用的非常广泛，可以通过很多不同的方式实现占比能力，如还可以通过[Grid组件]的columnsTemplate属性设置网格容器中列的数量及其宽度比例，或通过配置子组件在栅格（本章后文将详细介绍栅格系统）中占据不同的列数来实现占比能力。本小节仅介绍最基础和常用的实现方式，局限性较大或比非常小众的实现方式，本文不做展开介绍。
      • 类Web开发范式同样支持以百分比的形式设置组件的宽高，详见[通用样式]中关于width和height的介绍以及[长度类型介绍]。
      • 与声明式开发范式中的layoutWeight属性类似，类Web开发范式提供了[flex-weight样式]用于配置互为兄弟关系的组件在父容器主轴方向的布局权重。

      示例：

      简单的播放控制栏，其中“上一首”、“播放/暂停”、“下一首”的layoutWeight属性都设置为1，因此它们按照“1:1:1”的比例均分父容器主轴方向的空间。

      将三个按钮的.layoutWeight(1)分别替换为.width('33%')、.width('34%')、.width('33%')，也可以实现与当前同样的显示效果。

      zh-cn_image_0000001385757965

      @Entry
@Component
struct ProportionCapabilitySample {
  @State rate: number = 0.5

  // 底部滑块，可以通过拖拽滑块改变容器尺寸
  @Builder slider() {
    Slider({ value: 100, min: 25, max: 50, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.rate = value / 100
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Column() {
        Row() {
          Column() {
            Image($r("app.media.down"))
              .width(48)
              .height(48)
          }
          .height(96)
          .layoutWeight(1)  // 设置子组件在父容器主轴方向的布局权重
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)

          Column() {
            Image($r("app.media.pause"))
              .width(48)
              .height(48)
          }
          .height(96)
          .layoutWeight(1)  // 设置子组件在父容器主轴方向的布局权重
          .backgroundColor('#66F1CCB8')
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)

          Column() {
            Image($r("app.media.next"))
              .width(48)
              .height(48)
          }
          .height(96)
          .layoutWeight(1)  // 设置子组件在父容器主轴方向的布局权重
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)
        }
        .width(this.rate * 100 + '%')
        .height(96)
        .borderRadius(16)
        .backgroundColor('#FFFFFF')
      }

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

      缩放能力

      缩放能力是指子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。

      缩放能力通过使用百分比布局配合 固定宽高比 （aspectRatio属性）实现当容器尺寸发生变化时，内容自适应调整。

      可以访问[布局约束]，了解aspectRatio属性的详细信息。

      说明： 类Web开发范式同样提供了[aspect-ratio样式]，用于固定组件的宽高比。

      示例：

      为方便查看效果，示例中特意给Column组件加了边框。可以看到Column组件随着其Flex父组件尺寸变化而缩放的过程中，始终保持预设的宽高比，其中的图片也始终正常显示。

      zh-cn_image_0000001335640862

      @Entry
@Component
struct ScaleCapabilitySample {
  @State sliderWidth: number = 400
  @State sliderHeight: number = 400

  // 底部滑块，可以通过拖拽滑块改变容器尺寸
  @Builder slider() {
    
    Slider({ value: this.sliderHeight, min: 100, max: 400, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.sliderHeight = value
      })
      .position({ x: '20%', y: '80%' })
      Slider({ value: this.sliderWidth, min: 100, max: 400, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.sliderWidth = value;
      })
      .position({ x: '20%', y: '87%' })
  }

  build() {
    Column() {
      Column() {
        Column() {
          Image($r("app.media.illustrator")).width('100%').height('100%')
        }
        .aspectRatio(1)                           // 固定宽高比
        .border({ width: 2, color: "#66F1CCB8"})  // 边框，仅用于展示效果
      }
      .backgroundColor("#FFFFFF")
      .height(this.sliderHeight)
      .width(this.sliderWidth)
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor("#F1F3F5")
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

      延伸能力

      延伸能力是指容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变化显示或隐藏。它可以根据显示区域的尺寸，显示不同数量的元素。

      延伸能力通常有两种实现方式：

      • 通过[List组件]实现。
      • 通过[Scroll组件]配合[Row组件]或[Column组件]实现。

      说明：

      • List、Row或Column组件中子节点的在页面显示时就已经全部完成了布局计算及渲染，只不过受限于父容器尺寸，用户只能看到一部分。随着父容器尺寸增大，用户可以看到的子节点数目也相应的增加。用户还可以通过手指滑动触发列表滑动，查看被隐藏的子节点。
      • 类Web开发范式同样可以使用[list组件]实现延伸能力。
      • 类Web开发范式没有提供scroll组件，但可以将[div组件]的overflow样式设置为scroll（即div组件主轴方向上子元素的尺寸超过div组件本身的尺寸时进行滚动显示）来模拟scroll组件的行为。

      示例：

      当父容器的尺寸发生改变时，页面中显示的图标数量随之发生改变。

      分别通过List组件实现及通过Scroll组件配合Row组件实现。

      zh-cn_image_0000001335641246

      （1）通过List组件实现。

      @Entry
@Component
struct ExtensionCapabilitySample1 {
  @State rate: number = 0.60
  readonly appList: number [] = [0, 1, 2, 3, 4, 5, 6, 7]

  // 底部滑块，可以通过拖拽滑块改变容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 8, max: 60, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.rate = value / 100
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Row({ space: 10 }) {
        // 通过List组件实现隐藏能力
        List({ space: 10 }) {
          ForEach(this.appList, (item:number) = > {
            ListItem() {
              Column() {
                Image($r("app.media.startIcon")).width(48).height(48).margin({ top: 8 })
                Text('App name')
                  .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)
          })
        }
        .padding({ top: 16, left: 10 })
        .listDirection(Axis.Horizontal)
        .width('100%')
        .height(118)
        .borderRadius(16)
        .backgroundColor(Color.White)
      }
      .width(this.rate * 100 + '%')

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

      （2）通过Scroll组件配合Row组件实现。

      @Entry
@Component
struct ExtensionCapabilitySample2 {
  private scroller: Scroller = new Scroller()
  @State rate: number = 0.60
  @State appList: number [] = [0, 1, 2, 3, 4, 5, 6, 7]

  // 底部滑块，可以通过拖拽滑块改变容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 8, max: 60, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.rate = value / 100;
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      // 通过Scroll和Row组件实现隐藏能力
      Scroll(this.scroller) {
        Row({ space: 10 }) {
          ForEach(this.appList, () = > {
            Column() {
              Image($r("app.media.startIcon")).width(48).height(48).margin({ top: 8 })
              Text('App name')
                .width(64)
                .height(30)
                .lineHeight(15)
                .fontSize(12)
                .textAlign(TextAlign.Center)
                .margin({ top: 8 })
                .padding({ bottom: 15 })


            }.width(80).height(102)
          })
        }
        .padding({ top: 16, left: 10 })
        .height(118)
        .backgroundColor(Color.White)
      }
      .scrollable(ScrollDirection.Horizontal)
      .borderRadius(16)
      .width(this.rate * 100 + '%')

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

      隐藏能力

      隐藏能力是指容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏，其中相同显示优先级的子组件同时显示或隐藏。它是一种比较高级的布局方式，常用于分辨率变化较大，且不同分辨率下显示内容有所差异的场景。主要思想是通过增加或减少显示内容，来保持最佳的显示效果。

      隐藏能力通过设置 布局优先级 （displayPriority属性）来控制显隐，当布局主轴方向剩余尺寸不足以满足全部元素时，按照布局优先级大小，从小到大依次隐藏，直到容器能够完整显示剩余元素。具有相同布局优先级的元素将同时显示或者隐藏。

      可以访问[布局约束]，了解displayPriority属性的详细信息。

      说明： 类Web开发范式同样支持[display-index样式]，用于设置布局优先级。

      示例：

      父容器尺寸发生变化时，其子元素按照预设的优先级显示或隐藏。

      zh-cn_image_0000001335485154

      @Entry
@Component
struct HiddenCapabilitySample {
  @State rate: number = 0.45

  // 底部滑块，可以通过拖拽滑块改变容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 10, max: 45, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .height(50)
      .onChange((value: number) = > {
        this.rate = value / 100
      })
      .position({ x: '20%', y: '80%' })
  }

  build() {
    Column() {
      Row() {
        Image($r("app.media.favorite"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .margin({ left: 12, right: 12 })
          .displayPriority(1)  // 布局优先级

        Image($r("app.media.down"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .margin({ left: 12, right: 12 })
          .displayPriority(2)  // 布局优先级

        Image($r("app.media.pause"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .margin({ left: 12, right: 12 })
          .displayPriority(3)  // 布局优先级

        Image($r("app.media.next"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .margin({ left: 12, right: 12 })
          .displayPriority(2)  // 布局优先级

        Image($r("app.media.list"))
          .width(48)
          .height(48)
          .objectFit(ImageFit.Contain)
          .margin({ left: 12, right: 12 })
          .displayPriority(1)  // 布局优先级
      }
      .width(this.rate * 100 + '%')
      .height(96)
      .borderRadius(16)
      .backgroundColor('#FFFFFF')
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)

      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

      折行能力

      折行能力是指容器组件尺寸发生变化，当布局方向尺寸不足以显示完整内容时自动换行。它常用于横竖屏适配或默认设备向平板切换的场景。

      折行能力通过使用 Flex折行布局 （将wrap属性设置为FlexWrap.Wrap）实现，当横向布局尺寸不足以完整显示内容元素时，通过折行的方式，将元素显示在下方。

      可以访问[Flex组件]，了解Flex组件的详细用法。

      说明： 类Web开发范式通过将[div组件]的flex-warp样式设置为wrap来使用折行能力。
      HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿

      搜狗高速浏览器截图20240326151344.png
      示例：

      父容器中的图片尺寸固定，当父容器尺寸发生变化，其中的内容做自适应换行。

      zh-cn_image_0000001385645821

      @Entry
@Component
struct WrapCapabilitySample {
  @State rate: number = 0.7
  readonly imageList: Resource [] = [
    $r('app.media.flexWrap1'),
    $r('app.media.flexWrap2'),
    $r('app.media.flexWrap3'),
    $r('app.media.flexWrap4'),
    $r('app.media.flexWrap5'),
    $r('app.media.flexWrap6')
  ]

  // 底部滑块，可以通过拖拽滑块改变容器尺寸
  @Builder slider() {
    Slider({ value: this.rate * 100, min: 50, max: 70, style: SliderStyle.OutSet })
      .blockColor(Color.White)
      .width('60%')
      .onChange((value: number) = > {
        this.rate = value / 100
      })
      .position({ x: '20%', y: '87%' })
  }

  build() {
    Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column }) {
      Column() {
        // 通过Flex组件warp参数实现自适应折行
        Flex({
          direction: FlexDirection.Row,
          alignItems: ItemAlign.Center,
          justifyContent: FlexAlign.Center,
          wrap: FlexWrap.Wrap
        }) {
          ForEach(this.imageList, (item:Resource) = > {
            Image(item).width(183).height(138).padding(10)
          })
        }
        .backgroundColor('#FFFFFF')
        .padding(20)
        .width(this.rate * 100 + '%')
        .borderRadius(16)
      }
      .width('100%')

      this.slider()
    }.width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
  }
}
      声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。 举报投诉
      • HarmonyOS
        HarmonyOS
        +关注

        关注

        文章

        浏览量

        30143
      • OpenHarmony
        OpenHarmony
        +关注

        关注

        文章

        浏览量

        16254
      • 鸿蒙OS
        鸿蒙OS
        +关注

        关注

        文章

        浏览量

        4382
      收藏 人收藏

        评论

        华秋（原“华强聚丰”）：
        电子发烧友
        华秋开发
        华秋电路(原"华强PCB")
        华秋商城(原"华强芯城")
        华秋智造
        My ElecFans
        APP
        网站地图
        设计技术
        可编程逻辑
        电源/新能源
        MEMS/传感技术
        测量仪表
        嵌入式技术
        制造/封装
        模拟技术
        RF/无线
        接口/总线/驱动
        处理器/DSP
        EDA/IC设计
        存储技术
        光电显示
        EMC/EMI设计
        连接器
        行业应用
        LEDs
        汽车电子
        音视频及家电
        通信网络
        医疗电子
        人工智能
        虚拟现实
        可穿戴设备
        机器人
        安全设备/系统
        军用/航空电子
        移动通信
        工业控制
        便携设备
        触控感测
        物联网
        智能电网
        区块链
        新科技
        特色内容
        专栏推荐
        学院
        设计资源
        设计技术
        电子百科
        电子视频
        元器件知识
        工具箱
        VIP会员
        最新技术文章
        社区
        小组
        论坛
        问答
        评测试用
        企业服务
        产品
        资料
        文章
        方案
        企业
        供应链服务
        硬件开发
        华秋电路
        华秋商城
        华秋智造
        nextPCB
        BOM配单
        媒体服务
        网站广告
        在线研讨会
        活动策划
        新闻发布
        新品发布
        小测验
        设计大赛
        华秋
        关于我们
        投资关系
        新闻动态
        加入我们
        联系我们
        举报投诉
        社交网络
        微博
        移动端
        发烧友APP
        硬声APP
        WAP
        联系我们
        广告合作
        王婉珠：wangwanzhu@elecfans.com
        内容合作
        黄晶晶：huangjingjing@elecfans.com
        内容合作（海外）
        张迎辉：mikezhang@elecfans.com
        供应链服务 PCB/IC/PCBA
        江良华：lanhu@huaqiu.com
        投资合作
        曾海银：zenghaiyin@huaqiu.com
        社区合作
        刘勇：liuyong@huaqiu.com
        华秋发烧友
        电子工程师社区
        华秋电路
        1-32层PCB打样·中小批量
        华秋商城
        元器件现货·全球代购·SmartBOM
        华秋智造
        SMT贴片·PCBA加工
        NextPCB
        PCB Manufacturer

        版权所有 © 湖南华秋数字科技有限公司

        长沙市望城经济技术开发区航空路6号手机智能终端产业园2号厂房3层（0731-88081133）

        电子发烧友 （电路图） 湘公网安备43011202000918 工商网监认证工商网监 湘ICP备2023018690号-1