鸿蒙开发-第六天

布局：盒子本身的属性，除了文本的属性

====================布局高级======================

弹性布局 Flex

定位

层叠布局

---------------------------------------------

弹性布局 Flex

子元素的排列，对齐，分配剩余空间

Flex 主轴方向默认是水平方向的，交叉轴默认是竖直方向的，类似 Row 
可以自动换行  =>  默认值不换行
可以在横向和纵向来回切换

Flex(参数对象) {text(),text()text() ... }

改方向
Flex({direction:FlexDirection.Column}) { 字结构 }

RowReverse 水平向右
ColumnReverse 竖直向上

主轴对齐方式
justifyContent: FlexAlign.枚举值

Flex({direction:FlexDirection.Column,
justifyContent: FlexAlign.枚举值}) { 字结构 }

交叉轴对齐方式
alignItem: ItemAlign.枚举值

换行
Wrap 
Flex({Wrap: FlexWrap.枚举值})

自适应拉伸
flexGrow  => 设置子结构在主轴上的剩余尺寸所占的比例

flexBasis  子结构在父容器主轴上的尺寸，要优先于width和height

----------------定位-----------------

改变组件位置
绝对定位
相对定位

绝对定位   
1. 相对父容器的左上角定位的
2. 一旦定位了，就飘了，就把其他人压住了
3. 一旦定位了，就飘了，他自己原来的位置就没有了
Position()
参数 { x: 10, y: 10 }
position({ x: 10, y: 10 })
position({ x: '50%', y: 10 })  => 百分比的比例是相对于父容器而言的

相对定位
1. 相对于自己原来的定位
2. 一旦相对定位了，原来的位置还在的
3. 一旦相对定位了，就飘了，会把别人压住
offset()
参数： { x: 偏移量，y: 偏移量 }

绝对定位    相对于父容器左上角的位置，大位置的移动
相对定位    相对于自己的左上角的位置，小位置的移动

Z序控制（定位层级）  => 谁在上谁在下，Z代表高低的位置
zIndex()
zIndex(数字)
zIndex(99999)   => 最高层的

层叠布局
使用场景：广告
Stack
容器内可以摆放各种元素
默认子元素处于绝对的居中位置（中心位置）
后来者居上（后面的结构会压着前面的结构）

对齐方式
alignContent
Alignment.枚举值
Stack({ alignContent.Alignment.枚举值 })

Z序控制
zIndex(数字)
数值越大，层级越高

知识点思维导图