3 Flex

2024-02-17 | 阅读：

Flex组件

以弹性方式布局子组件的容器组件。
可以包含子组件。

接口
Flex(value?: FlexOptions)

FlexOptions对象说明

direction : FlexDirection
wrap : FlexWrap
justifyContent : FlexAlign
alignItems : ItemAlign
alignContent : FlexAlign

示例代码

Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) { // 子组件反向多行布局
    Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
    Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
    Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
}
.width('90%')
.height(120)
.padding(10)
.backgroundColor(0xAFEEEE)

Flex布局

一、flexBasis

flexBasis()值可以是字符串’auto’,表示基准尺寸是元素本来的大小,也可以是长度设置，相当于.width()/.height()

二、flexGrow

flexGrow()表示剩余空间分配给该元素的比例

Flex() {
    Text('flexGrow(2)')
        .flexGrow(2) // 父容器分配给该Text的宽度为剩余宽度的2/3
        .height(100)
        .backgroundColor(0xF5DEB3)
        .textAlign(TextAlign.Center)
    Text('flexGrow(1)')
        .flexGrow(1) // 父容器分配给该Text的宽度为剩余宽度的1/3
        .height(100)
        .backgroundColor(0xD2B48C)
        .textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

三、flexShrink

flexShrink()表示该元素的压缩比例，基于超出的总尺寸进行计算
第一个text压缩比例是0,另外两个都是1,因此放不下时等比例压缩后两个,第一个不压缩

 Flex({ direction: FlexDirection.Row }) {
    Text('flexShrink(0)')
    .flexShrink(0)  // 0不压缩
    .width('50%')
    .height(100)
    .backgroundColor(0xF5DEB3)
    .textAlign(TextAlign.Center)
    Text('default flexShrink') // 默认值为1
    .width('40%')
    .height(100)
    .backgroundColor(0xD2B48C)
    .textAlign(TextAlign.Center)
    Text('flexShrink(1)')
    .flexShrink(1)
    .width('40%')
    .height(100)
    .backgroundColor(0xF5DEB3)
    .textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

四、alignSelf

alignSelf会覆盖Flex布局容器中的alignItems设置

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
    Text('no alignSelf,height:70')
        .width('33%')
        .height(70)
        .backgroundColor(0xF5DEB3)
        .textAlign(TextAlign.Center)
    Text('alignSelf End')
        .alignSelf(ItemAlign.End)
        .width('33%')
        .height(70)
        .backgroundColor(0xD2B48C)
        .textAlign(TextAlign.Center)
    Text('no alignSelf,height:100%')
        .width('34%')
        .height('100%')
        .backgroundColor(0xF5DEB3)
        .textAlign(TextAlign.Center)
    }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })

Row

参数：space
属性：justifyContent、alignItems

Column