How to use HarmonyOS NEXT - Grid Layout?

Grid layout is composed of cells separated by rows and columns, and various layouts are made by specifying the cells where the items are located. Grid layout has strong ability to evenly distribute pages and control the proportion of sub components, making it an important adaptive layout. Its usage scenarios include nine grid image display, calendar, calculator, etc. ArkUI provides Grid container components and sub components GridItem for building grid layouts. Grid is used to set parameters related to grid layout, and GridItem defines features related to sub components. The Grid component supports generating sub components using conditional rendering, loop rendering, lazy loading, and other methods. interface Grid(scroller?: Scroller, layoutOptions?: GridLayoutOptions) The Grid component can be divided into three layout scenarios based on the number of rows and columns and the proportion attribute settings: ·Simultaneously set the number and proportion of rows and columns: Grid only displays elements with a fixed number of rows and columns, and does not display other elements. Additionally, Grid cannot be scrolled. (Recommended to use this layout method) ·Only set one of the number and proportion of rows and columns: elements are arranged according to the set direction, and any excess elements can be displayed by scrolling. ·The number and proportion of rows and columns are not set: elements are arranged in the layout direction, and the number of rows and columns is determined by multiple attributes such as the layout direction and the width of a single grid. Elements beyond the capacity of rows and columns are not displayed, and the Grid cannot be scrolled. The overall arrangement of the grid layout can be determined by setting the number of rows and the proportion of sizes. The Grid component provides rowsTemplate and columnsTemplate properties for setting the number and size ratio of rows and columns in the grid layout. The rowsTemplate and columnsTemplate property values are a string composed of multiple spaces and 'numbers+fr' intervals concatenated together. The number of fr is the number of rows or columns in the grid layout, and the size of the value before fr is used to calculate the proportion of the row or column in the grid layout width, ultimately determining the width of the row or column. The horizontal spacing between two grid cells is called row spacing, and the vertical spacing between grids is called column spacing The row column spacing of the grid layout can be set through the rowsGap and columnsGap of Grid Code Example: GridPage @Entry @Component struct GridPage { @State message: string = 'GridPage'; @Styles gridItemStyle(){ .backgroundColor(Color.Orange) // .margin(4) } build() { Column() { Text(this.message) .fontSize(30) .fontWeight(FontWeight.Bold) Grid(){ GridItem(){ Text('1') }.gridItemStyle() GridItem(){ Text('2') }.gridItemStyle() GridItem(){ Text('3') }.gridItemStyle() GridItem(){ Text('4') }.gridItemStyle() GridItem(){ Text('5') }.gridItemStyle() GridItem(){ Text('6') }.gridItemStyle() GridItem(){ Text('7') }.gridItemStyle() GridItem(){ Text('8') }.gridItemStyle() GridItem(){ Text('9') }.gridItemStyle() } .size({width:300,height:300}) .rowsTemplate('1fr 1fr 1fr') .columnsTemplate('1fr 2fr 1fr') .backgroundColor('#EEEEEE') .padding(10) .columnsGap(10) .rowsGap(10) } .height('100%') .width('100%') } } performance optimization ·Similar to processing long lists, loop rendering is suitable for layout scenes with small amounts of data. When building a scrollable grid layout with a large number of grid items, it is recommended to use data lazy loading to iteratively load data on demand, thereby improving list performance. ·When using lazy loading to render a grid, in order to provide a better scrolling experience and reduce the occurrence of white blocks during sliding, the Grid component can also set the preloading quantity of GridItems through the cached count property, which only takes effect in lazy loading LazyForEach. ·After setting the preload quantity, several GridItems will be cached in the cached Count * columns before and after the Grid display area. GridItems that exceed the display and caching range will be released. Code Examples Grid() { LazyForEach(this.dataSource, () => { GridItem() { } }) } .cachedCount(3)

Mar 25, 2025 - 06:58

How to use HarmonyOS NEXT - Grid Layout?

Grid layout is composed of cells separated by rows and columns, and various layouts are made by specifying the cells where the items are located. Grid layout has strong ability to evenly distribute pages and control the proportion of sub components, making it an important adaptive layout. Its usage scenarios include nine grid image display, calendar, calculator, etc.

ArkUI provides Grid container components and sub components GridItem for building grid layouts. Grid is used to set parameters related to grid layout, and GridItem defines features related to sub components. The Grid component supports generating sub components using conditional rendering, loop rendering, lazy loading, and other methods.

interface

Grid(scroller?: Scroller, layoutOptions?: GridLayoutOptions)

The Grid component can be divided into three layout scenarios based on the number of rows and columns and the proportion attribute settings:
·Simultaneously set the number and proportion of rows and columns: Grid only displays elements with a fixed number of rows and columns, and does not display other elements. Additionally, Grid cannot be scrolled. (Recommended to use this layout method)
·Only set one of the number and proportion of rows and columns: elements are arranged according to the set direction, and any excess elements can be displayed by scrolling.
·The number and proportion of rows and columns are not set: elements are arranged in the layout direction, and the number of rows and columns is determined by multiple attributes such as the layout direction and the width of a single grid. Elements beyond the capacity of rows and columns are not displayed, and the Grid cannot be scrolled.

The overall arrangement of the grid layout can be determined by setting the number of rows and the proportion of sizes.
The Grid component provides rowsTemplate and columnsTemplate properties for setting the number and size ratio of rows and columns in the grid layout. The rowsTemplate and columnsTemplate property values are a string composed of multiple spaces and 'numbers+fr' intervals concatenated together. The number of fr is the number of rows or columns in the grid layout, and the size of the value before fr is used to calculate the proportion of the row or column in the grid layout width, ultimately determining the width of the row or column.

The horizontal spacing between two grid cells is called row spacing, and the vertical spacing between grids is called column spacing
The row column spacing of the grid layout can be set through the rowsGap and columnsGap of Grid

Code Example: GridPage

@Entry
@Component
struct GridPage {
  @State message: string = 'GridPage';

  @Styles gridItemStyle(){
    .backgroundColor(Color.Orange)
    // .margin(4)
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Grid(){
        GridItem(){
          Text('1')
        }.gridItemStyle()

        GridItem(){
          Text('2')
        }.gridItemStyle()

        GridItem(){
          Text('3')
        }.gridItemStyle()

        GridItem(){
          Text('4')
        }.gridItemStyle()

        GridItem(){
          Text('5')
        }.gridItemStyle()

        GridItem(){
          Text('6')
        }.gridItemStyle()

        GridItem(){
          Text('7')
        }.gridItemStyle()

        GridItem(){
          Text('8')
        }.gridItemStyle()

        GridItem(){
          Text('9')
        }.gridItemStyle()
      }
      .size({width:300,height:300})
      .rowsTemplate('1fr 1fr 1fr')
      .columnsTemplate('1fr 2fr 1fr')
      .backgroundColor('#EEEEEE')
      .padding(10)
      .columnsGap(10)
      .rowsGap(10)
    }
    .height('100%')
    .width('100%')
  }
}

performance optimization
·Similar to processing long lists, loop rendering is suitable for layout scenes with small amounts of data. When building a scrollable grid layout with a large number of grid items, it is recommended to use data lazy loading to iteratively load data on demand, thereby improving list performance.
·When using lazy loading to render a grid, in order to provide a better scrolling experience and reduce the occurrence of white blocks during sliding, the Grid component can also set the preloading quantity of GridItems through the cached count property, which only takes effect in lazy loading LazyForEach.
·After setting the preload quantity, several GridItems will be cached in the cached Count * columns before and after the Grid display area. GridItems that exceed the display and caching range will be released.

Code Examples

Grid() {
  LazyForEach(this.dataSource, () => {
    GridItem() {
    }
  })
}
.cachedCount(3)