《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識點2-12-2 網(wǎng)格容器組件Grid

網(wǎng)格容器組件GridGrid概述Grid網(wǎng)格容器，由“行”和“列”分割的單元格所組成，通過指定“項目”所在的單元格做出各種各樣的布局。如右圖所示。接口描述：Grid(scroller?:Scroller)Grid的屬性Grid除支持通用屬性外，還支持以下常用屬性:名稱參數(shù)類型描述columnsTemplatestring設(shè)置當(dāng)前網(wǎng)格布局列的數(shù)量，不設(shè)置時默認1列。例如,'1fr1fr2fr'是將父組件分3列，將父組件允許的寬分為4等份，第一列占1份，第二列占1份，第三列占2份。rowsTemplatestring設(shè)置當(dāng)前網(wǎng)格布局行的數(shù)量，不設(shè)置時默認1行。例如,'1fr1fr2fr'是將父組件分三行，將父組件允許的高分為4等份，第一行占1份，第二行占一份，第三行占2份。columnsGapLength設(shè)置列與列的間距。默認值：0rowsGapLength設(shè)置行與行的間距。默認值：0Grid的屬性Grid組件根據(jù)rowsTemplate、columnsTemplate屬性的設(shè)置情況，可分為以下三種布局模式：1.rowsTemplate、columnsTemplate同時設(shè)置：Grid只展示固定行列數(shù)的元素，其余元素不展示，且Grid不可滾動。例如rowsTemplate、columnsTemplate都設(shè)置為"1fr1fr"時，則僅展示兩行兩列，共4個元素，其他元素不展示。2.rowsTemplate、columnsTemplate僅設(shè)置其中的一個：元素按照設(shè)置的方向進行排布，超出的元素可通過滾動的方式展示。例如Grid有十個元素，且設(shè)置columnsTemplate為"1fr1fr1fr"，則Grid有三列，元素先填滿一行，再填充下一行。在Grid區(qū)域外的元素，可通過豎直方向的滾動，進行展示。3.rowsTemplate、columnsTemplate都不設(shè)置：元素在layoutDirection方向上排布，列數(shù)由Grid的寬度、首個元素的寬度、minCount、maxCount、columnsGap共同決定；行數(shù)由Grid高度、首個元素高度、cellLength、rowsGap共同決定。超出行列容納范圍的元素不顯示，也不能通過滾動進行展示。GridItem的屬性GridItem常用屬性:名稱參數(shù)類型描述rowStartnumber指定當(dāng)前元素起始行號。rowEndnumber指定當(dāng)前元素終點行號。columnStartnumber指定當(dāng)前元素起始列號。columnEndnumber指定當(dāng)前元素終點列號。Grid使用示例1arr:

String[]

=

['0',

'1',

'2',

'3',

'4']...Grid()

{

ForEach(this.arr,

(item:

string)

=>

{

ForEach(this.arr,

(item:

string)

=>

{

GridItem()

{

Text(day)

.fontSize(16)

.width('100%')

.height('100%')

.backgroundColor(0xF9CF93)

.textAlign(TextAlign.Center)

}

},

item

=>

item)

},

item

=>

item)}.columnsTemplate('1fr

1fr

1fr

1fr

1fr').rowsTemplate('1fr

1fr

1fr

1fr

1fr').columnsGap(10).rowsGap(10).width('90%').backgroundColor(0xFAEEE0).height(300)Grid使用示例2arr:

String[]

=

['0',

'1',

'2',

'3',

'4']...Grid()

{

GridItem()

{

Text('4')

.fontSize(16).width('100%').height('100%')

.backgroundColor(0xFAEEE0).textAlign(TextAlign.Center)

}.rowStart(1).rowEnd(4)

ForEach(this.arr,

(item)

=>

{

ForEach(this.arr,

(item)

=>

{

GridItem()

{

Text(item)

.fontSize(16).backgroundColor(0xF9CF93)

.width('100%').height('100%').textAlign(TextAlign.Center)

}.forceRebuild(false)

},

item

=>

item)

},

item

=>

item)

GridItem()

{

Text('5')

.fontSize(16).backgroundColor(0xDBD0C0)

.width('100%').height('100%').textAlign(TextAlign.Center)

}.columnStart(1).columnEnd(