【木棉花】:弹性布局组件Flex——学习笔记(上) 原创 精华

发布于 2022-2-11 13:34
浏览
3收藏

春节不停更,此文正在参加「星光计划-春节更帖活动」

前言

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

概述

Flex有五类参数,本篇先讲directionwrap
【木棉花】:弹性布局组件Flex——学习笔记(上)-开源基础软件社区
效果图如下:

【木棉花】:弹性布局组件Flex——学习笔记(上)-开源基础软件社区 【木棉花】:弹性布局组件Flex——学习笔记(上)-开源基础软件社区

正文

1、新建空工程

左上角File -> New -> New Project -> Empty Ability,language选择ets
【木棉花】:弹性布局组件Flex——学习笔记(上)-开源基础软件社区

2、新建ets page

本次案例会在example1example2上写
【木棉花】:弹性布局组件Flex——学习笔记(上)-开源基础软件社区

3、FlexDirection的Demo

【木棉花】:弹性布局组件Flex——学习笔记(上)-开源基础软件社区
【木棉花】:弹性布局组件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 })
  }
}

4、FlexWrap的Demo

【木棉花】:弹性布局组件Flex——学习笔记(上)-开源基础软件社区
【木棉花】:弹性布局组件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 })
  }
}

结语

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

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-2-11 13:47:05修改
7
收藏 3
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐