GridCol

柵格子組件，必須作為柵格容器組件([GridRow])的子組件使用。

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 9開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

可以包含單個(gè)子組件。

接口

GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption})

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數(shù)：

說明：

span、offset、order屬性按照xs、sm、md、lg、xl、xxl的順序具有“繼承性”，未設(shè)置值的斷點(diǎn)將會(huì)從前一個(gè)斷點(diǎn)取值。

在不同寬度設(shè)備類型上的默認(rèn)值為：

參數(shù)斷點(diǎn)	xs	sm	md	lg	xl	xxl
span	2	2	3	3	4	4
offset	2	2	3	5	5	5
order	20	20	20	3	3	3

屬性

GridColColumnOption

用于自定義指定在不同寬度設(shè)備類型上，柵格子組件占據(jù)的柵格數(shù)量單位。

從API version 9開始，該接口支持在ArkTS卡片中使用。

示例

GridRow

柵格布局可以為布局提供規(guī)律性的結(jié)構(gòu)，解決多尺寸多設(shè)備的動(dòng)態(tài)布局問題，保證不同設(shè)備上各個(gè)模塊的布局一致性。

柵格容器組件，僅可以和柵格子組件([GridCol])在柵格布局場景中使用。

說明：

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

子組件

可以包含GridCol子組件。

接口

GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection})

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數(shù)：

GutterOption

柵格布局間距類型，用于描述柵格子組件不同方向的間距。

從API version 9開始，該接口支持在ArkTS卡片中使用。

GridRowColumnOption

柵格在不同寬度設(shè)備類型下，柵格列數(shù)。

從API version 9開始，該接口支持在ArkTS卡片中使用。

GridRowSizeOption

柵格在不同寬度設(shè)備類型下，gutter的大小。

從API version 9開始，該接口支持在ArkTS卡片中使用。

BreakPoints

設(shè)置柵格容器組件的斷點(diǎn)。

從API version 9開始，該接口支持在ArkTS卡片中使用。

// 啟用xs、sm、md共3個(gè)斷點(diǎn)
  breakpoints: {value: ["100vp", "200vp"]}
  // 啟用xs、sm、md、lg共4個(gè)斷點(diǎn)，斷點(diǎn)范圍值必須單調(diào)遞增
  breakpoints: {value: ["320vp", "600vp", "840vp"]}
  // 啟用xs、sm、md、lg、xl共5個(gè)斷點(diǎn)，斷點(diǎn)范圍數(shù)量不可超過斷點(diǎn)可取值數(shù)量-1
  breakpoints: {value: ["320vp", "600vp", "840vp", "1080vp"]}

BreakpointsReference枚舉類型

從API version 9開始，該接口支持在ArkTS卡片中使用。

GridRowDirection枚舉類型

從API version 9開始，該接口支持在ArkTS卡片中使用。

柵格最多支持xs、sm、md、lg、xl、xxl六個(gè)斷點(diǎn)，且名稱不可修改。假設(shè)傳入的數(shù)組是[n0, n1, n2, n3, n4]，各個(gè)斷點(diǎn)取值如下：

說明：

• 柵格元素僅支持Row/RowReverse排列，不支持column/ColumnReverse方向排列。
• 柵格子組件僅能通過span、offset計(jì)算子組件位置與大小。多個(gè)子組件span超過規(guī)定列數(shù)時(shí)自動(dòng)換行。
• 單個(gè)元素span大小超過最大列數(shù)時(shí)后臺(tái)默認(rèn)span為最大column數(shù)。
• 新一行的Offset加上子組件的span超過總列數(shù)時(shí)，將下一個(gè)子組件在新的一行放置。
• 例：Item1: GridCol({ span: 6})， Item2: GridCol({ span: 8, offset:11})

屬性

除支持[通用屬性]外，還支持以下屬性：

事件

onBreakpointChange

onBreakpointChange(callback: (breakpoints: string) => void)

斷點(diǎn)發(fā)生變化時(shí)觸發(fā)回調(diào)。

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數(shù)：

示例

// xxx.ets
@Entry
@Component
struct GridRowExample {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
  @State currentBp: string = 'unknown'

  build() {
    Column() {
      GridRow({
        columns: 5,
        gutter: { x: 5, y: 10 },
        breakpoints: { value: ["400vp", "600vp", "800vp"],
          reference: BreakpointsReference.WindowSize },
        direction: GridRowDirection.Row
      }) {
        ForEach(this.bgColors, (color: Color) = > {
          GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 }, offset: 0, order: 0 }) {
            Row().width("100%").height("20vp")
          }.borderColor(color).borderWidth(2)
        })
      }.width("100%").height("100%")
      .onBreakpointChange((breakpoint) = > {
        this.currentBp = breakpoint
      })
    }.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200)
    .border({ color: '#880606', width: 2 })
  }
}

審核編輯 黃宇