鴻蒙開(kāi)發(fā)-UI-布局

鴻蒙開(kāi)發(fā)-UI-布局-線性布局

鴻蒙開(kāi)發(fā)-UI-布局-層疊布局

鴻蒙開(kāi)發(fā)-UI-布局-彈性布局

鴻蒙開(kāi)發(fā)-UI-布局-相對(duì)布局

前言

上文詳細(xì)學(xué)習(xí)常見(jiàn)布局方式-相對(duì)布局，學(xué)習(xí)相對(duì)布局中錨點(diǎn)以及對(duì)齊方式的知識(shí)，本文將學(xué)習(xí)格柵布局的相關(guān)知識(shí)。

一、基本概念

1.為布局提供規(guī)律性結(jié)構(gòu)，解決多尺寸多設(shè)備動(dòng)態(tài)布局問(wèn)題，通過(guò)將頁(yè)面劃分為等寬的列數(shù)和行數(shù)，方便對(duì)頁(yè)面元素定位排版

2.為系統(tǒng)提供統(tǒng)一定位標(biāo)注，保證不同設(shè)備上各個(gè)模塊布局一致性

3.提供靈活的間距調(diào)整方法，通過(guò)調(diào)整列與列之間，行與行之間間距來(lái)控制頁(yè)面排版

4.提供一對(duì)多布局的自動(dòng)換行和自適應(yīng)

二、格柵容器組件

1.柵格系統(tǒng)斷點(diǎn)

格柵系統(tǒng)以設(shè)備的水平寬度（單位vp）作為斷點(diǎn)依據(jù)，定義設(shè)備的寬度類型，形成了一套斷點(diǎn)規(guī)則，開(kāi)發(fā)者可根據(jù)需求在不同的斷點(diǎn)區(qū)間實(shí)現(xiàn)不同的頁(yè)面布局效果

vp：?一種屏幕密度相關(guān)像素單位，鴻蒙開(kāi)發(fā)采用vp為基準(zhǔn)數(shù)據(jù)單位，根據(jù)屏幕像素密度轉(zhuǎn)換為屏幕物理像素，當(dāng)數(shù)值不帶單位時(shí)，默認(rèn)單位vp。在實(shí)際寬度為1440物理像素的屏幕上，1vp約等于3px

柵格系統(tǒng)默認(rèn)斷點(diǎn)將設(shè)備寬度分為xs、sm、md、lg四類，尺寸范圍如下

在GridRow柵格組件中，允許開(kāi)發(fā)者使用breakpoints自定義修改斷點(diǎn)的取值范圍，最多支持6個(gè)斷點(diǎn)，除了默認(rèn)的四個(gè)斷點(diǎn)外，還可以啟用xl，xxl兩個(gè)斷點(diǎn)，支持六種不同尺寸（xs, sm, md, lg, xl, xxl）設(shè)備的布局設(shè)置。

2.布局的總列數(shù)

GridRow中通過(guò)columns設(shè)置柵格布局的總列數(shù)，

1. 默認(rèn)值為12，即在未設(shè)置columns時(shí)，任何斷點(diǎn)下，柵格布局被分成12列

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

2. 當(dāng)columns為自定義值，柵格布局在任何尺寸設(shè)備下都被分為columns列，如下面代碼被分成4列，每個(gè)子元素默認(rèn)占用一列

@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];

GridRow({ columns: 4 }) {
    ForEach(this.bgColors, (item, index) => {
      GridCol() {
        Row() {
          Text(`${index + 1}`)
        }.width('100%').height('50')
      }.backgroundColor(item)
    })
  }
  .width('100%').height('100%')

3.當(dāng)columns類型為GridRowColumnOption時(shí)，支持下面六種不同尺寸（xs, sm, md, lg, xl, xxl）設(shè)備的總列數(shù)設(shè)置，各個(gè)尺寸下數(shù)值可不同

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

如代碼所示，只設(shè)置sm, md的柵格總列數(shù)（sm:4, md:8），則較小的尺寸使用默認(rèn)columns值12，較大的尺寸使用前一個(gè)尺寸的columns。故較小尺寸的xs:12，較大尺寸的參照md的設(shè)置，lg:8, xl:8, xxl:8

3.排列方向

柵格布局中，通過(guò)設(shè)置GridRow的direction屬性來(lái)指定柵格子組件在柵格容器中的排列方向。該屬性可以設(shè)置為GridRowDirection.Row（從左往右排列）或GridRowDirection.RowReverse（從右往左排列）

子組件從左往右排列

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

子組件從右往左排列

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

4.子組件間距

GridRow中通過(guò)gutter屬性設(shè)置子元素在水平和垂直方向的間距

1.當(dāng)gutter類型為number時(shí)，同時(shí)設(shè)置柵格子組件間水平和垂直方向邊距且相等，下面代碼設(shè)置子組件水平垂直方向距離相鄰元素都是10

 GridRow({ gutter: 10 }){}

2.當(dāng)gutter類型為GutterOption時(shí)，單獨(dú)設(shè)置柵格子組件水平垂直邊距，x屬性為水平方向間距，y為垂直方向間距，下面代碼設(shè)置子組件水平方向相鄰元素距離20，垂直方向相鄰元素距離50

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

三、格柵容器子組件

GridCol組件作為GridRow組件的子組件，通過(guò)給GridCol傳參或者設(shè)置屬性兩種方式，設(shè)置span（占用列數(shù)），offset（偏移列數(shù)），order（元素序號(hào)）的值

1.span

子組件占柵格布局的列數(shù)，決定了子組件的寬度，默認(rèn)為1

1.當(dāng)類型為number時(shí)，子組件在所有尺寸設(shè)備下占用的列數(shù)相同

@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: 2 }) {      
      Row() {
        Text(`${index}`)
      }.width('100%').height('50vp')          
    }
    .backgroundColor(color)
  })
}                

GridRow({ columns: 8 })：柵格組件定義8列

GridCol({ span: 2 })：柵格子組件定義一個(gè)子組件占用兩列

如下圖下圖顯示，4個(gè)柵格子組件占用8列，顯示在一行

2.當(dāng)類型為GridColColumnOption時(shí)，支持六種不同尺寸（xs, sm, md, lg, xl, xxl）設(shè)備中子組件所占列數(shù)設(shè)置,各個(gè)尺寸下數(shù)值可不同

@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: 1, sm: 2, md: 3, lg: 4 } }) {      
      Row() {
        Text(`${index}`)
      }.width('100%').height('50vp')          
    }
    .backgroundColor(color)
  })
}                

2.offset

柵格子組件相對(duì)于前一個(gè)子組件的偏移列數(shù)，默認(rèn)為0

1.當(dāng)類型為number時(shí)，子組件偏移相同列數(shù)

@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow() {
  ForEach(this.bgColors, (color, index) => {
    GridCol({ offset: 2 }) {      
      Row() {
        Text('' + index)
      }.width('100%').height('50vp')          
    }
    .backgroundColor(color)
  })
}                

GridRow()：柵格組件默認(rèn)12列

GridCol({ offset: 2 })：柵格子組件默認(rèn)每個(gè)占用一列，offset：2定義子組件偏移2列

如下圖下圖顯示，4個(gè)柵格子組件占用12列，每?jī)蓚€(gè)子組件隔2列

2.當(dāng)類型為GridColColumnOption時(shí)，支持六種不同尺寸（xs, sm, md, lg, xl, xxl）設(shè)備中子組件所占列數(shù)設(shè)置,各個(gè)尺寸下數(shù)值可不同

@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...

GridRow() {
  ForEach(this.bgColors, (color, index) => {
    GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } }) {      
      Row() {
        Text('' + index)
      }.width('100%').height('50vp')          
    }
    .backgroundColor(color)
  })
}                 

3.order

柵格子組件的序號(hào)，決定子組件排列次序。當(dāng)子組件不設(shè)置order或者設(shè)置相同的order, 子組件按照代碼順序展示。當(dāng)子組件設(shè)置不同的order時(shí)，order較小的組件在前，較大的在后。當(dāng)子組件部分設(shè)置order，部分不設(shè)置order時(shí)，未設(shè)置order的子組件依次排序靠前，設(shè)置了order的子組件按照數(shù)值從小到大排列。

1.當(dāng)類型為number時(shí)，子組件在任何尺寸下排序次序一致

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

GridRow()：柵格組件默認(rèn)12列

GridCol({ order: X?})：定義4個(gè)柵格子組件，Text(4)所在的GridCol定義order為1最小，應(yīng)該排最前面，Text1所在的GridCol定義order為4最大，應(yīng)該排最后，如下圖所示

2.當(dāng)類型為GridColColumnOption時(shí)，支持六種不同尺寸（xs, sm, md, lg, xl, xxl）設(shè)備中子組件排序次序設(shè)置

四、使用場(chǎng)景

柵格組件也可以嵌套使用，完成一些復(fù)雜的布局，以下示例中，柵格把整個(gè)空間分為12份。第一層GridRow嵌套GridCol，分為中間大區(qū)域以及“footer”區(qū)域。第二層GridRow嵌套GridCol，分為“l(fā)eft”和“right”區(qū)域。子組件空間按照上一層父組件的空間劃分，粉色的區(qū)域是屏幕空間的12列，綠色和藍(lán)色的區(qū)域是父組件GridCol的12列，依次進(jìn)行空間的劃分

@Entry
@Component
struct GridRowExample {
  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)
  }
}

總結(jié)

本文詳細(xì)學(xué)習(xí)常見(jiàn)布局方式-柵格布局，學(xué)習(xí)柵格布局中列數(shù)控制，子組件的排列方向已經(jīng)間距控制，也學(xué)習(xí)了柵格容器子組件占用列數(shù)以及偏移和順序的定義方式。下文將如何創(chuàng)建List。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-829414.html

到了這里，關(guān)于鴻蒙開(kāi)發(fā)-UI-布局-柵格布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！