1 概述
一個豐富的頁面需要很多組件組成，那么，我們?nèi)绾尾拍茏屵@些組件有條不紊地在頁面上布局呢？這就需要借助容器組件來實現(xiàn)。
容器組件是一種比較特殊的組件，它可以包含其他的組件，而且按照一定的規(guī)律布局，幫助開發(fā)者生成精美的頁面。容器組件除了放置基礎(chǔ)組件外，也可以放置容器組件，通過多層布局的嵌套，可以布局出更豐富的頁面。
ArkTS為我們提供了豐富的容器組件來布局頁面，本文將以構(gòu)建登錄頁面為例，介紹Column和Row組件的屬性與使用。
2 組件介紹
布局容器概念
線性布局容器表示按照垂直方向或者水平方向排列子組件的容器，ArkTS提供了Column和Row容器來實現(xiàn)線性布局。
- Column表示沿垂直方向布局的容器。
- Row表示沿水平方向布局的容器。
主軸和交叉軸概念
在布局容器中，默認(rèn)存在兩根軸，分別是主軸和交叉軸，這兩個軸始終是相互垂直的。不同的容器中主軸的方向不一樣的。
-
主軸：在Column容器中的子組件是按照從上到下的垂直方向布局的，其主軸的方向是垂直方向；在Row容器中的組件是按照從左到右的水平方向布局的，其主軸的方向是水平方向。
-
交叉軸：與主軸垂直相交的軸線，如果主軸是垂直方向，則交叉軸就是水平方向；如果主軸是水平方向，則交叉軸是垂直方向。
屬性介紹
了解布局容器的主軸和交叉軸，主要是為了讓大家更好地理解子組件在主軸和交叉軸的排列方式。
接下來，我們將詳細講解Column和Row容器的兩個屬性justifyContent和alignItems。
|
| 屬性名稱 | 描述 |
|---|---|
| justifyContent | 設(shè)置子組件在主軸方向上的對齊格式。 |
| alignItems | 設(shè)置子組件在交叉軸方向上的對齊格式。 |
1. 主軸方向的對齊（justifyContent）
子組件在主軸方向上的對齊使用justifyContent屬性來設(shè)置，其參數(shù)類型是FlexAlign。FlexAlign定義了以下幾種類型：
- Start：元素在主軸方向首端對齊，第一個元素與行首對齊，同時后續(xù)的元素與前一個對齊。（默認(rèn)）
Column容器
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.Start)
.width('100%')
.height('100%')
}
}
Row容器
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.Start)
.width('100%')
// .height('100%')
}
}
- Center：元素在主軸方向中心對齊，第一個元素與行首的距離以及最后一個元素與行尾距離相同。
Column容器
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}
Row容器
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}
- End：元素在主軸方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊。
Column容器
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.End)
.width('100%')
.height('100%')
}
}
Row容器
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.End)
.width('100%')
.height('100%')
}
}
- SpaceBetween：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個元素與行首對齊，最后一個元素與行尾對齊。
Column容器
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.height('100%')
}
}
Row容器
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.height('100%')
}
}
- SpaceAround：元素在主軸方向均勻分配彈性元素，相鄰元素之間距離相同。 第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半。
Column
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.SpaceAround)
.width('100%')
.height('100%')
}
}
Row容器
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.SpaceAround)
.width('100%')
.height('100%')
}
}
- SpaceEvenly：元素在主軸方向等間距布局，無論是相鄰元素還是邊界元素到容器的間距都一樣。
Column容器
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.SpaceEvenly)
.width('100%')
.height('100%')
}
}
Row容器
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.justifyContent(FlexAlign.SpaceEvenly)
.width('100%')
.height('100%')
}
}
2.交叉軸方向的對齊（alignItems）
子組件在交叉軸方向上的對齊方式使用alignItems屬性來設(shè)置。
Column容器的主軸是垂直方向，交叉軸是水平方向，其參數(shù)類型為HorizontalAlign（水平對齊），HorizontalAlign定義了以下幾種類型：
- Start：設(shè)置子組件在水平方向上按照起始端對齊。
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.alignItems(HorizontalAlign.Start)
.width('100%')
.height('100%')
}
}
- Center（默認(rèn)值）：設(shè)置子組件在水平方向上居中對齊。
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.alignItems(HorizontalAlign.Center)
.width('100%')
.height('100%')
}
}
- End：設(shè)置子組件在水平方向上按照末端對齊。
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.alignItems(HorizontalAlign.End)
.width('100%')
.height('100%')
}
}
Row容器的主軸是水平方向，交叉軸是垂直方向，其參數(shù)類型為VerticalAlign（垂直對齊），VerticalAlign定義了以下幾種類型：
- Top：設(shè)置子組件在垂直方向上居頂部對齊。
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.alignItems(VerticalAlign.Top)
.width('100%')
.height('100%')
}
}
- Center（默認(rèn)值）：設(shè)置子組件在豎直方向上居中對齊。
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.alignItems(VerticalAlign.Center)
.width('100%')
.height('100%')
}
}
- Bottom：設(shè)置子組件在豎直方向上居底部對齊。
@Entry
@Component
struct Index {
@State message: string = 'Hi'
build() {
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.alignItems(VerticalAlign.Bottom)
.width('100%')
.height('100%')
}
}
接口介紹
接下來，我們介紹Column和Row容器的接口。
| 容器組件 | 接口 |
|---|---|
| Column | Column(value?:{space?: string number}) |
| Row | Row(value?:{space?: string number}) |
Column和Row容器的接口都有一個可選參數(shù)space，表示子組件在主軸方向上的間距。
效果如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-789277.html
3 參考鏈接
Column組件的相關(guān)API參考：Column組件。
Row組件的相關(guān)API參考：Row組件。文章來源地址http://www.zghlxwxcb.cn/news/detail-789277.html
到了這里，關(guān)于Harmony之學(xué)習(xí)Column&Row組件的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
