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

于 2024-05-16 20:40:01 发布
阅读量901 收藏 10
点赞数 12
分类专栏： 鸿蒙开发 文章标签： harmonyos openharmony 鸿蒙 移动开发 程序员 鸿蒙系统 一多
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70748845/article/details/138974348
版权

自适应布局

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

自适应布局类别自适应布局能力使用场景实现方式
自适应拉伸[拉伸能力]容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。[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组件]实现。注意仅当父组件为Row\Column\Flex组件时，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)
  }
}

`HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿`

搜狗高速浏览器截图20240326151450.png

折行能力

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

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

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

说明：  类Web开发范式通过将[div组件]的flex-warp样式设置为wrap来使用折行能力。

示例：

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

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')
  }
}
移动开发技术栈
关注
  • 12
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS鸿蒙开发指南:自适应布局 网格布局
sybh的博客
01-08 1027
网格布局（GridLayout）是自适应布局中一种重要的布局，具备较强的页面均分能力，子组件占比控制能力。通过Grid容器组件和子组件 Gridltem实现，Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。
鸿蒙一次开发，多端部署（六）自适应布局
1
03-21 1319
针对常见的开发场景，方舟开发框架提炼了七种自适应布局能力，这些布局可以独立使用，也可多种布局叠加使用。下面我们依次介绍这几种自适应布局能力。
鸿蒙一次开发，多端部署（二）从一个例子开始
1
03-21 927
本章通过一个天气应用，介绍一多应用的整体开发过程，包括UX设计、工程管理及调试、页面开发等。
鸿蒙-布局
m0_66469301的博客
08-15 274
布局
鸿蒙之布局
m0_61305804的博客
08-14 205
justify-content（左右的位置：center，flex-end）align-items（上下的位置：center，flex-end）它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。grid-template-columns：用来指定列的宽度。grid-template-rows：用来指定行的高度。...
CSS网页布局入门教程2：一列自适应宽度
10-30
CSS网页布局入门教程2：一列自适应宽度
自适应线条增强应用：自适应线条增强应用-matlab开发
06-01
%function [ALEstruct]=ale(f,fs,munoise,sigmanise,mulms,ncoef,dur) % 使用 LMS 算法和自适应 FIR 滤波器执行自适应线增强的功能%ALE 概念增强了受白噪声 (mu,sigma) 影响的单音信号（频率 f） %需要滤波器设计...
iapp源码大全：快速自适应布局代码.iapp
05-16
iapp源码大全：快速自适应布局代码.iapp
HarmonyOS应用开发-AppMultiplier体验分享.docx
06-09
 左侧页面展示图片列表，可根据屏幕宽度自适应调节图片布局； 右侧页面展示选择的图片，可对图片进行裁剪、缩放、镜像、保存、流转等操作。流转 是将右侧窗口对应的Ability迁移到另一台设备，另一台设备也可图片...
应用XML文件开发Android自适应分辨率程序.pdf
09-21
应用XML文件开发Android自适应分辨率程序.pdf
鸿蒙OS布局
影子
06-11 1470
DirectionalLayout 是 Java UI 中的一种重要组件布局，用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。
鸿蒙中的九种布局概述
Dimanche的博客
02-25 1654
鸿蒙开发中包含就种布局，分别为线性布局、层叠布局、弹性布局、相对布局、栅格布局、媒体布局、列表、网格、轮播。
右边自适应 左右布局_从零开始开发HarmonyOS鸿蒙应用——2020HDC开发者大会特性之：布局自适应...
weixin_31165655的博客
12-26 271
创建应用工程使用 DevEco Studio 创建应用工程，在菜单栏打开“File>New>New Project”，在弹出的对话框中选择java工程模板：选择好模板之后点击“Next”，在下一个界面中指定“Project Name”和“Package Name”，然后点击“Finish”即可建立工程，SDK选择API Version 3。在“Project”窗口，打开“entry &...
【学习笔记】鸿蒙UI开发-布局（ArkTs）
程序员四海
12-18 4194
主要内容： 1、UI开发的相关知识和注意事项。 2、实际开发的代码示例及链接。 3、ArkTs语言的相关组件的使用与注意事项。
鸿蒙开发Flex、栅格布局详解
Androiddddd的博客
01-15 1350
栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。
鸿蒙：ContentTable、Stack、Flex等组件和布局实现图像、文本显示界面
肖云鹤的博客
11-19 1361
本篇博文实现一个食物详情页的开发Demo 通过这个开发过程学习如何使用容器组件Stack、Flex和基本组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍
使用腾讯云服务器搭建鸿蒙操作系统编译环境
Ｋ目
02-23 1995
使用腾讯云服务器搭建鸿蒙操作系统编译环境
42.HarmonyOS鸿蒙系统 App(ArkUI)实现横屏竖屏自适应
最新发布
Txwtech笛克特科
03-31 1307
HarmonyOS鸿蒙系统 App(ArkUI)实现横屏竖屏自适应作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。
鸿蒙harmonyos官网
09-13
鸿蒙（HarmonyOS）是华为公司自主研发的一款开放源代码操作系统，旨在构建全场景智慧生态。鸿蒙的官方网站（https://www.harmonyos.com）是了解和了解该操作系统的最佳途径。 鸿蒙官网以简洁、清晰的页面设计，提供了关于鸿蒙的基本介绍、技术特点、应用场景、开发者资源等内容。其中，主页展示了鸿蒙操作系统的简介，介绍了其提供的良好用户体验和高效安全性能。此外，官网还提供了鸿蒙操作系统的应用场景，包括智能手机、智能穿戴、智能家居等多个领域，以及与开发者合作的机会。 鸿蒙官网也展示了鸿蒙的技术特点，包括分布式能力、区块链安全和异构多核等方面。用户可以通过官网了解鸿蒙操作系统的先进技术以及其在不同场景中所带来的优势。此外，开发者可以在官网上找到鸿蒙操作系统的开发者资源，包括开发文档、培训课程、社区等，帮助开发者更好地理解和应用鸿蒙操作系统。 总之，鸿蒙（HarmonyOS）官网是了解和获取相关信息的重要渠道。通过官网，用户可以了解鸿蒙操作系统的特点、应用场景以及与开发者合作的机会。官网还提供了丰富的开发者资源，帮助开发者更好地理解和应用鸿蒙操作系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值