鸿蒙界面开发——通用属性(1)width&height&margin&padding等尺寸设置

width&height

width(value: Length)
height(value: Length)

设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽,则会画出父组件的范围。
说明
在TextInput组件中,width设置auto表示自适应文本宽度。.width('auto')
在AlphabetIndexer组件中,width设置auto表示自适应宽度最大索引项的宽度。
在Row、Column、RelativeContainer组件中,width、height设置auto表示自适应子组件。

size

size(value: SizeOptions)
设置高宽尺寸。SizeOptions包含width、height。

padding

padding(value: Padding | Length | LocalizedPadding)

设置内边距属性。
参数为Length类型时,四个方向内边距同时生效。
默认值:0
单位:vp
padding设置百分比时,上下左右内边距均以父容器的width作为基础值。

margin

margin(value: Margin | Length | LocalizedMargin)

设置外边距属性。
参数为Length类型时,四个方向外边距同时生效。
默认值:0
单位:vp
margin设置百分比时,上下左右外边距均以父容器的width作为基础值。
注意:在Row、Column、Flex 交叉轴上布局时,子组件交叉轴的大小与margin的和为整体。

为什么margin没有得到我想要的效果呢?

子组件宽度100%,为什么设置margin不能实现内缩呢?
padding会向内压缩,而margin不会,如果想做到向内压缩,需要在外包裹一层容器,设置外层包裹容器的内边距实现子组件的压缩。

layoutWeight

layoutWeight(value: number | string)

对子组件进行重新布局。
父容器尺寸确定时,设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,表示自适应占满剩余空间。
默认值:0
说明:
仅在Row/Column/Flex布局中生效。
可选值为大于等于0的数字,或者可以转换为数字的字符串。

constraintSize

constraintSize(value: ConstraintSizeOptions)

设置约束尺寸,组件布局时,进行尺寸范围限制。
constraintSize的优先级高于Width和Height。取值结果参考constraintSize取值对width/height影响。
默认值:
{minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity}
单位:vp

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weightOneMillion

感谢未来的亿万富翁捧个钱场~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值