宽(width)和 高(height)
- 有两种写法 width(数字), height(数字)与 width(百分比) height(百分比)
内边距(padding)与外边距(margin)
-
内边距(padding)在组件内添加间距,拉开内容与组件边缘之间的距离
-
未加padding时的样式
- 设置padding后的样式
- 外边距(margin)在组件外面添加间距,拉开两个组件之间的距离
- 未加margin时的样式
- 三个text组件无间隔
- 设置margin后的样式
- 写法与padding相同
layoutWeight属性
- 当父容器尺寸确定时,设置了layoutWeight属性的子元素会根据权重进行布局。
-设置layoutWeight属性的子元素将按权重占用父元素的空白区域
位置属性
- 绝对定位 position
- 参照父组件左上角进行偏移 , 绝对定位后的组件不再占用自身原有位置 -下图 父元素为column 所以他的偏移将相对于column的左上角
-偏移后
-相对定位 offset
-
相对自身左上角进行偏移,相对定位后的组件仍然占用自身原有位置
-
下图偏移将相对于自身左上角进行偏移
-偏移后,位置依然占用
边框属性
border
主轴对齐方式
justifyContent -column的轴为垂直向下方向
- row的轴为水平方向上
-属性值
交叉轴对齐方式
Column 主轴为垂直向下,交叉轴为水平方向
- alignItems(HorizontalAlign.值)为Column专有
Row 主轴为水平方向,交叉轴为垂直向下