鸿蒙5.0版开发：ArkTS组件通用属性（尺寸设置）
尺寸设置用于设置组件的宽高、边距。
说明：
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
width
width(value: Length)
设置组件自身的宽度，缺省时利用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。
从API version 10开始，该接口支持calc计算特性。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueLength是要设置的组件宽度。
单元：vp height
height(value: Length)
设置组件自身的高度，缺省时利用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。
从API version 10开始，该接口支持calc计算特性。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueLength是要设置的组件高度。
单元：vp 说明：
在Row、Column、RelativeContainer组件中，width、height设置auto表示自适应子组件。在TextInput组件中，width设置auto表示自适应文本宽度。在AlphabetIndexer组件中，width设置auto表示自适应宽度最大索引项的宽度。
size
size(value: SizeOptions)
设置高宽尺寸。
从API version 10开始，该接口支持calc计算特性。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueSizeOptions是设置高宽尺寸。
单元：vp padding
padding(value: Padding | Length | LocalizedPadding)
设置内边距属性。
从API version 10开始，该接口支持calc计算特性。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuePadding | Length | LocalizedPadding12+是设置组件的内边距。
参数为Length类型时，四个方向内边距同时生效。
默认值：0
单元：vp
padding设置百分比时，上下左右内边距均以父容器的width作为基础值。 margin
margin(value: margin | Length | LocalizedMargin)
设置外边距属性。
从API version 10开始，该接口支持calc计算特性。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueMargin | Length | LocalizedMargin12+ 是设置组件的外边距。
参数为Length类型时，四个方向外边距同时生效。
默认值：0
单元：vp
margin设置百分比时，上下左右外边距均以父容器的width作为基础值。在Row、Column、Flex交叉轴上布局时，子组件交叉轴的巨细与margin的和为团体。
比方Column容器宽100，此中子组件宽50，margin left为10，right为20，子组件程度方向偏移10。 layoutWeight
layoutWeight(value: number | string)
对子组件举行重新布局。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuenumber | string 是父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重举行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。
默认值：0
说明：
仅在Row/Column/Flex布局中生效。
可选值为大于即是0的数字，或者可以转换为数字的字符串。 constraintSize
constraintSize(value: ConstraintSizeOptions)
设置约束尺寸，组件布局时，举行尺寸范围限制。
从API version 10开始，该接口支持calc计算特性。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueConstraintSizeOptions是设置约束尺寸。constraintSize的优先级高于Width和Height。取值结果参考constraintSize取值对width/height影响。
默认值：
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
}
单元：vp constraintSize取值对width/height影响
缺省值结果/max(minWidth/minHeight, min(maxWidth/maxHeight, width/height))maxWidth/maxHeightmax(minWidth/minHeight, width/height)minWidth/minHeightmin(maxWidth/maxHeight, width/height)width/heightmaxWidth/maxHeight > minWidth/minHeight时利用组件自身布局逻辑，
结果在maxWidth/maxHeight与minWidth/minHeight之间。
其他情况结果为max(minWidth/minHeight, maxWidth/maxHeight)。maxWidth/maxHeight && width/heightminWidth/minHeightminWidth/minHeight && width/height利用组件自身布局逻辑，最终结果不超过maxWidth/maxHeightmaxWidth/maxHeight && minWidth/minHeightwidth/height，根据其他布局属性可能拉伸或者压缩。maxWidth/maxHeight && minWidth/minHeight && width/height利用父容器通报的布局限制举行布局。 SizeOptions对象说明
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
参数名类型必填说明widthLength 否设置组件宽度。heightLength 否设置组件高度。 ConstraintSizeOptions对象说明
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
参数名类型必填说明minWidthLength 否设置组件最小宽度。maxWidthLength 否设置组件最大宽度。minHeightLength 否设置组件最小高度。maxHeightLength 否设置组件最大高度。 说明：
在Row、Column、RelativeContainer组件中，width、height设置auto表示自适应子组件。在TextInput组件中，width设置auto表示自适应文本宽度。
示例
示例1
// xxx.ets
@Entry
@Component
struct SizeExample {
build() {
Column({ space: 10 }) {
Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%')
Row() {
// 宽度80 ,高度80 ,外边距20(蓝色区域），上下左右的内边距分别为5、15、10、20（白色区域）
Row() {
Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow)
}
.width(80)
.height(80)
.padding({ top: 5, left: 10, bottom: 15, right: 20 })
.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)')
// width和height设置百分比时，以父容器的width和height作为基础值。
.size({ width: 'calc(90%)', height: 'calc(50vp + 10%)' })
}.width('100%').margin({ top: 5 })
}
}
<strong>ts</strong> https://i-blog.csdnimg.cn/direct/b91f91fc7fc34407afb3c7ad8a1a851f.png
示例2
// xxx.ets
// padding和margin属性使用LocalizedPadding类型和LocalizedMargin类型
import { LengthMetrics } from '@ohos.arkui.node'
@Entry
@Component
struct SizeExample {
build() {
Column({ space: 10 }) {
Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%')
Row() {
// 宽度80 ,高度80 ,上下开始结束的外边距40、20、30、10(蓝色区域），上下开始结束的内边距分别为5、15、10、20（白色区域）
Row() {
Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow)
}
.width(80)
.height(80)
.padding({
top: LengthMetrics.vp(5),
bottom: LengthMetrics.vp(15),
start: LengthMetrics.vp(10),
end: LengthMetrics.vp(20)
})
.margin({
top: LengthMetrics.vp(40),
bottom: LengthMetrics.vp(20),
start: LengthMetrics.vp(30),
end: LengthMetrics.vp(10)
})
.backgroundColor(Color.White)
}.backgroundColor(Color.Blue)
}.width('100%').margin({ top: 5 })
}
}
<strong>ts</strong> 从左至右表现语言示例图
https://i-blog.csdnimg.cn/direct/49b07a8cbca141b790769eb0e088f363.png
从右至左表现语言示例图
https://i-blog.csdnimg.cn/direct/19c2fb030dee40a4925a728e9d06e90b.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]