柵格設置

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

• 從API Version 7開始支持。后續(xù)版本如有新增內容，則采用上角標單獨標記該內容的起始版本。
• 柵格布局的列寬、列間距由距離最近的GridContainer父組件決定。使用柵格屬性的組件樹上至少需要有1個GridContainer容器組件。

• gridSpan、gridOffset屬性調用時其父組件或祖先組件必須是GridContainer。
  

屬性

示例

// xxx.ets
@Entry
@Component
struct GridContainerExample1 {
  build() {
    Column() {
      // 單獨設置組件的span和offset,在sm尺寸大小的設備上使用useSizeType中sm的數據實現一樣的效果
      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 設備寬度為SM

圖2 設備寬度為MD

圖3 設備寬度為LG

審核編輯 黃宇