#Dayu200体验官# 第三章 openharmony eTS之常用布局 原创

发布于 2022-5-25 22:14
浏览
1收藏

#Dayu200体验官#第三章 openharmony eTS之常用布局

一、eTS之Row讲解

①、Row水平方向布局容器

Row(value:{space?: Length})

参数:

参数名 参数类型 必填 默认值 参数描述
space Length 0 横向布局元素间距。

属性:

名称 参数类型 默认值 描述
alignItems VerticalAlign VerticalAlign.Center 在垂直方向上子组件的对齐格式。
justifyContent8+ FlexAlign FlexAlign.Start 设置子组件在水平方向上的对齐格式。
  • VerticalAlign枚举说明

    名称 描述
    Top 顶部对齐。
    Center 居中对齐,默认对齐方式。
    Bottom 底部对齐。

②、Row控件上手实战

Row代码:

@Entry
@Component
struct Rowyukoyu {
  build() {
    Row({ space: 5 }) { //水平方向布局容器
      Text('1')
        .width('10%')
        .fontSize(50)
        .backgroundColor("#000000")
        .fontWeight(FontWeight.Bold)
      Text('1')
        .width('20%')
        .fontSize(50)
        .backgroundColor("#000000")
        .fontWeight(FontWeight.Bold)
      Text('1')
        .width('30%')
        .fontSize(50)
        .backgroundColor("#000000")
        .fontWeight(FontWeight.Bold)
      Text('1')
        .width('40%')
        .fontSize(50)
        .backgroundColor("#000000")
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

Row展示:

#Dayu200体验官# 第三章 openharmony eTS之常用布局-开源基础软件社区

二、Column讲解

①、Column垂直方向布局的容器

Column(value:{space?: Length})

参数:

参数名 参数类型 必填 默认值 参数描述
space Length 0 纵向布局元素间距。

属性:

名称 参数类型 默认值 描述
alignItems HorizontalAlign HorizontalAlign.Center 设置子组件在水平方向上的对齐格式。
justifyContent8+ FlexAlign FlexAlign.Start 设置子组件在垂直方向上的对齐格式。
  • HorizontalAlign枚举说明

    名称 描述
    Start 按照语言方向起始端对齐。
    Center 居中对齐,默认对齐方式。
    End 按照语言方向末端对齐。

②、Row、Column控件上手实战

Column代码:

@Entry
@Component
struct Columnyukoyu {
  build() {
    Column() {      //垂直方向布局的容器
      Text('Hello World')
        .fontSize(50)
        .backgroundColor('#000000')
        .fontColor("#ffffff")
        .height('10%')
        .fontWeight(FontWeight.Bold)
      Text('Hello World')
        .fontSize(50)
        .fontColor("#ffffff")
        .backgroundColor('#000000')
        .height('20%')
        .margin({top:5})
        .fontWeight(FontWeight.Bold)
      Text('Hello World')
        .fontSize(50)
        .fontColor("#ffffff")
        .backgroundColor('#000000')
        .height('30%')
        .margin({top:5})
        .fontWeight(FontWeight.Bold)
      Text('Hello World')
        .fontSize(50)
        .fontColor("#ffffff")
        .backgroundColor('#000000')
        .height('40%')
        .margin({top:5})
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

Column展示:

#Dayu200体验官# 第三章 openharmony eTS之常用布局-开源基础软件社区

二、eTS之Flex讲解

①、Flex弹性布局容器

Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })

标准Flex布局容器。

参数:

参数名 参数类型 必填 默认值 参数描述
direction FlexDirection FlexDirection.Row 子组件在Flex容器上排列的方向,即主轴的方向。
wrap FlexWrap FlexWrap.NoWrap Flex容器是单行/列还是多行/列排列。
justifyContent FlexAlign FlexAlign.Start 子组件在Flex容器主轴上的对齐格式。
alignItems ItemAlign ItemAlign.Stretch 子组件在Flex容器交叉轴上的对齐格式。
alignContent FlexAlign FlexAlign.Start 交叉轴中有额外的空间时,多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。
  • FlexDirection枚举说明

    名称 描述
    Row 主轴与行方向一致作为布局模式。
    RowReverse 与Row方向相反方向进行布局。
    Column 主轴与列方向一致作为布局模式。
    ColumnReverse 与Column相反方向进行布局。
  • FlexWrap枚举说明

    名称 描述
    NoWrap Flex容器的元素单行/列布局,子项允许超出容器。
    Wrap Flex容器的元素多行/列排布,子项允许超出容器。
    WrapReverse Flex容器的元素反向多行/列排布,子项允许超出容器。
  • FlexAlign枚举说明

    名称 描述
    Start 元素在主轴方向首端对齐, 第一个元素与行首对齐,同时后续的元素与前一个对齐。
    Center 元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同。
    End 元素在主轴方向尾部对齐, 最后一个元素与行尾对齐,其他元素与后一个对齐。
    SpaceBetween Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素与行首对齐,最后一个元素与行尾对齐。
    SpaceAround Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
    SpaceEvenly Flex主轴方向元素等间距布局, 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

②、Flex 控件上手实战

Flex代码:

@Entry
@Component
struct Flexyukoyu {
  build() {
    //Flex弹性布局是比较灵活的控件
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#000000')
        .fontColor("#ffffff")
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#000000')
        .fontColor("#ffffff")
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#000000')
        .fontColor("#ffffff")
    }
    .width('100%')
    .height('100%')
  }
}

Flex展示:

#Dayu200体验官# 第三章 openharmony eTS之常用布局-开源基础软件社区

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