《ArkUI实战》

# 3.1：尺寸设置

设置组件的尺寸大小，支持 number 和 string 类型，区别如下：

  • number：设置为 number 类型时，单位默认为 vp。
  • string：设置为 string 类型时，需要带上单位，例如 10px，也支持百分比的设置，例如 100% 表示宽或高充满容器。如果不带单位则同 number 类型一致。

# 3.1.1：宽高设置

export declare class CommonMethod<T> {
  width(value: Length): T;
  height(value: Length): T;
  size(value: SizeOptions): T;
}
1
2
3
4
5

设置组件的宽高，缺省时使用组件自身内容的宽高，比如充满父布局可以使用 string 值："100%"，当组件同时设置 size 和 width / height 时，以后设置的值为准。

    运行结果如下图所示：

    3_1_1_1

    📢：若子组件的宽高大于父组件的宽高，默认情况下子组件会绘制出父组件的可视范围，此时可以设置 clip(true) 方法限制子组件超出父组件的范围，样例如下所示：

      样例运行结果如下所示：

      3_1_1_5

      # 3.1.2：宽高比设置

      export declare class CommonMethod<T> {
  aspectRatio(value: number): T;
}
      1
      2
      3

      设置组件的宽高比，计算公式为：aspectRatio = width / height，在设备适配上比较实用。简单样例如下所示：

        样例运行结果如下图所示：

        3_1_1_2

        # 3.1.3：权重设置

        export declare class CommonMethod<T> {
  layoutWeight(value: number | string): T;
}
        1
        2
        3

        设置组件的布局权重，该属性仅在 Row、Column、Flex 布局中生效，表示在父容器主轴方向上的尺寸按照权重比进行分配，默认值为 0。

        简单样例如下所示：

          本样例中， Row 的每个子组件都设置了权重为 1 ，表示均分父组件的宽度，此时子组件设置的 width 是不起作用的，样例运行结果如下图所示：

          3_1_1_4

          # 3.1.4：尺寸约束

          export declare class CommonMethod<T> {
  constraintSize(value: ConstraintSizeOptions): T;
}

declare interface ConstraintSizeOptions {
    minWidth?: Length;
    maxWidth?: Length;
    minHeight?: Length;
    maxHeight?: Length;
}
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10

          设置组件的约束尺寸从而在组件布局时对其尺寸进行限制，constraintSize() 的优先级高于 width() 和 height()，若设置的 minWidth 大于 maxWidth，则 minWidth 生效，minHeight 与 maxHeight 同理。

          简单样例如下所示：

            样例运行结果如下图所示：

            3_1_1_6

            ← 3.2：边距设置 →

            请作者喝杯咖啡
            ©arkui.club版权所有，禁止私自转发、克隆网站。

            欢迎加入鸿蒙技术交流群：695438501

            津公网安备 12011402001367号

            津ICP备2020008934号-2

            中央网信办互联网违法和不良信息举报中心

            天津市互联网违法和不良信息举报中心