HarmonyOS應用開發(fā)學習筆記 UI布局學習 相對布局 （RelativeContainer）

官方文檔：柵格布局（GridRow/GridCol）

一、代碼示例

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('90%')
Row() {
  GridRow({ columns: 8 }) {
    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('90%')

二、常用屬性

1、排列方向

• 通過設置GridRow的direction屬性來指定柵格子組件在柵格容器中的排列方向

• 左往右排列

//子組件默認從左往右排列
GridRow({ direction: GridRowDirection.Row }){}

• 子組件從右往左排列

GridRow({ direction: GridRowDirection.RowReverse }){}

2、子組件間距

當gutter類型為number時，同時設置柵格子組件間水平和垂直方向邊距且相等。下例中，設置子組件水平與垂直方向距離相鄰元素的間距為10。

• 垂直和水平間距都為10

 GridRow({ gutter: 10 }){}

• x屬性為水平方向間距，y為垂直方向間距

GridRow({ gutter: { x: 20, y: 50 } }){}

3、子組件GridCol

• 通過給GridCol傳參或者設置屬性兩種方式

設置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 })

三、不同尺寸的適配

GridRow為柵格容器組件，需與柵格子組件GridCol在柵格布局場景中聯合使用。
柵格系統(tǒng)默認斷點將設備寬度分為xs、sm、md、lg四類，尺寸范圍如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-780311.html

• 例如，使用柵格的默認列數12列，通過斷點設置將應用寬度分成六個區(qū)間，在各區(qū)間中，每個柵格子元素占用的列數均不同。

@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
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)
   })
}                                                                     

到了這里，關于HarmonyOS應用開發(fā)學習筆記 UI布局學習 柵格布局（GridRow/GridCol）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！