【木棉花】：弹性布局组件Flex——学习笔记（上）原创精华

木棉花潘颖琳

发布于 2022-2-11 13:34

浏览

4收藏

前言

一次开发多端部署，我理解是设计一个弹性UI框架。容器组件Flex从API version 7开始支持，它是弹性布局组件，这次就Flex的不同参数来作个简单的demo，一起来学习吧(ง •_•)ง 【木棉花】：弹性布局组件Flex——学习笔记（上）-鸿蒙开发者社区

概述

Flex有五类参数，本篇先讲direction和wrap
【木棉花】：弹性布局组件Flex——学习笔记（上）-鸿蒙开发者社区
效果图如下：

正文

1、新建空工程

左上角File -> New -> New Project -> Empty Ability，language选择ets
【木棉花】：弹性布局组件Flex——学习笔记（上）-鸿蒙开发者社区

2、新建ets page

本次案例会在example1和example2上写
【木棉花】：弹性布局组件Flex——学习笔记（上）-鸿蒙开发者社区

3、FlexDirection的Demo

【木棉花】：弹性布局组件Flex——学习笔记（上）-鸿蒙开发者社区

Row为行方向，Column为列方向；行方向的，设置四个文本组件，每个的宽度均为容器Flex的宽度的20%，则会预留一个20%宽的空位，通过效果图可见Row是从左至右，RowReverse是从右至左；而Column是从上至下，ColumnReverse是从下至上
代码如下：

// Example 01
@Entry
@Component
struct FlexExample1 {
  build() {
    Column({ space: 5 }) {
        DirectionRowFlex({text:'direction:Row',direction:FlexDirection.Row})
        DirectionRowFlex({text:'direction:RowReverse',direction:FlexDirection.RowReverse})
        DirectionColumnFlex({text:'direction:Column',direction:FlexDirection.Column})
        DirectionColumnFlex({text:'direction:ColumnReverse',direction:FlexDirection.ColumnReverse})
    }.width('100%')
  }
}

@Component
struct DirectionRowFlex{
  private text:string
  private direction:FlexDirection
  build() {
    Column({ space: 5 }) {
      Text(this.text).fontSize(15).width('90%')
      Flex({ direction:this.direction }) {
        Text('1').fontSize(30).width('20%').height(50).backgroundColor(0xF5DEB3)
        Text('2').fontSize(30).width('20%').height(50).backgroundColor(0xD2B48C)
        Text('3').fontSize(30).width('20%').height(50).backgroundColor(0xF5DEB3)
        Text('4').fontSize(30).width('20%').height(50).backgroundColor(0xD2B48C)
      }
      .height(70)
      .width('90%')
      .padding(10)
      .backgroundColor(0xAFEEEE)
    }.width('100%').margin({ top: 5 })
  }
}

@Component
struct DirectionColumnFlex{
  private text:string
  private direction:FlexDirection
  build() {
    Column({ space: 5 }) {
      Text(this.text).fontSize(15).width('90%')
      Flex({ direction:this.direction }) {
        Text('1').fontSize(18).width('100%').height(40).backgroundColor(0xF5DEB3)
        Text('2').fontSize(18).width('100%').height(40).backgroundColor(0xD2B48C)
        Text('3').fontSize(18).width('100%').height(40).backgroundColor(0xF5DEB3)
        Text('4').fontSize(18).width('100%').height(40).backgroundColor(0xD2B48C)
      }
      .height(160)
      .width('90%')
      .padding(10)
      .backgroundColor(0xAFEEEE)
    }.width('100%').margin({ top: 5 })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.

4、FlexWrap的Demo

【木棉花】：弹性布局组件Flex——学习笔记（上）-鸿蒙开发者社区

同样定义的Text组件在Wrap和NoWrap下的布局效果不一样，在允许多行排布的Wrap（direction默认Row），单个Text组件的宽度如设置一般，为容器组件的宽度的50%；而在NoWrap单行排布，3个50%会超出100%，因此显示的排布为三个的占比，即50%/50%+50%+50%。WrapReverse为Wrap的反向，即为多行/列排布，方向为从右至左/从下至上
代码如下：

// Example 02
@Entry
@Component
struct FlexExample2 {
  build() {
    Column({ space: 5 }) {
      WrapFlex({text:'wrap:Wrap',wrap:FlexWrap.Wrap})
      WrapFlex({text:'wrap:NoWrap',wrap:FlexWrap.NoWrap})
      Text('wrap:WrapReverse,direction:Row').fontSize(15).width('90%')
      Flex({ wrap: FlexWrap.WrapReverse,direction:FlexDirection.Row}) {
        Text('1').fontSize(20).width('50%').height(50).backgroundColor(0xF5DEB3)
        Text('2').fontSize(20).width('50%').height(50).backgroundColor(0xFFBC79)
        Text('3').fontSize(20).width('50%').height(50).backgroundColor(0xD2B48C)
      }
      .height(120)
      .width('90%')
      .padding(10)
      .backgroundColor(0xAFEEEE)

    }.width('100%')
  }
}

@Component
struct WrapFlex{
  private text:string
  private wrap:FlexWrap
  build(){
    Column({ space: 5 }) {
      Text(this.text).fontSize(15).width('90%')
      Flex({ wrap:this.wrap}) {
        Text('1').fontSize(20).width('50%').height(50).backgroundColor(0xF5DEB3)
        Text('2').fontSize(20).width('50%').height(50).backgroundColor(0xFFBC79)
        Text('3').fontSize(20).width('50%').height(50).backgroundColor(0xD2B48C)
      }
      .width('90%')
      .padding(10)
      .backgroundColor(0xAFEEEE)

    }.width('100%').margin({ top: 5 })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

结语

以上就是我这次的小分享啦❀❀！！2022，学习路上继续前进！

更多资料请关注我们的项目 : Awesome-Harmony_木棉花

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

HarmonyOS

标签

「过年不停更」

木棉花

已于2022-2-11 13:47:05修改

1条回复

按时间正序

按时间倒序

红叶亦知秋

通过代码实现了"一次开发多端部署“的这个概念，感谢分享。

2022-2-11 13:56:12

51CTO

51CTO博客

51CTO学堂

【木棉花】：弹性布局组件Flex——学习笔记（上）原创精华

前言

概述