鴻蒙ArkTS聲明式開發(fā)：跨平臺支持列表【柵格設(shè)置】通用屬性

柵格設(shè)置

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
柵格布局的列寬、列間距由距離最近的GridContainer父組件決定。使用柵格屬性的組件樹上至少需要有1個(gè)GridContainer容器組件。

gridSpan、gridOffset屬性調(diào)用時(shí)其父組件或祖先組件必須是GridContainer。

屬性

名稱	參數(shù)類型	描述
gridSpan	number	默認(rèn)占用列數(shù)，指useSizeType屬性沒有設(shè)置對應(yīng)尺寸的列數(shù)(span)時(shí)，占用的柵格列數(shù)。說明：設(shè)置了柵格span屬性，組件的寬度由柵格布局決定。默認(rèn)值：1
gridOffset	number	默認(rèn)偏移列數(shù)，指useSizeType屬性沒有設(shè)置對應(yīng)尺寸的偏移(offset)時(shí)，當(dāng)前組件沿著父組件Start方向，偏移的列數(shù)，也就是當(dāng)前組件位于第n列。說明：- 配置該屬性后，當(dāng)前組件在父組件水平方向的布局不再跟隨父組件原有的布局方式，而是沿著父組件的Start方向偏移一定位移。 - 偏移位移 = （列寬 + 間距）* 列數(shù)。 - 設(shè)置了偏移(gridOffset)的組件之后的兄弟組件會根據(jù)該組件進(jìn)行相對布局，類似相對布局。默認(rèn)值：0

示例

// xxx.ets
@Entry
@Component
struct GridContainerExample1 {
  build() {
    Column() {
      // 單獨(dú)設(shè)置組件的span和offset,在sm尺寸大小的設(shè)備上使用useSizeType中sm的數(shù)據(jù)實(shí)現(xiàn)一樣的效果
      Text('gridSpan,gridOffset').fontSize(15).fontColor(0xCCCCCC).width('90%')
      GridContainer() {
        Row() {
          Row() {
            Text('Left').fontSize(25)
          }
          .gridSpan(1)
          .height("100%")
          .backgroundColor(0x66bbb2cb)

          Row() {
            Text('Center').fontSize(25)
          }
          .gridSpan(2)
          .gridOffset(1)
          .height("100%")
          .backgroundColor(0x66b6c5d1)

          Row() {
            Text('Right').fontSize(25)
          }
          .gridSpan(1)
          .gridOffset(3)
          .height("100%")
          .backgroundColor(0x66bbb2cb)
        }.height(200)
      }
    }
  }
}

圖1 設(shè)備寬度為SM

zh-cn_image_0000001174582872

圖2 設(shè)備寬度為MD

zh-cn_image_0000001219744207

圖3 設(shè)備寬度為LG

zh-cn_image_0000001219982727

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。舉報(bào)投訴