尺寸設置

用于設置組件的寬高、邊距。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 7開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

屬性

名稱	參數說明	描述
width	[Length]	設置組件自身的寬度，缺省時使用元素自身內容需要的寬度。若子組件的寬大于父組件的寬，則會畫出父組件的范圍。從API version 9開始，該接口支持在ArkTS卡片中使用。從API version 10開始，該接口支持calc計算特性。
height	[Length]	設置組件自身的高度，缺省時使用元素自身內容需要的高度。若子組件的高大于父組件的高，則會畫出父組件的范圍。從API version 9開始，該接口支持在ArkTS卡片中使用。從API version 10開始，該接口支持calc計算特性。
size	{ width?: [Length], height?: [Length] }	設置高寬尺寸。從API version 9開始，該接口支持在ArkTS卡片中使用。從API version 10開始，該接口支持calc計算特性。
padding	[Padding]	[Length]
margin	[Margin]	[Length]
constraintSize	{ minWidth?: [Length], maxWidth?: [Length], minHeight?: [Length], maxHeight?: [Length] }	設置約束尺寸，組件布局時，進行尺寸范圍限制。constraintSize的優先級高于Width和Height。取值結果參考[constraintSize取值對width/height影響]。默認值： { minWidth: 0, maxWidth: Infinity, minHeight: 0, maxHeight: Infinity } 從API version 9開始，該接口支持在ArkTS卡片中使用。從API version 10開始，該接口支持calc計算特性。

constraintSize取值對width/height影響

缺省值	結果
/	max(minWidth/minHeight, min(maxWidth/maxHeight, width/height))
maxWidth/maxHeight	max(minWidth/minHeight, width/height)
minWidth/minHeight	min(maxWidth/maxHeight, width/height)
width/height	maxWidth/maxHeight > minWidth/minHeight時使用組件自身布局邏輯，結果在maxWidth/maxHeight與minWidth/minHeight之間。其他情況結果為max(minWidth/minHeight, maxWidth/maxHeight)。
maxWidth/maxHeight && width/height	minWidth/minHeight
minWidth/minHeight && width/height	使用組件自身布局邏輯，最終結果不超過maxWidth/maxHeight
maxWidth/maxHeight && minWidth/minHeight	width/height，根據其他布局屬性可能拉伸或者壓縮。
maxWidth/maxHeight && minWidth/minHeight && width/height	使用父容器傳遞的布局限制進行布局。`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

新文檔.png

示例

// xxx.ets
@Entry
@Component
struct SizeExample {
  build() {
    Column({ space: 10 }) {
      Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%')
      Row() {
        // 寬度80 ,高度80 ,外邊距20(藍色區域），內邊距10（白色區域）
        Row() {
          Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow)
        }
        .width(80)
        .height(80)
        .padding(10)
        .margin(20)
        .backgroundColor(Color.White)
      }.backgroundColor(Color.Blue)

      Text('constraintSize').fontSize(12).fontColor(0xCCCCCC).width('90%')
      Text('this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text')
        .width('90%')
        .constraintSize({ maxWidth: 200 })

      Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%')
      // 父容器尺寸確定時，設置了layoutWeight的子元素在主軸布局尺寸按照權重進行分配，忽略本身尺寸設置。
      Row() {
        // 權重1，占主軸剩余空間1/3
        Text('layoutWeight(1)')
          .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center)
          .layoutWeight(1)
        // 權重2，占主軸剩余空間2/3
        Text('layoutWeight(2)')
          .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
          .layoutWeight(2)
        // 未設置layoutWeight屬性，組件按照自身尺寸渲染
        Text('no layoutWeight')
          .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
      }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE)
      // calc計算特性
      Text('calc:').fontSize(12).fontColor(0xCCCCCC).width('90%')
      Text('calc test').fontSize(50).fontWeight(FontWeight.Bold).backgroundColor(0xFFFAF0).textAlign(TextAlign.Center)
        .margin('calc(25vp*2)')
        .size({width:'calc(90%)', height:'calc(50vp + 10%)'})
    }.width('100%').margin({ top: 5 })
  }
}