ArkUI 学习之尺寸设置：constraintSize（设置约束尺寸）

一、constraintSize概述

在鸿蒙开发中，设置约束尺寸，组件布局时，进行尺寸范围限制。在原有固定宽高的基础上，可以设置最小宽，最大宽；最小高，最大高。

二、constraintSize用法

constraintSize(value: ConstraintSizeOptions)

设置约束尺寸，组件布局时，进行尺寸范围限制。

🔊：从API version 10开始，该接口支持calc计算特性。

参数：

参数名	类型	必填	说明
value	ConstraintSizeOptions	是	设置约束尺寸。constraintSize的优先级高于Width和Height。取值结果参考constraintSize取值对width/height影响。 默认值： { minWidth: 0, maxWidth: Infinity, minHeight: 0, maxHeight: Infinity } 单位：vp

constraintSize(minWidth/maxWidth/minHeight/maxHeight)取值对width/height影响

缺省值	结果
\	width=MAX(minWidth,MIN(maxWidth,width)) height=MAX(minHeight,MIN(maxHeight,height))
maxWidth、maxHeight	width=MAX(minWidth,width) height=MAX(minHeight,height)
minWidth、minHeight	width=MIN(maxWidth,width) height=MIN(maxHeight,height)
width、height	若minWidth<maxWidth，组件自身布局逻辑生效，width取值范围为[minWidth,maxWidth]；否则，width=MAX(minWidth,maxWidth)。 若minHeight<maxHeight，组件自身布局逻辑生效，height取值范围为[minHeight,maxHeight]；否则，height=MAX(minHeight,maxHeight)。
width与maxWidth、height与maxHeight	width=minWidth height=minHeight
width与minWidth、height与minHeight	组件自身布局逻辑生效，width取值约束为不大于maxWidth。 组件自身布局逻辑生效，height取值约束为不大于maxHeight。
minWidth与maxWidth、minHeight与maxHeight	width以所设值为基础，根据其他布局属性发生可能的拉伸或者压缩。 height以所设值为基础，根据其他布局属性发生可能的拉伸或者压缩。
width与minWidth与maxWidth	使用父容器传递的布局限制进行布局。
height与minHeight与maxHeight	使用父容器传递的布局限制进行布局。

示例：

@Entry
@Component
struct TestIndex {
  build() {
    Column({ space: 20 }) {
      Column() {
        Text('不使用constraintSize').width('100%').fontSize(20).textAlign(TextAlign.Center).fontWeight(FontWeight.Bold)
        Text('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA').backgroundColor(Color.Red).margin(10).width('90%')
      }

      Column() {
        Text('constraintSize设置最小宽度')
          .width('100%')
          .fontSize(20)
          .textAlign(TextAlign.Center)
          .fontWeight(FontWeight.Bold)
        Text('A').backgroundColor(Color.Red).margin(10)
          .constraintSize({ minWidth: 100 }) // 设置最小宽度
      }

      Column() {
        Text('constraintSize设置最大宽度')
          .width('100%')
          .fontSize(20)
          .textAlign(TextAlign.Center)
          .fontWeight(FontWeight.Bold)
        Text('AAAAAAAAAAAAAAAAA').backgroundColor(Color.Red).margin(10)
          .constraintSize({ maxWidth: 100 }) // 设置最大宽度
      }

      Column() {
        Text('constraintSize设置最小高度')
          .width('100%')
          .fontSize(20)
          .textAlign(TextAlign.Center)
          .fontWeight(FontWeight.Bold)
        Text('AAA').backgroundColor(Color.Red).margin(10)
          .constraintSize({ minHeight: 50 }) // 设置最小高度
      }

      Column() {
        Text('constraintSize设置最大高度')
          .width('100%')
          .fontSize(20)
          .textAlign(TextAlign.Center)
          .fontWeight(FontWeight.Bold)
        Text('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA').backgroundColor(Color.Red).margin(10)
          .constraintSize({ maxHeight: 30 }) // 设置最大高度
      }
    }
  }
}