鸿蒙界面开发——通用属性（1）widthheightmarginpadding等尺寸设置

本文主要是介绍鸿蒙界面开发——通用属性（1）widthheightmarginpadding等尺寸设置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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)

这篇关于鸿蒙界面开发——通用属性（1）widthheightmarginpadding等尺寸设置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！