网格容器,由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局。包含GridItem子组件。
网格容器中单项内容容器。
设置当前网格布局列的数量,不设置时默认1列。 例如, ‘1fr 1fr 2fr’ 是将父组件分3列,将父组件允许的宽分为4等份,第一列占1份,第二列占1份,第三列占2份。 注意: 设置为’0fr’时,该列的列宽为0,不显示GridItem。设置为其他非法值时,GridItem显示为固定1列。
/**
* @Author: 若城
* @Description:
*/
@Entry
@Component
struct Grid_GridItem_Note {
private gridItemData:string[]=['1','2','3','4']
build() {
Column({space:5}) {
Grid(){
ForEach(this.gridItemData, (item)=>{
GridItem(){
Text(item).fontSize(20).backgroundColor('#e5e5e5')
.width('100%').height(50)
}
.borderWidth({
left:0,
right:2,
bottom:0,
top:0
})
})
}.columnsTemplate('1fr 2fr 3fr 4fr')
}
.width('100%')
}
}
设置当前网格布局行的数量,不设置时默认1行。 例如,'1fr 1fr 2fr’是将父组件分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。 注意: 设置为’0fr’,则这一行的行宽为0,这一行GridItem不显示。设置为其他非法值,按固定1行处理。
Grid(){
ForEach(this.gridItemData, (item)=>{
GridItem(){
Text(item)
.fontSize(20)
.backgroundColor('#e4e4e4')
.height('100%')
.width(50)
}.borderWidth({
left:1,
right:2,
bottom:1,
top:1
})
})
}.rowsTemplate('1fr 2fr 3fr 4fr')
| rowsGap
columnsGap | |
Grid组件根据rowsTemplate、columnsTemplate属性的设置情况,可分为以下三种布局模式: