15、鸿蒙/布局/弹性布局 (Flex)

概述

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。

flex.png

基本概念

主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。
交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。

布局方向

在弹性布局中，容器的子元素可以按照任意方向排列。通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向。

direction.png

FlexDirection.Row（默认值）：主轴为水平方向，子元素从起始端沿着水平方向开始排布。

@Component
export struct FlexLayout {
  build() {
    Column(){
      // 主轴为水平方向，子元素从起始端沿着水平方向开始排布
      Flex({direction: FlexDirection.Row}){
        Text("首页").backgroundColor(Color.Red).flexGrow(1)
        Text("新闻").backgroundColor(Color.Yellow).width(80)
        Text("汽车").backgroundColor(Color.Gray).flexGrow(1)
      }
    }
  }
}

FlexDirection.RowReverse：主轴为水平方向，子元素从终点端沿着FlexDirection. Row相反的方向开始排布。

@Component
export struct FlexLayout {
  build() {
    Column(){
      // 主轴为水平方向，子元素从终点端沿着FlexDirection. Row相反的方向开始排布
      Flex({direction: FlexDirection.RowReverse}){
        Text("首页").backgroundColor(Color.Red).flexGrow(1)
        Text("新闻").backgroundColor(Color.Yellow).width(80)
        Text("汽车").backgroundColor(Color.Gray).flexGrow(1)
      }
    }
  }
}

FlexDirection.Column：主轴为垂直方向，子元素从起始端沿着垂直方向开始排布。

@Component
export struct FlexLayout {
  build() {
    Column(){
      // 主轴为垂直方向，子元素从起始端沿着垂直方向开始排布
      Flex({ direction: FlexDirection.Column }){
        Text("首页").backgroundColor(Color.Red).flexGrow(1)
        Text("新闻").backgroundColor(Color.Yellow).height(80)
        Text("汽车").backgroundColor(Color.Gray).flexGrow(1)
      }
    }
  }
}

FlexDirection.ColumnReverse：主轴为垂直方向，子元素从终点端沿着FlexDirection. Column相反的方向开始排布。

@Component
export struct FlexLayout {
  build() {
    Column(){
      // 主轴为垂直方向，子元素从终点端沿着FlexDirection. Column相反的方向开始排布
      Flex({direction: FlexDirection.ColumnReverse}){
        Text("首页").backgroundColor(Color.Red).flexGrow(1)
        Text("新闻").backgroundColor(Color.Yellow).height(80)
        Text("汽车").backgroundColor(Color.Gray).flexGrow(1)
      }
    }
  }
}

布局换行

弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。

FlexWrap. NoWrap（默认值）：不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。

// FlexWrap. NoWrap（默认值）：不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度
Flex({wrap: FlexWrap.NoWrap}){
    Text("首页").backgroundColor(Color.Red).width('50%')
    Text("新闻").backgroundColor(Color.Yellow).width('50%')
    Text("汽车").backgroundColor(Color.Gray).width('50%')
}

FlexWrap. Wrap：换行，每一行子元素按照主轴方向排列。

// FlexWrap. Wrap：换行，每一行子元素按照主轴方向排列。
Flex({ wrap: FlexWrap.Wrap }){
  Text("首页").backgroundColor(Color.Red).width('50%')
  Text("新闻").backgroundColor(Color.Yellow).width('50%')
  Text("汽车").backgroundColor(Color.Gray).width('50%')
}

FlexWrap. WrapReverse：换行，每一行子元素按照主轴反方向排列。

// FlexWrap. WrapReverse：换行，每一行子元素按照主轴反方向排列
Flex({wrap: FlexWrap.WrapReverse}){
  Text("首页").backgroundColor(Color.Red).width('50%')
  Text("新闻").backgroundColor(Color.Yellow).width('50%')
  Text("汽车").backgroundColor(Color.Gray).width('50%')
}

主轴对齐方式

通过justifyContent参数设置子元素在主轴方向的对齐方式。

justifyContent.png

FlexAlign.Start（默认值）：子元素在主轴方向起始端对齐，第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。

//FlexAlign.Start（默认值）：子元素在主轴方向起始端对齐， 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。
Flex({ justifyContent: FlexAlign.Start }){
  Text("首页").backgroundColor(Color.Red).width('10%')
  Text("新闻").backgroundColor(Color.Yellow).width('10%')
  Text("汽车").backgroundColor(Color.Gray).width('10%')
}

FlexAlign.Center：子元素在主轴方向居中对齐。

// FlexAlign.Center：子元素在主轴方向居中对齐。
Flex({ justifyContent: FlexAlign.Center }){
  Text("首页").backgroundColor(Color.Red).width('10%')
  Text("新闻").backgroundColor(Color.Yellow).width('10%')
  Text("汽车").backgroundColor(Color.Gray).width('10%')
}

FlexAlign.End：子元素在主轴方向终点端对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。

// FlexAlign.End：子元素在主轴方向终点端对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐
Flex({ justifyContent: FlexAlign.End }){
  Text("首页").backgroundColor(Color.Red).width('10%')
  Text("新闻").backgroundColor(Color.Yellow).width('10%')
  Text("汽车").backgroundColor(Color.Gray).width('10%')
}

FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。

// FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。
Flex({ justifyContent: FlexAlign.SpaceBetween }){
  Text("首页").backgroundColor(Color.Red).width('10%')
  Text("新闻").backgroundColor(Color.Yellow).width('10%')
  Text("汽车").backgroundColor(Color.Gray).width('10%')
}

FlexAlign.SpaceAround：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素到主轴起始端的距离和最后一个子元素到主轴终点端的距离是相邻元素之间距离的一半。

// FlexAlign.SpaceAround：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素到主轴起始端的距离和最后一个子元素到主轴终点端的距离是相邻元素之间距离的一半。
Flex({ justifyContent: FlexAlign.SpaceAround }){
  Text("首页").backgroundColor(Color.Red).width('10%')
  Text("新闻").backgroundColor(Color.Yellow).width('10%')
  Text("汽车").backgroundColor(Color.Gray).width('10%')
}

FlexAlign.SpaceEvenly：Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴起始端的间距、最后一个子元素到主轴终点端的间距均相等。

 // FlexAlign.SpaceEvenly：Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴起始端的间距、最后一个子元素到主轴终点端的间距均相等。
Flex({ justifyContent: FlexAlign.SpaceEvenly }){
  Text("首页").backgroundColor(Color.Red).width('10%')
  Text("新闻").backgroundColor(Color.Yellow).width('10%')
  Text("汽车").backgroundColor(Color.Gray).width('10%')
}

交叉轴对齐方式

容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。

容器组件设置交叉轴对齐
可以通过Flex组件的alignItems参数设置子元素在交叉轴的对齐方式。
- ItemAlign.Auto：使用Flex容器中默认配置。

Flex({ alignItems: ItemAlign.Auto }){
        Text("首页").backgroundColor(Color.Red).width('10%').height(150)
        Text("新闻").backgroundColor(Color.Yellow).width('10%').height(150)
        Text("汽车").backgroundColor(Color.Gray).width('10%').height(150)
}.backgroundColor(Color.Orange).height(220)

ItemAlign.Start：交叉轴方向首部对齐。

Flex({alignItems: ItemAlign.Start }){
        Text("首页").backgroundColor(Color.Red).width('10%').height(150)
        Text("新闻").backgroundColor(Color.Yellow).width('10%').height(150)
        Text("汽车").backgroundColor(Color.Gray).width('10%').height(150)
}.backgroundColor(Color.Black).height(220)

ItemAlign.Center：交叉轴方向居中对齐。

Flex({alignItems: ItemAlign.Center }){
        Text("首页").backgroundColor(Color.Red).width('10%').height(150)
        Text("新闻").backgroundColor(Color.Yellow).width('10%').height(150)
        Text("汽车").backgroundColor(Color.Gray).width('10%').height(150)
}.backgroundColor(Color.Pink).height(220)

ItemAlign.End：交叉轴方向底部对齐。

Flex({alignItems: ItemAlign.End }){
        Text("首页").backgroundColor(Color.Red).width('10%').height(150)
        Text("新闻").backgroundColor(Color.Yellow).width('10%').height(150)
        Text("汽车").backgroundColor(Color.Gray).width('10%').height(150)
}.backgroundColor(Color.Blue).height(220)

ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

Flex({ alignItems: ItemAlign.Stretch }){
        Text("首页").backgroundColor(Color.Red).width('20%').height(150)
        Text("新闻").backgroundColor(Color.Yellow).width('20%').height(150)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(150)
}.backgroundColor(Color.Pink).height(220)

ItemAlign. Baseline：交叉轴方向文本基线对齐。

Flex({ alignItems: ItemAlign.Baseline }){
        Text("首页").backgroundColor(Color.Red).width('20%').height(150)
        Text("新闻").backgroundColor(Color.Yellow).width('20%').height(150)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(150)
}.backgroundColor(Color.Brown).height(220)

子元素设置交叉轴对齐

子元素的alignSelf属性也可以设置子元素在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。下例中Flex容器中alignItems设置交叉轴子元素的对齐方式为居中，子元素自身设置了alignSelf属性的情况，覆盖父组件的alignItems值，表现为alignSelf的定义

Flex({direction: FlexDirection.Row, alignItems: ItemAlign.Center }){
  Text("首页").backgroundColor(Color.Red).width('20%').height(150)
          .alignSelf(ItemAlign.Start)
  Text("新闻").backgroundColor(Color.Yellow).width('20%').height(150)
          .alignSelf(ItemAlign.Baseline)
  Text("新闻").backgroundColor(Color.Green).width('20%').height(150)
          .alignSelf(ItemAlign.Center)
  Text("汽车").backgroundColor(Color.Gray).width('20%').height(150)
          .alignSelf(ItemAlign.End)
}.backgroundColor(Color.Pink).height(220)

内容对齐

可以通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效，可选值有：
- FlexAlign.Start：子元素各行与交叉轴起点对齐。

Flex({ justifyContent: FlexAlign.SpaceBetween, alignContent: FlexAlign.Start, wrap: FlexWrap.Wrap }){
        Text("首页").backgroundColor(Color.Red).width('20%').height(50)
        Text("新闻").backgroundColor(Color.Yellow).width('40%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('50%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('70%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('30%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
}.backgroundColor(Color.Pink).height(300)

FlexAlign.Center：子元素各行在交叉轴方向居中对齐。

Flex({ justifyContent: FlexAlign.SpaceBetween, alignContent: FlexAlign.Center, wrap: FlexWrap.Wrap }){
        Text("首页").backgroundColor(Color.Red).width('20%').height(50)
        Text("新闻").backgroundColor(Color.Yellow).width('40%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('50%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('70%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('30%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
}.backgroundColor(Color.Pink).height(300)

FlexAlign.End：子元素各行与交叉轴终点对齐。

Flex({ justifyContent: FlexAlign.SpaceBetween, alignContent: FlexAlign.End, wrap: FlexWrap.Wrap }){
        Text("首页").backgroundColor(Color.Red).width('20%').height(50)
        Text("新闻").backgroundColor(Color.Yellow).width('40%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('50%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('70%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('30%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
}.backgroundColor(Color.Pink).height(300)

FlexAlign.SpaceBetween：子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。

Flex({ justifyContent: FlexAlign.SpaceBetween, alignContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap }){
        Text("首页").backgroundColor(Color.Red).width('20%').height(50)
        Text("新闻").backgroundColor(Color.Yellow).width('40%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('50%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('70%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('30%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
}.backgroundColor(Color.Pink).height(300)

FlexAlign.SpaceAround：子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。

Flex({ justifyContent: FlexAlign.SpaceBetween, alignContent: FlexAlign.SpaceAround, wrap: FlexWrap.Wrap }){
        Text("首页").backgroundColor(Color.Red).width('20%').height(50)
        Text("新闻").backgroundColor(Color.Yellow).width('40%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('50%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('70%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('30%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
}.backgroundColor(Color.Pink).height(300)

FlexAlign.SpaceEvenly: 子元素各行间距，子元素首尾行与交叉轴两端距离都相等。

Flex({ justifyContent: FlexAlign.SpaceBetween, alignContent: FlexAlign.SpaceEvenly, wrap: FlexWrap.Wrap }){
        Text("首页").backgroundColor(Color.Red).width('20%').height(50)
        Text("新闻").backgroundColor(Color.Yellow).width('40%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('50%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('70%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('30%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
        Text("汽车").backgroundColor(Color.Gray).width('20%').height(50)
}.backgroundColor(Color.Pink).height(300)

自适应拉伸

在弹性布局父组件尺寸过小时，通过子元素的以下属性设置其在父容器的占比，达到自适应布局。

flexBasis：设置子元素在父容器主轴方向上的基准尺寸。如果设置了该属性，则子项占用的空间为该属性所设置的值；如果没设置该属性，那子项的空间为width/height的值。

Flex(){
  Text("首页").backgroundColor(Color.Red).height(50)
          .flexBasis('auto')
  Text("新闻").backgroundColor(Color.Yellow).height(50)
          .flexBasis(100)
  Text("汽车").backgroundColor(Color.Gray).height(50)
          .flexBasis(200)
}.backgroundColor(Color.Pink).height(300)

flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例。用于分配父组件的剩余空间。
和css flex 一样

 Flex(){
        Text("首页").backgroundColor(Color.Red).height(50)
          .flexGrow(2)
        Text("新闻").backgroundColor(Color.Yellow).height(50)
          .flexGrow(1)
        Text("汽车").backgroundColor(Color.Gray).height(50)
          .width(100)
}.backgroundColor(Color.Pink).height(300)

flexShrink: 当父容器空间不足时，子元素的压缩比例。

Flex(){
  Text("首页").backgroundColor(Color.Red).height(50)
          .width(200)
          .flexShrink(3)
  Text("新闻").backgroundColor(Color.Yellow).height(50)
          .width(200)
  Text("汽车").backgroundColor(Color.Gray).height(50)
          .width(200)
          .flexShrink(2)
}.backgroundColor(Color.Pink).height(300)

案例：水平垂直居中，两端对齐

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }){
          Text("首页").backgroundColor(Color.Red).height(50)
            .width(100)
          Text("新闻").backgroundColor(Color.Yellow).height(50)
            .width(100)
          Text("汽车").backgroundColor(Color.Gray).height(50)
            .width(100)
}.backgroundColor(Color.Pink).height(300)

禁止转载，如需转载请通过简信或评论联系作者。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,802评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,109评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,683评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,458评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,452评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,505评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,901评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,550评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,763评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,556评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,629评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,330评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,898评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,897评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,140评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,807评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,339评论 2赞 342