0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkTS容器组件:GridCol

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-07-08 15:17 次阅读

GridCol

栅格子组件,必须作为栅格容器组件([GridRow])的子组件使用。

说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含单个子组件。

接口

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数

参数名类型必填说明
spannumber[GridColColumnOption]
offsetnumber[GridColColumnOption]
ordernumber[GridColColumnOption]

说明:

spanoffsetorder属性按照xssmmdlgxlxxl的顺序具有“继承性”,未设置值的断点将会从前一个断点取值。

在不同宽度设备类型上的默认值为:

参数断点xssmmdlgxlxxl
span223344
offset223555
order202020333

属性

参数名类型必填说明
spannumberGridColColumnOption
gridColOffsetnumberGridColColumnOption
ordernumberGridColColumnOption

GridColColumnOption

用于自定义指定在不同宽度设备类型上,栅格子组件占据的栅格数量单位。

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数名参数类型必填参数描述
xsnumber在最小宽度类型设备上,栅格子组件占据的栅格数量单位。
smnumber在小宽度类型设备上,栅格子组件占据的栅格数量单位。
mdnumber在中等宽度类型设备上,栅格子组件占据的栅格数量单位。
lgnumber在大宽度类型设备上,栅格子组件占据的栅格数量单位。
xlnumber在特大宽度类型设备上,栅格子组件占据的栅格数量单位。
xxlnumber在超大宽度类型设备上,栅格子组件占据的栅格数量单位。

示例

GridRow

栅格布局可以为布局提供规律性的结构,解决多尺寸多设备的动态布局问题,保证不同设备上各个模块的布局一致性。

栅格容器组件,仅可以和栅格子组件([GridCol])在栅格布局场景中使用。

说明:

该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含GridCol子组件。

接口

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名类型必填说明
gutterLengthGutterOption
columnsnumberGridRowColumnOption
eakpointsBreakPoints设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。
directionGridRowDirection栅格布局排列方向。

GutterOption

栅格布局间距类型,用于描述栅格子组件不同方向的间距。

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数名参数类型必填参数描述
xLengthGridRowSizeOption
yLengthGridRowSizeOption

GridRowColumnOption

栅格在不同宽度设备类型下,栅格列数。

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数名参数类型必填参数描述
xsnumber在最小宽度类型设备上,栅格容器组件的栅格列数。
smnumber在小宽度类型设备上,栅格容器组件的栅格列数。
mdnumber在中等宽度类型设备上,栅格容器组件的栅格列数。
lgnumber在大宽度类型设备上,栅格容器组件的栅格列数。
xlnumber在特大宽度类型设备上,栅格容器组件的栅格列数。
xxlnumber在超大宽度类型设备上,栅格容器组件的栅格列数。

GridRowSizeOption

栅格在不同宽度设备类型下,gutter的大小。

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数名参数类型必填参数描述
xsLength在最小宽度类型设备上,栅格子组件的间距。
smLength在小宽度类型设备上,栅格子组件的间距。
mdLength在中等宽度类型设备上,栅格子组件的间距。
lgLength在大宽度类型设备上,栅格子组件的间距。
xlLength在特大宽度类型设备上,栅格子组件的间距。
xxlLength在超大宽度类型设备上,栅格子组件的间距。

BreakPoints

设置栅格容器组件的断点。

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数名参数类型必填参数描述
valueArray设置断点位置的单调递增数组。 默认值:["320vp", "600vp", "840vp"]
referenceBreakpointsReference断点切换参照物。 默认值:BreakpointsReference.WindowSize
// 启用xs、sm、md共3个断点
  breakpoints: {value: ["100vp", "200vp"]}
  // 启用xs、sm、md、lg共4个断点,断点范围值必须单调递增
  breakpoints: {value: ["320vp", "600vp", "840vp"]}
  // 启用xs、sm、md、lg、xl共5个断点,断点范围数量不可超过断点可取值数量-1
  breakpoints: {value: ["320vp", "600vp", "840vp", "1080vp"]}

BreakpointsReference枚举类型

从API version 9开始,该接口支持在ArkTS卡片中使用。

枚举名描述
WindowSize以窗口为参照。
ComponentSize以容器为参照。

GridRowDirection枚举类型

从API version 9开始,该接口支持在ArkTS卡片中使用。

枚举名描述
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})
123456789101112
∘∘∘∘∘∘∘∘∘∘∘∘------
-----
∘∘∘∘∘∘∘∘∘∘∘∘∘∘∘∘

属性

除支持[通用属性]外,还支持以下属性:

名称参数类型描述
alignItems10+ItemAlign设置GridRow中的GridCol垂直主轴方向对齐方式,默认值:ItemAlign.Start 说明 : ItemAlign支持的枚举:ItemAlign.Start、ItemAlign.Center、ItemAlign.End、ItemAlign.Stretch。 GridCol本身也可通过alignSelf([ItemAlign])设置自身对齐方式。当上述两种对齐方式都设置时,以GridCol自身设置为准。 从API version 10开始,该接口支持在ArkTS卡片中使用。

事件

onBreakpointChange

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

断点发生变化时触发回调。

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名参数类型必填说明
eakpointsstring取值为"xs""sm""md""lg""xl""xxl"HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿

鸿蒙文档.png

示例

// 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 })
  }
}

figures/gridrow.png

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 组件
    +关注

    关注

    1

    文章

    512

    浏览量

    17821
  • 鸿蒙
    +关注

    关注

    57

    文章

    2348

    浏览量

    42829
收藏 人收藏

    评论

    相关推荐

    鸿蒙ArkTS容器组件:Column

    沿垂直方向布局的容器
    的头像 发表于 07-05 16:32 444次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:Column

    鸿蒙ArkTS容器组件:Flex

    以弹性方式布局子组件容器组件
    的头像 发表于 07-08 10:19 495次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:Flex

    鸿蒙ArkTS容器组件:FlowItem

    [瀑布流组件]的子组件,用来展示瀑布流具体item。
    的头像 发表于 07-08 09:56 372次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:FlowItem

    鸿蒙ArkTS容器组件:GridItem

    网格容器中单项内容容器
    的头像 发表于 07-09 09:25 392次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:GridItem

    鸿蒙ArkTS容器组件:ListItem

    可以包含单个子组件
    的头像 发表于 07-10 15:41 645次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:ListItem

    鸿蒙ArkTS容器组件:ListItemGroup

    组件用来展示列表item分组,宽度默认充满[List]组件,必须配合List组件来使用。
    的头像 发表于 07-10 09:20 675次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:ListItemGroup

    鸿蒙ArkTS容器组件:Navigator

    路由容器组件,提供路由跳转能力。
    的头像 发表于 07-10 14:55 407次阅读

    鸿蒙ArkTS容器组件:Refresh

    可以进行页面下拉操作并显示刷新动效的容器组件
    的头像 发表于 07-11 16:11 508次阅读

    鸿蒙ArkTS容器组件:RowSplit

    将子组件横向布局,并在每个子组件之间插入一根纵向的分割线。
    的头像 发表于 07-11 22:25 338次阅读

    鸿蒙ArkTS容器组件:Scroll

    可滚动的容器组件,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动。
    的头像 发表于 07-12 15:24 1229次阅读

    鸿蒙ArkTS容器组件:SideBarContainer

    提供侧边栏可以显示和隐藏的侧边栏容器,通过子组件定义侧边栏和内容区,第一个子组件表示侧边栏,第二个子组件表示内容区。
    的头像 发表于 07-18 15:46 545次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:SideBarContainer

    鸿蒙ArkTS容器组件:Stack

    堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件
    的头像 发表于 07-15 18:23 873次阅读

    鸿蒙ArkTS容器组件:Swiper

    滑块视图容器,提供子组件滑动轮播显示的能力。
    的头像 发表于 07-15 09:51 627次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:Swiper

    鸿蒙ArkTS容器组件:Tabs

    通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。
    的头像 发表于 07-15 09:48 815次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:Tabs

    鸿蒙ArkTS容器组件:WaterFlow

    瀑布流容器,由“行”和“列”分割的单元格所组成,通过容器自身的排列规则,将不同大小的“项目”自上而下,如瀑布般紧密布局。
    的头像 发表于 07-15 17:35 420次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>容器</b><b class='flag-5'>组件</b>:WaterFlow