OpenHarmony—Flex和Grid布局
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
Flex布局
概述
Flex布局是很常用也是很方便的一種布局模式，此種布局方式已經(jīng)廣泛使用在前端、小程序開發(fā)之中，如果之前已經(jīng)學(xué)習(xí)過 Flex 布局，那么在 Openharmony 中也是大同小異的。
用法
容器的常用參數(shù):
- direction：子組件在Flex容器上排列的方向，即主軸的方向。
- wrap：Flex容器是單行/列還是多行/列排列。
- justifyContent：子組件在Flex容器主軸上的對齊格式。
- alignItems：子組件在Flex容器交叉軸上的對齊格式。
- alignContent：交叉軸中有額外的空間時(shí)，多行內(nèi)容的對齊方式。僅在wrap為Wrap或WrapReverse下生效。
- 子組件常用屬性(不是所有屬性)
- flexGrow： Flex容器的剩余空間分配給給此屬性所在的組件的比例。
簡單的使用
Flex布局的屬性有很多，但是最常用的還是讓子組件垂直水平居中，兩條屬性即可保證子組件垂直水平居中：
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Text('水平垂直居中顯示').fontSize(18)
}.width('100%').height('100%')
Flex也可用于很多常見布局場景，如下圖效果：
利用direction屬性和flexGrow配合即可輕松達(dá)到上面的布局效果，核心代碼段如下：
Flex({ direction: FlexDirection.Column }) {
Column() {
ForEach(this.ListData, (item)=>{
Text(item).fontSize(18).height(100).width('100%').margin({bottom: 5}).backgroundColor('#575da8')
}, item => item)
}.flexGrow(1).backgroundColor('#08ec89').margin({ bottom: 2 }).padding(10)
Flex({ alignItems: ItemAlign.Center }) {
ForEach(this.navData, (item )=>{
Text(item).fontSize(18).height('100%').flexGrow(1).textAlign(TextAlign.Center).backgroundColor("#18ec08").margin(1)
}, item => item)
}.height(64)
}.width('100%').height('100%')
Flex還有一個(gè)常用的屬性是wrap，可以去配置換行，不過如果是多行建議還是使用Grid布局，更加靈活，下面看看Grid布局。
Grid布局
概述
Grid做前端的同學(xué)應(yīng)該都很熟悉了，翻譯成中文為“柵格” ， 它將頁面劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。
用法
基本概念:
網(wǎng)格布局的區(qū)域，稱為“容器”，容器內(nèi)部采用網(wǎng)格定位的子元素，稱為"項(xiàng)目"。項(xiàng)目必須使用Grid子組件GridItem子組件包裹，即Grid的子組件必須是GridItem。
容器屬性:
- columnsTemplate 和 rowsTemplate ：
這兩個(gè)屬性用于設(shè)置當(dāng)前網(wǎng)格布局的行和列的數(shù)量，不設(shè)置時(shí)默認(rèn)1列行或者1列。可以采用fr關(guān)鍵字表示各行和列的比例關(guān)系, 以列為例：‘1fr 1fr 2fr’ 將父組件等分為4等份，第一列第二列各占1份，第三列占兩份：
核心代碼如下：
@State Number: String[] = ['0', '1', '2']
build() {
Grid() {
ForEach(this.Number, (item: string) => {
ForEach(this.Number, (item: string) => {
GridItem() {
Text(item)
.fontSize(16)
.backgroundColor(Color.Grey)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}.borderWidth(1)
}, item => item)
}, item => item)
}
.columnsTemplate('1fr 1fr 2fr')
.rowsTemplate('1fr 1fr 2fr')
.backgroundColor(Color.Black)
.height(300)
}
這兩個(gè)屬性里面也可使用px單位，如將columnsTemplate修改：
.columnsTemplate('100px 1fr 1fr')
展示效果如下：
- columnsGap 和 rowsGap ：
這兩個(gè)屬性可以設(shè)置行列之間的間距，此處不在贅述。
- layoutDirection：
LayoutDirection.Row和LayoutDirection.Column ，不過嘗試過后兩種值的結(jié)果都是按列排布，默認(rèn)不給屬性的話是按行排布，這里應(yīng)是沒有完全支持
其他屬性:
看到文檔還提供了很多屬性，但目前嘗試過后沒有效果，未支持。
事件
onScrollIndex(first: number) => void
當(dāng)前列表顯示的起始位置發(fā)生變化會觸發(fā)這個(gè)事件，若要展示效果，則需使布局出現(xiàn)滾動條，可以去掉rowsTemplate屬性，然后在子組件內(nèi)部設(shè)置高度，然后再添加事件監(jiān)聽：
Grid() {
ForEach(this.Number, (item: string) => {
ForEach(this.Number, (item: string) => {
GridItem() {
Text(item)
.fontSize(16)
.backgroundColor(Color.Grey)
.width('100%')
.height(80)
.textAlign(TextAlign.Center)
}
}, item => item)
}, item => item)
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.onScrollIndex((first: number) => {
console.log(first.toString())
})
.backgroundColor(Color.Black)
.height(300)
總結(jié)
Grid布局與Flex有一定的相似性，都可以指定容器內(nèi)部多個(gè)項(xiàng)目的位置。但是，它們也存在重大區(qū)別。 Flex 布局是軸線布局，只能指定"項(xiàng)目"針對軸線的位置，可以看作是一維布局。Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局。其實(shí)掌握這兩種布局方式，頁面上面大部分效果都是可以做出來的。當(dāng)然，當(dāng)前Gird布局還有很多屬性是不支持的，相比較與傳統(tǒng)的前端grid布局功能上有很多不足，期待API更新，完善功能。
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
