二.布局属性
2.1线性布局
column和row里面可以根据自己的主轴和交叉轴(侧轴)进行线性布局
Row(){}.justifyContent(FlexAlign.枚举值)
Row(){}.alignItems()(VerticalAlign.枚举值)
Column(){}.justifyContent(FlexAlign.枚举值)
Column(){}.alignItems(HorizontalAlign.枚举值)
单个子元素交叉轴对齐方式.alignSelf(ItemAlign.枚举值)+自适应缩放.layoutWeight()
2.2弹性布局
换行
Flex({wrap:FlexWrap.Wrap}) {}
2.3定位
绝对定位
position(){x:水平偏移量,y:垂直偏移量}
相对定位
offset(){x:水平偏移量,y:垂直偏移量}
重点
- 绝对定位:
position,相对父组件左上角进行偏移 - 相对定位:
offset,相对自身左上角进行偏移
2.4层叠布局
* 1. 基本语法:
* Stack(){ 可以写任意组件,Row,Column,Flex,Scroll,Image,Text,Button.... }
* 默认行为:所有内部元素默认是按照中心来进行层叠显示的(对齐方式)
*
* 2. 改变一级组件的对齐方式
* 我们可以通过Stack({alignContent:Alignment.方位})来改变
* 内部所有的一级组件的对齐方式(影响所有的一级组件)
*
* 3. 修改stack里面的一级元素的层级
* zIndex(数值)
* 默认:后面的元素显示在上方,我们可以通过zIndex来修改层级
* 数值越大,层级越高