鴻蒙HarmonyOS實戰-ArkUI元件（GridRow/GridCol）

蜀道山QAQ發表於2024-03-26
鴻蒙UI元件

🚀一、GridRow/GridCol

🔎1.概述

柵格佈局是一種通用的輔助定位工具，可以幫助開發人員解決多尺寸多裝置的動態佈局問題。透過將頁面劃分為等寬的列數和行數，柵格佈局提供了可循的規律性結構，方便開發人員對頁面元素進行定位和排版。

此外，柵格佈局還提供了一種統一的定位標註，幫助保證不同裝置上各個模組的佈局一致性，減少設計和開發的複雜度，提高工作效率。柵格佈局還具有靈活的間距調整方法，可以滿足特殊場景佈局調整的需求。

同時，自動換行和自適應功能使得柵格佈局能夠完成一對多佈局，並自動適應不同裝置上的排版。在柵格佈局中，柵格容器元件GridRow與柵格子元件GridCol需要聯合使用，共同構建出柵格佈局場景。

更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

🔎2.柵格容器GridRow

🦋2.1 柵格系統斷點

image

在GridRow柵格元件中，開發者可以使用breakpoints自定義修改斷點的取值範圍，最多支援6個斷點。除了預設的四個斷點以外，還可以啟用xl，xxl兩個斷點，支援六種不同尺寸（xs, sm, md, lg, xl, xxl）裝置的佈局設定。

定於如下：

breakpoints: {
  value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
  reference: BreakpointsReference.WindowSize
}

案例如下：

@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  build() {
    GridRow({
      breakpoints: {
        value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
        reference: BreakpointsReference.WindowSize //斷點切換參考物
      }
    }) {
      ForEach(this.bgColors, (color, index) => {
        GridCol({
          span: {
            xs: 2, // 在最小寬度型別裝置上，柵格子元件佔據的柵格容器2列。
            sm: 3, // 在小寬度型別裝置上，柵格子元件佔據的柵格容器3列。
            md: 4, // 在中等寬度型別裝置上，柵格子元件佔據的柵格容器4列。
            lg: 6, // 在大寬度型別裝置上，柵格子元件佔據的柵格容器6列。
            xl: 8, // 在特大寬度型別裝置上，柵格子元件佔據的柵格容器8列。
            xxl: 12 // 在超大寬度型別裝置上，柵格子元件佔據的柵格容器12列。
          }
        }) {
          Row() {
            Text(`${index}`)
          }.width("100%").height('50vp')
        }.backgroundColor(color)
      })
    }
  }
}

image

🦋2.2 佈局的總列數

柵格佈局的列數是指將頁面寬度分為多少等分，一般情況下柵格佈局的列數為12列，即將頁面寬度分為12等分，每列所佔寬度相等。這樣可以方便地將頁面元素放置到網格系統中，達到快速搭建頁面的目的。同時，柵格佈局的列數也可以根據具體的需求進行調整，並不一定非要是12列。

更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

1、預設列數

columns預設值為12，即在未設定columns時，任何斷點下，柵格佈局被分成12列。

@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  build() {
    GridRow() {
      ForEach(this.bgColors, (item, index) => {
        GridCol() {
          Row() {
            Text(`${index + 1}`)
          }.width('100%').height('50')
        }.backgroundColor(item)
      })
    }
  }
}

image

2、設定列數

當columns為自定義值，柵格佈局在任何尺寸裝置下都被分為columns列。

@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  @State currentBp: string = 'unknown';
  build() {
    Row() {
      GridRow({ columns: 4 }) {
        ForEach(this.bgColors, (item, index) => {
          GridCol() {
            Row() {
              Text(`${index + 1}`)
            }.width('100%').height('50')
          }.backgroundColor(item)
        })
      }
      .width('100%').height('100%')
      .onBreakpointChange((breakpoint) => {
        this.currentBp = breakpoint
      })
    }
    .height(160)
    .border({ color: Color.Blue, width: 2 })
    .width('100%')
  }
}

image

3、公用

@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  @State currentBp: string = 'unknown';
  build() {
    GridRow({ columns: { sm: 4, md: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } }) {
      ForEach(this.bgColors, (item, index) => {
        GridCol() {
          Row() {
            Text(`${index + 1}`)
          }.width('100%').height('50')
        }.backgroundColor(item)
      })
    }
  }
}

image

若只設定sm, md的柵格總列數，則較小的尺寸使用預設columns值12，較大的尺寸使用前一個尺寸的columns。這裡只設定sm:4, md:8，則較小尺寸的xs:12，較大尺寸的參照md的設定，lg:8, xl:8, xxl:8。

🦋2.3 排列方向

可以透過設定GridRow的direction屬性來指定柵格子元件在柵格容器中的排列方向。

該屬性可以設定為

  • GridRowDirection.Row（從左往右排列）
  • GridRowDirection.RowReverse（從右往左排列）
@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  @State currentBp: string = 'unknown';
  build() {
    GridRow({ columns: { sm: 4, md: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } ,direction: GridRowDirection.RowReverse}) {
      ForEach(this.bgColors, (item, index) => {
        GridCol() {
          Row() {
            Text(`${index + 1}`)
          }.width('100%').height('50')
        }.backgroundColor(item)
      })
    }
  }
}

image

🦋2.4 子元件間距

可以透過設定GridRow的gutter屬性來指定柵格子元件在柵格容器中的排列方向。

更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

該屬性可以設定為

  • 單個值GridRow({ gutter: 10 }){}（X：10，Y：10）
  • 多個值GridRow({ gutter: { x: 20, y: 50 } }){}（X：20，Y：50）
@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  @State currentBp: string = 'unknown';
  build() {
    GridRow({ columns: { sm: 4}, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } ,direction: GridRowDirection.RowReverse,gutter: { x: 20, y: 50 }}) {
      ForEach(this.bgColors, (item, index) => {
        GridCol() {
          Row() {
            Text(`${index + 1}`)
          }.width('100%').height('50')
        }.backgroundColor(item)
      })
    }
  }
}

image

🔎3.子元件GridCol

GridCol元件作為GridRow元件的子元件，透過給GridCol傳參或者設定屬性兩種方式，設定span（佔用列數），offset（偏移列數），order（元素序號）的值。

設定span。

GridCol({ span: 2 }){}
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.span(2)
GridCol(){}.span({ xs: 1, sm: 2, md: 3, lg: 4 })

設定offset。

GridCol({ offset: 2 }){}
GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){}
GridCol(){}.offset(2)
GridCol(){}.offset({ xs: 1, sm: 2, md: 3, lg: 4 })

設定order。

GridCol({ order: 2 }){}
GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.order(2)
GridCol(){}.order({ xs: 1, sm: 2, md: 3, lg: 4 })

🦋3.1 span

在柵格佈局中，span屬性表示某個元素或元件應該跨越的列數。例如，如果我們有一個包含12個列的柵格系統，我們可以使用span屬性來指定一個元素應該佔用多少列。

例如，如果我們希望一個元素佔用3列，我們可以使用{ span: 3 }，這將使元素跨越3列。同樣，如果我們希望元素跨越整個柵格系統，我們可以使用{ span: 12 }。

在具體的程式碼實現中，不同的柵格系統可能會使用不同的方式實現span屬性，但通常都會提供類似於{ span: 3 }的語法來指定元素所佔據的列數。

更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

1、當型別為number時，子元件在所有尺寸裝置下佔用的列數相同。

@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  @State currentBp: string = 'unknown';
  build() {
    GridRow({ columns: 8 }) {
      ForEach(this.bgColors, (color, index) => {
        GridCol({ span: 2 }) {
          Row() {
            Text(`${index}`)
          }.width('100%').height('50vp')
        }
        .backgroundColor(color)
      })
    }
  }
}

image

2、當型別為GridColColumnOption時，支援六種不同尺寸（xs, sm, md, lg, xl, xxl）裝置中子元件所佔列數設定,各個尺寸下數值可不同。

@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow({ columns: 8 }) {
  ForEach(this.bgColors, (color, index) => {
    GridCol({ span: { xs: 3, sm: 3, md: 3, lg: 3 } }) {      
      Row() {
        Text(`${index}`)
      }.width('100%').height('50vp')          
    }
    .backgroundColor(color)
  })
}

image

🦋3.2 offset

柵格佈局的offset是指在柵格佈局中，元素相對於其父元素的偏移量。使用offset可以將元素移動到柵格中的任意位置。在柵格佈局中，通常使用偏移量來實現佈局的靈活和自適應性。具體的偏移量取決於柵格的列數和元素所佔的列數。通常，一般情況下，偏移量是透過給元素新增相應的類來實現的，例如：{ offset: 3 }表示元素在中等螢幕上向右偏移3個柵格。

1、當型別為number時，子元件偏移相同列數

@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  @State currentBp: string = 'unknown';
  build() {
    GridRow({ columns: 8 }) {
      ForEach(this.bgColors, (color, index) => {
        GridCol({ offset: 2 }) {
          Row() {
            Text(`${index}`)
          }.width('100%').height('50vp')
        }
        .backgroundColor(color)
      })
    }
  }
}

image

2、當型別為GridColColumnOption時，支援六種不同尺寸（xs, sm, md, lg, xl, xxl）裝置中子元件所佔列數設定,各個尺寸下數值可不同

@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  @State currentBp: string = 'unknown';
  build() {
    GridRow({ columns: 8 }) {
      ForEach(this.bgColors, (color, index) => {
        GridCol({ offset: { xs: 1, sm: 3, md: 2, lg: 4 } }) {
          Row() {
            Text(`${index}`)
          }.width('100%').height('50vp')
        }
        .backgroundColor(color)
      })
    }
  }
}

image

🦋3.3 order

柵格佈局中，order屬性用於指定網格項的顯示順序。預設情況下，網格項的顯示順序是按照它們在 HTML 程式碼中出現的順序進行排列。透過設定 order 屬性，可以改變網格項的顯示順序。

order 屬性的值是一個整數，表示網格項的顯示順序。值越小的網格項越先顯示，值相同的網格項按照它們在 HTML 程式碼中的順序進行排列。若未設定該屬性，則預設值為 0。

更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

1、當型別為number時，子元件在任何尺寸下排序次序一致。

@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  @State currentBp: string = 'unknown';
  build() {
    GridRow() {
      GridCol({ order: 4 }) {
        Row() {
          Text('1')
        }.width('100%').height('50vp')
      }.backgroundColor(Color.Red)
      GridCol({ order: 3 }) {
        Row() {
          Text('2')
        }.width('100%').height('50vp')
      }.backgroundColor(Color.Orange)
      GridCol({ order: 2 }) {
        Row() {
          Text('3')
        }.width('100%').height('50vp')
      }.backgroundColor(Color.Yellow)
      GridCol({ order: 1 }) {
        Row() {
          Text('4')
        }.width('100%').height('50vp')
      }.backgroundColor(Color.Green)
    }
  }
}

image

2、當型別為GridColColumnOption時，支援六種不同尺寸（xs, sm, md, lg, xl, xxl）裝置中子元件排序次序設定。在xs裝置中，子元件排列順序為1234；sm為2341，md為3412，lg為2431。

@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  @State currentBp: string = 'unknown';
  build() {
    GridRow() {
      GridCol({ order: { xs:1, sm:5, md:3, lg:7}}) {
        Row() {
          Text('1')
        }.width('100%').height('50vp')
      }.backgroundColor(Color.Red)
      GridCol({ order: { xs:2, sm:2, md:6, lg:1} }) {
        Row() {
          Text('2')
        }.width('100%').height('50vp')
      }.backgroundColor(Color.Orange)
      GridCol({ order: { xs:3, sm:3, md:1, lg:6} }) {
        Row() {
          Text('3')
        }.width('100%').height('50vp')
      }.backgroundColor(Color.Yellow)
      GridCol({ order: { xs:4, sm:4, md:2, lg:5} }) {
        Row() {
          Text('4')
        }.width('100%').height('50vp')
      }.backgroundColor(Color.Green)
    }
  }
}

image

🔎4.柵格元件的巢狀使用

@Entry
@Component
struct Index {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
  @State currentBp: string = 'unknown';
  build() {
    GridRow() {
      GridCol({ span: { sm: 12 } }) {
        GridRow() {
          GridCol({ span: { sm: 2 } }) {
            Row() {
              Text('left').fontSize(24)
            }
            .justifyContent(FlexAlign.Center)
            .height('90%')
          }.backgroundColor('#ff41dbaa')

          GridCol({ span: { sm: 10 } }) {
            Row() {
              Text('right').fontSize(24)
            }
            .justifyContent(FlexAlign.Center)
            .height('90%')
          }.backgroundColor('#ff4168db')
        }
        .backgroundColor('#19000000')
        .height('100%')
      }

      GridCol({ span: { sm: 12 } }) {
        Row() {
          Text('footer').width('100%').textAlign(TextAlign.Center)
        }.width('100%').height('10%').backgroundColor(Color.Pink)
      }
    }.width('100%').height(300)
  }
}

image

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章