未验证 提交 75d4a805 编写于 作者: O openharmony_ci 提交者: Gitee

!21263 constraint size

Merge pull request !21263 from xiexiyun/constraint
......@@ -16,24 +16,22 @@
| height | [Length](ts-types.md#length) | 设置组件自身的高度,缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高,则会画出父组件的范围。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
| size | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置高宽尺寸。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
| padding | [Padding](ts-types.md#padding)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置内边距属性。<br/>参数为Length类型时,四个方向内边距同时生效。<br>默认值:0 <br>padding设置百分比时,上下左右内边距均以父容器的width作为基础值。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
| margin | [Margin](ts-types.md#margin)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置外边距属性。<br/>参数为Length类型时,四个方向外边距同时生效。<br>默认值:0 <br>margin设置百分比时,上下左右外边距均以父容器的width作为基础值。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
| margin | [Margin](ts-types.md#margin)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置外边距属性。<br/>参数为Length类型时,四个方向外边距同时生效。<br>默认值:0 <br>margin设置百分比时,上下左右外边距均以父容器的width作为基础值。在Row、Column、Flex交叉轴上布局时,子组件交叉轴的大小与margin的和为整体。<br/>例如Column容器宽100,其中子组件宽50,margin left为10,right为20,子组件实际的水平方向offset为20。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
| constraintSize | {<br/>minWidth?:&nbsp;[Length](ts-types.md#length),<br/>maxWidth?:&nbsp;[Length](ts-types.md#length),<br/>minHeight?:&nbsp;[Length](ts-types.md#length),<br/>maxHeight?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置约束尺寸,组件布局时,进行尺寸范围限制。constraintSize的优先级高于Width和Height。取值结果参考[constraintSize取值对width/height影响](ts-universal-attributes-size.md#constraintsize取值对widthheight影响)<br>默认值:<br>{<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>}<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br />从API version 10开始,该接口支持calc计算特性。 |
## constraintSize取值对width/height影响
| 大小排列 | 结果 |
| 缺省值 | 结果 |
| ---------------------------------------- | ------------------ |
| minWidth/minHeight < width/height < maxWidth/maxHeight | width/height |
| minWidth/minHeight < maxWidth/maxHeight < width/height | maxWidth/maxHeight |
| maxWidth/maxHeight < minWidth/minHeight < width/height | minWidth/minHeight |
| maxWidth/maxHeight < width/height < minWidth/minHeight | minWidth/minHeight |
| width/height < maxWidth/maxHeight < minWidth/minHeight | minWidth/minHeight |
| width/height < minWidth/minHeight < maxWidth/maxHeight | minWidth/minHeight |
| minWidth/minHeight = maxWidth/maxHeight | minWidth/minHeight |
| minWidth/minHeight < maxWidth/maxHeight = width/height | maxWidth/maxHeight |
| maxWidth/maxHeight < minWidth/minHeight = width/height | minWidth/minHeight |
| width/height = minWidth/minHeight < maxWidth/maxHeight | minWidth/minHeight |
| width/height = maxWidth/maxHeight < minWidth/minHeight | minWidth/minHeight |
| / | 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时使用组件自身布局逻辑,<br/>结果在maxWidth/maxHeight与minWidth/minHeight之间。<br/> 其他情况结果为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|使用父容器传递的布局限制进行布局。|
## 示例
```ts
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册