【纯血鸿蒙】——自适应布局如何实现？

界面级一多能力有 2 类：

  1. 自适应布局: 略微调整界面结构

  2. 响应式布局：比较大的界面调整

img

img

img

  • 本文章先主要讲解自适应布局，响应式布局再后面文章再细讲。话不多说，开始了。

自适应布局

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

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

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

1. 拉伸能力

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

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

属性类型默认值描述
flexGrownumber0仅当父容器宽度大于所有子组件宽度的总和时，该属性生效。配置了此属性的子组件，按照比例拉伸，分配父容器的多余空间。
flexShrinknumber1仅当父容器宽度小于所有子组件宽度的总和时，该属性生效。配置了此属性的子组件，按照比例收缩，分配父容器的不足空间。
flexBasisauto | Lengthauto设置组件在Flex容器中主轴方向上基准尺寸。'auto’意味着使用组件原始的尺寸，不做修改。 flexBasis属性不是必须的，通过width或height也可以达到同样的效果。当flexBasis属性与width或height发生冲突时，以flexBasis属性为准。

说明：

  • 开发者期望将父容器的剩余空间全部分配给某空白区域时，也可以通过Blank组件实现。注意仅当父组件为Row\Column\Flex组件时，Blank组件才会生效。

  • 类Web开发范式也是通过flex-grow和flex-shrink实现拉伸能力，同时也支持配置flex-basis，详见通用样式。

  • 类Web开发范式没有提供blank组件，但可以通过div组件模拟blank组件的行为，如“<div style=‘flex-grow: 1; flex-shrink: 0; flex-basis: 0’></div>”。

示例1

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

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

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

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

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

  • 当父容器的尺寸大于700vp时，父容器中多余的空间全部分配给中间内容区。

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

@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组件）随父容器尺寸变化而伸缩。

@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)
  }
}

2. 均分能力

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

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

说明：

  • 均分能力还可以通过其它方式实现，如使用Grid网格组件或在每个组件间添加Blank组件等。

  • 类Web开发范式中，通过将div组件的justify-content属性设置为space-evenly来实现均分布局。

示例：

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


@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.icon")).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.icon")).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)
  }
}

3. 占比能力

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

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

  • 将子组件的宽高设置为父组件宽高的百分比。

  • 通过layoutWeight属性配置互为兄弟关系的组件在父容器主轴方向的布局权重。

    • 当父容器尺寸确定时，其子组件按照开发者配置的权重比例分配父容器中主轴方向的空间。

    • 仅当父容器是Row、Column或者Flex时，layoutWeight属性才会生效。

    • 设置layoutWeight属性后，组件本身的尺寸会失效。比如同时设置了.width(‘40%’)和.layoutWeight(1)，那么只有.layoutWeight(1)会生效。

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

说明：

  • 占比能力在实际开发中使用的非常广泛，可以通过很多不同的方式实现占比能力，如还可以通过Grid组件的columnsTemplate属性设置网格容器中列的数量及其宽度比例，或通过配置子组件在栅格（本章后文将详细介绍栅格系统）中占据不同的列数来实现占比能力。

  • 类Web开发范式同样支持以百分比的形式设置组件的宽高。

  • 与声明式开发范式中的layoutWeight属性类似，类Web开发范式提供了flex-weight样式用于配置互为兄弟关系的组件在父容器主轴方向的布局权重。

示例：

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

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

@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)
  }
}

4. 缩放能力

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

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

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

示例：

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

@Entry
@Component
struct ScaleCapabilitySample {
  @State sliderWidth: number = 400
  @State sliderHeight: number = 400
​
  // 底部滑块，可以通过拖拽滑块改变容器尺寸
  @Builder slider() {
    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: '80%' })
    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: '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)
  }
}

5. 延伸能力

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

延伸能力通常使用带有滚动功能的组件来实现：

  • 通过List组件实现。

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

  • 通过Grid组件，只设置行或只设置列也可以实现滚动，也能实现延伸。

说明：

  • List、Row或Column组件中子节点的在页面显示时就已经全部完成了布局计算及渲染，只不过受限于父容器尺寸，用户只能看到一部分。随着父容器尺寸增大，用户可以看到的子节点数目也相应的增加。用户还可以通过手指滑动触发列表滑动，查看被隐藏的子节点。

  • 类Web开发范式同样可以使用list组件实现延伸能力。

  • 类Web开发范式没有提供scroll组件，但可以将div组件的overflow样式设置为scroll（即div组件主轴方向上子元素的尺寸超过div组件本身的尺寸时进行滚动显示）来模拟scroll组件的行为。

示例：

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

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

（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.icon")).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.icon")).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)
        .borderRadius(16)
        .backgroundColor(Color.White)
      }
      .scrollable(ScrollDirection.Horizontal)
      .width(this.rate * 100 + '%')
​
      this.slider()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

6. 隐藏能力

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

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

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

示例：

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

@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)
  }
}

7. 折行能力

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

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

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

示例：

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

 

@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')
  }
}

以上就是自适应布局的全部技巧，熟练掌握便可以应付大多数自适应布局场景了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/690751.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

融合创新：Web3如何重新定义网络生态

融合创新：Web3如何重新定义网络生态

随着区块链技术的不断发展和Web3时代的到来&#xff0c;我们正在见证着互联网生态的巨大变革。Web3将传统的互联网架构转变为去中心化、开放、透明的新网络生态&#xff0c;为创新和合作提供了全新的可能性。本文将深入探讨Web3如何重新定义网络生态&#xff0c;探索融合创新的…
阅读更多...
HAL STM32F1 通过查表方式实现SVPWM驱动无刷电机测试

HAL STM32F1 通过查表方式实现SVPWM驱动无刷电机测试

HAL STM32F1 通过查表方式实现SVPWM驱动无刷电机测试 &#x1f4cd;相关篇《基于开源项目HAL STM32F4 DSP库跑SVPWM开环速度测试》 ✨针对STM32F1系列&#xff0c;没有专门的可依赖的DSP库&#xff0c;为了实现特定函数的浮点运算快速计算&#xff0c;通过查表方式来实现&#…
阅读更多...
搭建多平台比价软件你必须知道的几大知识板块

搭建多平台比价软件你必须知道的几大知识板块

为了搭建一个多平台比价系统并使其发挥作用&#xff0c;你需要考虑以下几个关键的平台支持方面&#xff1a; 数据API采集平台&#xff1a; 电商平台&#xff1a;如亚马逊、淘宝、京东等&#xff0c;这些平台提供了丰富的商品信息和价格数据。旅行服务平台&#xff1a;如携程、…
阅读更多...
git凭证

git凭证

默认是manager # 将凭证缓存到内存中&#xff0c;默认缓存15分钟 git config --global credential.helper cache# 将凭证存储到磁盘上的纯文本文件中 git config --global credential.helper store# 使用 Git 凭证管理器 git config --global credential.helper manager-core查…
阅读更多...
红队神器Evil-winrm的使用

红队神器Evil-winrm的使用

前言 Evil-winrm 工具最初是由 Hackplayers 团队开发的。开发该工具的目的是尽可能简化渗透测试&#xff0c;尤其是在 Microsoft Windows 环境中。 Evil-winrm 使用 PowerShell 远程协议 (PSRP)&#xff0c;且系统和网络管理员经常使用Windows Remote Management 协议进行上传和…
阅读更多...
C++基础四：C++模板编程

C++基础四：C++模板编程

目录 一：函数模板 二：类模板 空间配置器allocator 一：函数模板 模板代码只能同一实现，不能先声明，再在另一文件实现，模板代码都是放在头文件当中的，在头文件中直接实现 二：类模板 template<typename T=int> class SeqStack // 模板名称+类型参数列表 = 类名称…
阅读更多...
2024 年最全的 21 款数据恢复工具软件汇总

2024 年最全的 21 款数据恢复工具软件汇总

使用其中任何一款免费数据恢复工具&#xff0c;您都可以找回那些您认为已经永远消失的文件。我根据这些程序对我而言的易用性和它们提供的功能对这些程序进行了排名。 这些应用程序从您的硬盘、USB 驱动器、媒体卡等恢复文档、视频、图像、音乐等。我建议每个计算机所有者都安装…
阅读更多...
list模拟与实现（附源码）

list模拟与实现（附源码）

文章目录 声明list的简单介绍list的简单使用list中sort效率测试list的简单模拟封装迭代器insert模拟erase模拟头插、尾插、头删、尾删模拟自定义类型迭代器遍历const迭代器clear和析构函数拷贝构造&#xff08;传统写法&#xff09;拷贝构造&#xff08;现代写法&#xff09; 源…
阅读更多...
C盘满了怎么办，Windows11的C盘没有磁盘清理选项怎么办，一次搞定

C盘满了怎么办，Windows11的C盘没有磁盘清理选项怎么办，一次搞定

问题&#xff1a; 太久没清电脑了&#xff0c;满的跟垃圾堆一样。。。C盘红色看上去很不妙。 一. C盘满了怎么办&#xff1a; 1. 删除临时文件 找到 C:\Windows\Temp&#xff0c;进入Temp资料夹&#xff0c;选中所有文件夹和文件&#xff0c;按下ShiftDelete键&#xff0c;彻…
阅读更多...
张宇1000和李林880究竟哪个更难？

张宇1000和李林880究竟哪个更难？

24李林跌落神坛&#xff0c;张宇一战封神&#xff01; 张宇1000和李林880&#xff0c; 谁的基础篇更“超纲”&#xff1f; 谁覆盖的知识点更多&#xff1f; 谁的概念题更多&#xff1f; 谁的“强化难度”题更难&#xff1f; 基础篇里为什么有“跨专题”的题&#xff0c;都…
阅读更多...
SpringBoot Elasticsearch07-以黑马商场为例-黑马程序员学习笔记

SpringBoot Elasticsearch07-以黑马商场为例-黑马程序员学习笔记

06篇已经导入了大量数据到elasticsearch中&#xff0c;实现了商品数据的存储。不过查询商品数据时依然采用的是根据id查询&#xff0c;而非模糊搜索。 接下来研究下elasticsearch的数据搜索功能。Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#…
阅读更多...
简单通用的系统安装、备份、还原方法，支持 ARM 系统【Ventory+FirePE+DiskGenius】

简单通用的系统安装、备份、还原方法，支持 ARM 系统【Ventory+FirePE+DiskGenius】

文章目录 0. 简介1. 制作 Ventory 启动盘1.1. 下载 Ventory1.2. 制作 Ventory 启动盘 2. 添加 FirePE 等系统镜像到启动盘2.1. 下载 FirePE2.2. 导出 .iso 系统镜像文件2.3. .iso 系统镜像文件添加至启动盘 3. 启动 FirePE 等系统镜像3.1. 在 bios 中选择启动盘启动3.2. 启动系…
阅读更多...
“安全生产月”专题报道：AI智能监控技术如何助力安全生产

“安全生产月”专题报道：AI智能监控技术如何助力安全生产

今年6月是第23个全国“安全生产月”&#xff0c;6月16日为全国“安全宣传咨询日”。今年全国“安全生产月”活动主题为“人人讲安全、个个会应急——畅通生命通道”。近日&#xff0c;国务院安委会办公室、应急管理部对开展好2024年全国“安全生产月”活动作出安排部署。 随着科…
阅读更多...
本地部署GLM-4-9B清华智谱开源大模型方法和对话效果体验

本地部署GLM-4-9B清华智谱开源大模型方法和对话效果体验

GLM-4-9B是清华大学和智谱AI推出的最新一代预训练模型GLM-4系列中的开源版本。在语义、数学、推理、代码和知识等多方面的数据集测评中&#xff0c;GLM-4-9B及其人类偏好对齐的版本GLM-4-9B-Chat均表现出较高的性能&#xff0c;其通用能力评测结果甚至超越了Llama-3-8B开源大模…
阅读更多...
MPC控制简化版

MPC控制简化版

MPC控制算法简化版 模型预测控制&#xff08;Model Predictive Control&#xff0c;MPC&#xff09;是一种先进的控制策略&#xff0c;广泛应用于人形机器人的运动控制。具体实现过程中&#xff0c;还需结合机器人的实际动力学模型和更多的物理约束条件。以下是一个人形机器人…
阅读更多...
银河麒麟操作系统通过首批软件供应链安全能力认证

银河麒麟操作系统通过首批软件供应链安全能力认证

麒麟软件产品供应链安全能力获双重肯定&#xff01;5月30日&#xff0c;经北京赛迪认证中心评估&#xff0c;银河麒麟高级服务器操作系统V10和银河麒麟桌面操作系统V10成为首批获得软件供应链安全能力认证产品&#xff0c;并在操作系统类产品中名列前茅。 软件供应链安全能力评…
阅读更多...
2024年【R2移动式压力容器充装】考试技巧及R2移动式压力容器充装复审考试

2024年【R2移动式压力容器充装】考试技巧及R2移动式压力容器充装复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 R2移动式压力容器充装考试技巧参考答案及R2移动式压力容器充装考试试题解析是安全生产模拟考试一点通题库老师及R2移动式压力容器充装操作证已考过的学员汇总&#xff0c;相对有效帮助R2移动式压力容器充装复审考试学…
阅读更多...
什么是助听器呢?

什么是助听器呢?

助听器是一种用于改善听力障碍患者听觉能力的装置。它通过放大声音&#xff0c;使原本听不到或听不清的声音能够被听力受损者感知&#xff0c;从而提高其交流能力和生活质量。 助听器的基本工作原理是&#xff0c;将声音转化为电信号&#xff0c;经过内部电路处理后&#xff0c…
阅读更多...
FPGA SPI采集ADC7606数据

FPGA SPI采集ADC7606数据

一，SPI总线的构成及信号类型 SPI总线只需四条线（如图1所示）就可以完成MCU与各种外围器件的通讯: 1）MOSI – Master数据输出,Slave数据输入 2）MISO – Master数据输入,Slave数据输出 3）SCK – 时钟信号,由Master产生 4）/CS – Slave使能信号,由Master控制。 在一个SPI时…
阅读更多...
C# 异步方法async / await 任务超时处理

C# 异步方法async / await 任务超时处理

一、需求 如果调用一个异步方法后&#xff0c;一直不给返回值结果怎么办呢&#xff1f;这就涉及到怎么取消任务了。 二、Task取消任务 static CancellationTokenSource source new CancellationTokenSource();static void Main(string[] args){Task.Run(() >{for (int i …
阅读更多...
最新文章

Copyright @ 2022~2023