柵格設(shè)置

2024-01-22 16:16 更新
說明

  • 從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

  • 柵格布局的列寬、列間距由距離最近的GridContainer父組件決定。使用柵格屬性的組件樹上至少需要有1個(gè)GridContainer容器組件。

屬性

名稱

參數(shù)類型

描述

useSizeType(deprecated)

{

xs?: number | { span: number, offset: number },

sm?: number | { span: number, offset: number },

md?: number | { span: number, offset: number },

lg?: number | { span: number, offset: number }

}

設(shè)置在特定設(shè)備寬度類型下的占用列數(shù)和偏移列數(shù)，span: 占用列數(shù); offset: 偏移列數(shù)。

當(dāng)值為number類型時(shí)，僅設(shè)置列數(shù)， 當(dāng)格式如{"span": 1, "offset": 0}時(shí)，指同時(shí)設(shè)置占用列數(shù)與偏移列數(shù)。

- xs: 指設(shè)備寬度類型為SizeType.XS時(shí)的占用列數(shù)和偏移列數(shù)。

- sm: 指設(shè)備寬度類型為SizeType.SM時(shí)的占用列數(shù)和偏移列數(shù)。

- md: 指設(shè)備寬度類型為SizeType.MD時(shí)的占用列數(shù)和偏移列數(shù)。

- lg: 指設(shè)備寬度類型為SizeType.LG時(shí)的占用列數(shù)和偏移列數(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

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct GridContainerExample1 {
  5.   build() {
  6.     Column() {
  7.       Text('useSizeType').fontSize(15).fontColor(0xCCCCCC).width('90%')
  8.       GridContainer() {
  9.         Row({}) {
  10.           Row() {
  11.             Text('Left').fontSize(25)
  12.           }
  13.           .useSizeType({
  14.             xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 },
  15.             md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 }
  16.           })
  17.           .height("100%")
  18.           .backgroundColor(0x66bbb2cb)
  19. 

  20.           Row() {
  21.             Text('Center').fontSize(25)
  22.           }
  23.           .useSizeType({
  24.             xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 },
  25.             md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
  26.           })
  27.           .height("100%")
  28.           .backgroundColor(0x66b6c5d1)
  29. 

  30.           Row() {
  31.             Text('Right').fontSize(25)
  32.           }
  33.           .useSizeType({
  34.             xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 },
  35.             md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 }
  36.           })
  37.           .height("100%")
  38.           .backgroundColor(0x66bbb2cb)
  39.         }
  40.         .height(200)
  41. 

  42.       }
  43.       .backgroundColor(0xf1f3f5)
  44.       .margin({ top: 10 })
  45. 

  46.       // 單獨(dú)設(shè)置組件的span和offset,在sm尺寸大小的設(shè)備上使用useSizeType中sm的數(shù)據(jù)實(shí)現(xiàn)一樣的效果
  47.       Text('gridSpan,gridOffset').fontSize(15).fontColor(0xCCCCCC).width('90%')
  48.       GridContainer() {
  49.         Row() {
  50.           Row() {
  51.             Text('Left').fontSize(25)
  52.           }
  53.           .gridSpan(1)
  54.           .height("100%")
  55.           .backgroundColor(0x66bbb2cb)
  56. 

  57.           Row() {
  58.             Text('Center').fontSize(25)
  59.           }
  60.           .gridSpan(2)
  61.           .gridOffset(1)
  62.           .height("100%")
  63.           .backgroundColor(0x66b6c5d1)
  64. 

  65.           Row() {
  66.             Text('Right').fontSize(25)
  67.           }
  68.           .gridSpan(1)
  69.           .gridOffset(3)
  70.           .height("100%")
  71.           .backgroundColor(0x66bbb2cb)
  72.         }.height(200)
  73.       }
  74.     }
  75.   }
  76. }

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

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

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

圖4 單獨(dú)設(shè)置gridSpan和gridOffset在特定屏幕大小下的效果與useSizeType效果一致

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號