中山网站seo优化,新闻头条国内大事,大连网络推广营销,做app推广上哪些网站1、描述
栅格容器组件#xff0c;仅可以和栅格子组件#xff08;GridCol#xff09;在栅格布局场景中使用。
2、子组件
可以包含GridCol子组件。
3、接口
GridRow(options:{columns: number | GridRowColumnOption, gutter?: Length | GutterOption, Breakpoints?: B…
1、描述
栅格容器组件仅可以和栅格子组件GridCol在栅格布局场景中使用。
2、子组件
可以包含GridCol子组件。
3、接口
GridRow(options:{columns: number | GridRowColumnOption, gutter?: Length | GutterOption, Breakpoints?: Breakpoints, direction?: GridRowDirection})
4、参数 参数名 参数类型 必填 描述 columns number | GridRowColumnOption 是 设置布局列数。 gutter Length | GutterOption 否 栅格布局间距x代表水平方向y代表竖直方向。 Breakpoints Breakpoints 否 设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。 direction GridRowDirection 否 栅格布局排列方向。 5、GridRowColumnOption枚举说明
栅格在不同宽度设备类型下栅格列数。 参数名 参数类型 参数描述 xs number 最小宽度类型设备。 sm number 小宽度类型设备。 md number 中等宽度类型设备。 lg number 大宽度类型设备。 xl number 特大宽度类型设备。 xxl number 超大宽度类型设备。 6、GutterOption说明 参数名 参数类型 参数描述 x Length | GridRowSizeOption 水平gutter option。 y Length | GridRowSizeOption 竖直gutter option。 7、GridRowSizeOption说明
栅格在不同宽度设备类型下gutter的大小。 参数名 参数类型 参数描述 xs number 最小宽度类型设备。 sm number 小宽度类型设备。 md number 中等宽度类型设备。 lg number 大宽度类型设备。 xl number 特大宽度类型设备。 xxl number 超大宽度类型设备。 8、BreakPoints说明 参数名 参数类型 参数描述 value Arraystring 设置段带你位置的单调递增数组。默认值[“320vp”, “520vp”, “840vp”]。 reference BreakpointsReference 断点切换参照物。 // 启用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]} 9、BreakpointsReference枚举类型 枚举名 描述 WindowSize 以窗口为参照。 ComponentSize 以容器为参照。 10、GridRowDirection枚举类型 枚举名 描述 row 栅格元素按照行为方向排列。 rowReverse 栅格元素按照逆序行为方法排列。
栅格最多支持xs、sm、md、lg、xl、xxl六个断点且名称不可修改。假设传入的数组是[n0, n1, n2, n3, n4]各个断点取值如下 断点 取值范围 xs [0, n0) sm [n0, n1) md [n2, n2) lg [n3, n3) xl [n4, n4) xxl [n5, INF)
说明 栅格元素仅支持Row/RowReverse排列不支持column/ColumnReverse方向排列。
栅格子组件仅能通过span、offset计算子组件位置与大小。多个子组件span超过规定列数时自动换行。
单个元素span大小超过最大列数时后台默认span为最大column数。
新一行的Offset加上子组件的span超过总列数时将下一个子组件在新的一行放置。
例Item1: GridCol({ span: 6}) Item2: GridCol({ span: 8, offset:11}) 11、事件
名称onBreakpointChange(callback: (breakpoints: string) void)
功能说明断点发生变化时触发回调。
参数breakpoints - string - 取值为xs、sm、md、lg、xl、xxl。 12、示例
import router from ohos.routerEntry
Component
struct GridRowPage {State message: string 栅格容器组件仅可以和栅格子组件(GridCol)在栅格布局场景中使用。State bgColors: Color[] [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];build() {Row() {Scroll() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width(96%)GridRow({columns: 5,gutter: { x: 5, y: 10 },breakpoints: { value: [400vp, 600vp, 800vp], reference: BreakpointsReference.WindowSize }}) {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%).margin({ top: 12 }).onBreakpointChange((breakpoint) {console.log(currentBp breakpoint)})GridRow({columns: 6,gutter: { x: 12, y: 20 },breakpoints: { value: [400vp, 600vp, 800vp], reference: BreakpointsReference.WindowSize }}) {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%).margin({ top: 12 })Blank(12)Button(GridRow文本文档).fontSize(20).backgroundColor(#007DFF).width(96%).onClick(() {// 处理点击事件逻辑router.pushUrl({url: pages/containerComponents/gridRow/GridRowDesc,})})}.width(100%)}}.padding({ top: 12, bottom: 12 })}
}
13、效果图
