From db445c42e8bfbf1c529e4b90f4426a5cfd8ca13d Mon Sep 17 00:00:00 2001 From: xiexiyun Date: Thu, 11 Aug 2022 21:50:35 +0800 Subject: [PATCH] add gridCol & gridRow Signed-off-by: xiexiyun --- .../reference/arkui-ts/Readme-CN.md | 2 + .../reference/arkui-ts/figures/gridrow.png | Bin 0 -> 20586 bytes .../arkui-ts/ts-container-gridcol.md | 55 +++++++ .../arkui-ts/ts-container-gridrow.md | 154 ++++++++++++++++++ 4 files changed, 211 insertions(+) create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/gridrow.png create mode 100644 zh-cn/application-dev/reference/arkui-ts/ts-container-gridcol.md create mode 100644 zh-cn/application-dev/reference/arkui-ts/ts-container-gridrow.md diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 8fd3645415..100376f24c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -97,6 +97,8 @@ - [Counter](ts-container-counter.md) - [Flex](ts-container-flex.md) - [GridContainer](ts-container-gridcontainer.md) + - [GridCol](ts-container-gridcol.md) + - [GridRow](ts-container-gridrow.md) - [Grid](ts-container-grid.md) - [GridItem](ts-container-griditem.md) - [List](ts-container-list.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/gridrow.png b/zh-cn/application-dev/reference/arkui-ts/figures/gridrow.png new file mode 100644 index 0000000000000000000000000000000000000000..ec3c488eed555b83c695c233db992e69c4af639a GIT binary patch literal 20586 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 **说明:** +> +> 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + + + +## 权限列表 + +无 + +## 子组件 + +可以包含单个子组件。 +## 接口 + +GridCol(span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption) + +**参数**: +| 参数名 |类型|必填|说明 +|-----|-----|-----|----| +|span| number \| GridColColumnOption | 否 |占用列数。span为0,意味着该元素不参与布局计算,即不会被渲染。
默认值:1。| +|offset|number \| GridColColumnOption| 否 |相对于前一个栅格子组件偏移的列数。
默认值:0。| +|order|number \| GridColColumnOption| 否 |元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。
默认值:0。| +## 属性 +| 名称 |类型|说明 +|-----|-----|----| +|span| number \| GridColColumnOption |占用列数。span为0,意味着该元素不参与布局计算,即不会被渲染。
默认值:1。| +|offset|number \| GridColColumnOption| 相对于前一个栅格子组件偏移的列数。
默认值:0。| +|order|number \| GridColColumnOption|元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。
默认值:0。| + +## GridColColumnOption + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ----- | ------ | ---- | ---------------------------------------- | +| xs | number | 否 | 最小宽度类型设备。 | +| sm | number | 否 | 小宽度类型设备。 | +| md | number | 否 | 中等宽度类型设备。 | +| lg | number | 否 | 大宽度类型设备。 | +| xl | number | 否 | 特大宽度类型设备。 | +| xxl | number | 否 | 超大宽度类型设备。 | + +`span`、`offset`、`order`属性按照`xs`、`sm`、`md`、`lg`、`xl`、`xxl`的顺序具有“继承性”,未设置值的断点将会从前一个断点取值。 + +|参数\断点 |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 | + +## 示例 +请参考栅格容器示例代码([GridRow](ts-container-gridrow.md#示例)) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-gridrow.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-gridrow.md new file mode 100644 index 0000000000..9cb2070a00 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-gridrow.md @@ -0,0 +1,154 @@ +# GridRow + +栅格容器组件,仅可以和栅格子组件([GridCol](ts-container-gridcol.md))在栅格布局场景中使用。 + +> **说明:** +> +> 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + + + + +## 权限列表 + +无 + + +## 子组件 + +可以包含GridCol子组件。 + + +## 接口 +GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | GetterOption, breakpoints?: BreakPoints, direction?: GridRowDirection}) + +**参数:** +| 参数名 |类型|必填|说明| +|-----|-----|----|----| +|gutter|Length \| GetterOption| 否 |栅格布局间距,x代表水平方向。| +|columns| number \| GridRowColumnOption | 否 |设置布局列数。| +|breakpoints|BreakPoints| 否 |用于设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。| +|direction|GridRowDirection| 否 |栅格布局排列方向。| + +## GetterOption + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ----- | ------ | ---- | ---------------------------------------- | +| x | Length \| GridRowSizeOption | 否 | 水平getter option。 | +| y | Length \| GridRowSizeOption | 否 | 竖直getter option。 | + +## GridRowColumnOption + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ----- | ------ | ---- | ---------------------------------------- | +| xs | number | 否 | 最小宽度类型设备。 | +| sm | number | 否 | 小宽度类型设备。 | +| md | number | 否 | 中等宽度类型设备。 | +| lg | number | 否 | 大宽度类型设备。 | +| xl | number | 否 | 特大宽度类型设备。 | +| xxl | number | 否 | 超大宽度类型设备。 | + +## BreakPoints + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ----- | ------ | ---- | ---------------------------------------- | +| value | Array | 否 | 用于设置断点位置的单调递增数组。
默认值:["320vp", "520vp", "840vp"] | +| reference | BreakpointsReference | 否 | - | 竖直getter option。 | +```ts + // 启用xs、sm、md共3个断点 + breakpoints: {value: ["100vp", "200vp"]} + // 启用xs、sm、md、lg共4个断点,断点范围值必须单调递增 + breakpoints: {value: ["320vp", "520vp", "840vp"]} + // 启用xs、sm、md、lg、xl共5个断点,断点范围数量不可超过断点可取值数量-1 + breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]} +``` + +## BreakpointsReference枚举类型 +| 枚举名 | 描述 | +| -------- | -------- | +| WindowSize | 以窗口为参照。 | +| ComponentSize | 以容器为参照。 | + +## GridRowDirection枚举类型 +| 枚举名 | 描述 | +| -------- | -------- | +| Row | 栅格元素按照行方向排列。 | +| RowReverse | 栅格元素按照逆序行方向排列。 | + +栅格最多支持xs、sm、md、lg、xl、xxl六个断点,且名称不可修改。假设传入的数组是[n0, n1, n2, n3, n4],各个断点取值如下: + +|断点|取值范围| +|---|-----------| +|xs |[0, n0) | +|sm |[n0, n1) | +|md |[n1, n2) | +|lg |[n2, n3) | +|xl |[n3, n4) | +|xxl|[n4, INF) | + +**说明:** +* 栅格元素仅支持Row/RowReverse排列,不支持column/ColumnReverse方向排列。 +* 栅格子组件仅能通过span、offset计算子组件位置与大小。多个子组件span超过规定列数时自动换行。 +* 单个元素span大小超过最大列数时后台默认span为最大column数。 +* 新一行的Offset加上子组件的span超过总列数时,将下一个子组件在新的一行放置。 +* 例:Item1: GridCol({ span: 6}), Item2: GridCol({ span: 8, offset:11}) + +|1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | +| ----- | ------ | ---- | ---- | -----|-----|---------|--------|------|------- |------- |------- | +| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$| - | - | - | - | - | - | +| - | - | - | - | - | | | | | | | | +| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$|$\circ$|$\circ$| | | | | + +## 属性 + +支持[通用属性](ts-universal-attributes-size.md)。 + + +## 事件 + +### onBreakpointChange + +onBreakpointChange(callback: (breakpoints: string) => void + +**参数:** + +| 参数名 | 参数类型 | 必填 | 说明 | +| ----- | ------ | ---- | ---------------------------------------- | +|breakpoints| string |是|断点发生变化时触发回调
取值为`"xs"`、`"sm"`、`"md"`、`"lg"`、`"xl"`、`"xxl"`。| + + + +## 示例 + +```ts +// 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)=>{ + GridCol({ span: {xs:1, sm:2, md:3, lg:4}}) { + 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:Color.Blue, width:2}) + } +} +``` + +![figures/gridrow.png](figures/gridrow.png) -- GitLab