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

yukoyu

发布于 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 底部对齐。

名称	描述
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%')
  }
}
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.

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 按照语言方向末端对齐。

名称	描述
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%')
  }
}
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.

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%')
  }
}
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.