布局属性的基本使用

82 阅读2分钟

二.布局属性

2.1线性布局

6.png column和row里面可以根据自己的主轴和交叉轴(侧轴)进行线性布局

Row(){}.justifyContent(FlexAlign.枚举值)
Row(){}.alignItems()(VerticalAlign.枚举值)
Column(){}.justifyContent(FlexAlign.枚举值)
Column(){}.alignItems(HorizontalAlign.枚举值)

7.png 单个子元素交叉轴对齐方式.alignSelf(ItemAlign.枚举值)+自适应缩放.layoutWeight()

2.2弹性布局

image.png

换行
Flex({wrap:FlexWrap.Wrap}) {}

2.3定位

image.png

绝对定位
position(){x:水平偏移量,y:垂直偏移量}
相对定位
offset(){x:水平偏移量,y:垂直偏移量}

重点

  • 绝对定位:position,相对父组件左上角进行偏移
  • 相对定位:offset,相对自身左上角进行偏移

2.4层叠布局

8.png

 * 1. 基本语法:
 * Stack(){  可以写任意组件,Row,Column,Flex,Scroll,Image,Text,Button....  }
 *  默认行为:所有内部元素默认是按照中心来进行层叠显示的(对齐方式)
 *
 * 2. 改变一级组件的对齐方式
 * 我们可以通过Stack({alignContent:Alignment.方位})来改变
 * 内部所有的一级组件的对齐方式(影响所有的一级组件)
 *
 * 3. 修改stack里面的一级元素的层级
 * zIndex(数值)
 * 默认:后面的元素显示在上方,我们可以通过zIndex来修改层级
 * 数值越大,层级越高