零基础学鸿蒙编程ArkTS/ArkUI实战鸿蒙开发入门

17、鸿蒙/布局/栅格布局 (GridRow/GridCol)

2024-07-15  本文已影响0人  圆梦人生

概述

栅格布局是一种通用的辅助定位工具,对移动设备的界面设计有较好的借鉴作用。主要优势包括:

  1. 提供可循的规律:栅格布局可以为布局提供规律性的结构,解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数,可以方便地对页面元素进行定位和排版。

  2. 统一的定位标注:栅格布局可以为系统提供一种统一的定位标注,保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度,提高工作效率。

  3. 灵活的间距调整方法:栅格布局可以提供一种灵活的间距调整方法,满足特殊场景布局调整的需求。通过调整列与列之间和行与行之间的间距,可以控制整个页面的排版效果。

  4. 自动换行和自适应:栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时,他们会自动换到下一行或下一列,并且在不同的设备上自适应排版,使得页面布局更加灵活和适应性强。

GridRow为栅格容器组件,需与栅格子组件GridCol在栅格布局场景中联合使用。

栅格容器GridRow

栅格系统断点

栅格系统以设备的水平宽度(屏幕密度像素值,单位vp)作为断点依据,定义设备的宽度类型,形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果。

栅格系统默认断点将设备宽度分为xs、sm、md、lg四类,尺寸范围如下:


GridRow.png

在GridRow栅格组件中,允许开发者使用breakpoints自定义修改断点的取值范围,最多支持6个断点,除了默认的四个断点外,还可以启用xl,xxl两个断点,支持六种不同尺寸(xs, sm, md, lg, xl, xxl)设备的布局设置。

GridRow.png
breakpoints: {value: ['100vp', '200vp']}

表示启用xs、sm、md共3个断点,小于100vp为xs,100vp-200vp为sm,大于200vp为md。

breakpoints: {value: ['320vp', '520vp', '840vp', '1080vp']}
GridRow({
      breakpoints: {
        value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
        reference: BreakpointsReference.WindowSize
      }
    }){
      GridCol({
        span: {
          xs: 2, // 在最小宽度类型设备上,栅格子组件占据的栅格容器2列。
          sm: 3, // 在小宽度类型设备上,栅格子组件占据的栅格容器3列。
          md: 4, // 在中等宽度类型设备上,栅格子组件占据的栅格容器4列。
          lg: 6, // 在大宽度类型设备上,栅格子组件占据的栅格容器6列。
          xl: 8, // 在特大宽度类型设备上,栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上,栅格子组件占据的栅格容器12列。
        }
      }){
        Row(){
          Text('新闻')
        }.backgroundColor(Color.Red).width(100).height(100)
      }
      GridCol({
          span: {
            xs: 2, // 在最小宽度类型设备上,栅格子组件占据的栅格容器2列。
            sm: 3, // 在小宽度类型设备上,栅格子组件占据的栅格容器3列。
            md: 4, // 在中等宽度类型设备上,栅格子组件占据的栅格容器4列。
            lg: 6, // 在大宽度类型设备上,栅格子组件占据的栅格容器6列。
            xl: 8, // 在特大宽度类型设备上,栅格子组件占据的栅格容器8列。
            xxl: 12 // 在超大宽度类型设备上,栅格子组件占据的栅格容器12列。
          }
      }){
        Row(){
          Text('新闻')
        }.backgroundColor(Color.Red).width(100).height(100)
      }
      GridCol({
          span: {
            xs: 2, // 在最小宽度类型设备上,栅格子组件占据的栅格容器2列。
            sm: 3, // 在小宽度类型设备上,栅格子组件占据的栅格容器3列。
            md: 4, // 在中等宽度类型设备上,栅格子组件占据的栅格容器4列。
            lg: 6, // 在大宽度类型设备上,栅格子组件占据的栅格容器6列。
            xl: 8, // 在特大宽度类型设备上,栅格子组件占据的栅格容器8列。
            xxl: 12 // 在超大宽度类型设备上,栅格子组件占据的栅格容器12列。
          }
      }){
        Row(){
          Text('新闻')
        }.backgroundColor(Color.Red).width(100).height(100)
      }
      GridCol({
        span: {
          xs: 2, // 在最小宽度类型设备上,栅格子组件占据的栅格容器2列。
          sm: 3, // 在小宽度类型设备上,栅格子组件占据的栅格容器3列。
          md: 4, // 在中等宽度类型设备上,栅格子组件占据的栅格容器4列。
          lg: 6, // 在大宽度类型设备上,栅格子组件占据的栅格容器6列。
          xl: 8, // 在特大宽度类型设备上,栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上,栅格子组件占据的栅格容器12列。
        }
      }){
        Row(){
          Text('新闻')
        }.backgroundColor(Color.Red).width(100).height(100)
      }
      GridCol({
        span: {
          xs: 2, // 在最小宽度类型设备上,栅格子组件占据的栅格容器2列。
          sm: 3, // 在小宽度类型设备上,栅格子组件占据的栅格容器3列。
          md: 4, // 在中等宽度类型设备上,栅格子组件占据的栅格容器4列。
          lg: 6, // 在大宽度类型设备上,栅格子组件占据的栅格容器6列。
          xl: 8, // 在特大宽度类型设备上,栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上,栅格子组件占据的栅格容器12列。
        }
      }){
        Row(){
          Text('新闻')
        }.backgroundColor(Color.Red).width(100).height(100)
      }
      GridCol({
        span: {
          xs: 2, // 在最小宽度类型设备上,栅格子组件占据的栅格容器2列。
          sm: 3, // 在小宽度类型设备上,栅格子组件占据的栅格容器3列。
          md: 4, // 在中等宽度类型设备上,栅格子组件占据的栅格容器4列。
          lg: 6, // 在大宽度类型设备上,栅格子组件占据的栅格容器6列。
          xl: 8, // 在特大宽度类型设备上,栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上,栅格子组件占据的栅格容器12列。
        }
      }){
        Row(){
          Text('新闻')
        }.backgroundColor(Color.Red).width(100).height(100)
      }
}

布局的总列数

GridRow中通过columns设置栅格布局的总列数。

@State bgColor: Color[] = [
    Color.Red,
    Color.Yellow,
    Color.Gray,
    Color.Green,
    Color.Black,
    Color.Blue,
    Color.Pink,
    Color.Orange,
    Color.Pink,
    Color.Brown,
    Color.Gray,
    Color.Black,
];
...
GridRow(){
      ForEach(this.bgColor, (item: Color, index: number)=>{
        GridCol(){
          Row(){
            Text(index.toString()).textAlign(TextAlign.Center)
          }.width(100).height(100).backgroundColor(item)
        }
      })
}
GridRow({ columns: 4 }){
      ForEach(this.bgColor, (item: Color, index: number)=>{
        GridCol(){
          Row(){
            Text(index.toString()).textAlign(TextAlign.Center)
          }.width(100).height(100).backgroundColor(item)
        }
      })
}
 GridRow({ columns: { sm: 2, md: 4, lg: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } }){
        ForEach(this.bgColor, (item: Color, index: number)=>{
          GridCol(){
            Row(){
              Text(index.toString()).textAlign(TextAlign.Center)
                .width('100%')
            }.width('100%').height(100).backgroundColor(item)
          }
        })
}

若只设置sm, md的栅格总列数,则较小的尺寸使用默认columns值12,较大的尺寸使用前一个尺寸的columns。这里只设置sm: 2, md: 4, lg: 8,则较小尺寸的xs:12,较大尺寸的参照md的设置,lg:8, xl:8, xxl:8

排列方向

栅格布局中,可以通过设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向。该属性可以设置为GridRowDirection.Row(从左往右排列)或GridRowDirection.RowReverse(从右往左排列),以满足不同的布局需求。通过合理的direction属性设置,可以使得页面布局更加灵活和符合设计要求。

GridRow({ direction: GridRowDirection.Row }){}
GridRow({ direction: GridRowDirection.RowReverse }){}

子组件间距

GridRow中通过gutter属性设置子元素在水平和垂直方向的间距。

 GridRow({ gutter: 10 }){}
GridRow({ gutter: { x: 20, y: 50 } }){}

子组件GridCol

GridCol组件作为GridRow组件的子组件,通过给GridCol传参或者设置属性两种方式,设置span(占用列数),offset(偏移列数),order(元素序号)的值。

GridCol({ span: 2 }){}
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.span(2)
GridCol({ offset: 2 }){}
GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){}
GridCol({ order: 2 }){}
GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.order(2)

span

子组件占栅格布局的列数,决定了子组件的宽度,默认为1。

// 一行2个
GridCol({ span: 2 })
 GridCol({
            span: { xs: 1, sm: 2, md: 3, lg: 4 }
})

offset

栅格子组件相对于前一个子组件的偏移列数,默认为0。

 GridCol({
  offset: 1
})
GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } })

order

栅格子组件的序号,决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时,order较小的组件在前,较大的在后。

当子组件部分设置order,部分不设置order时,未设置order的子组件依次排序靠前,设置了order的子组件按照数值从小到大排列。

GridRow({
      breakpoints: {
        value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
        reference: BreakpointsReference.WindowSize
      }
    }){
      GridCol({
        order: 3
      }){
        Row(){
          Text('新闻1')
        }.backgroundColor(Color.Red).width('100%').height(100)
      }
      GridCol({
        order: 2
      }){
        Row(){
          Text('新闻2')
        }.backgroundColor(Color.Red).width('100%').height(100)
      }
      GridCol({

      }){
        Row(){
          Text('新闻3')
        }.backgroundColor(Color.Red).width('100%').height(100)
      }

}
GridCol({ order: { xs:1, sm:5, md:3, lg:7}})

综上所述,栅格组件提供了丰富的自定义能力,功能异常灵活和强大。只需要明确栅格在不同断点下的Columns、Margin、Gutter及span等参数,即可确定最终布局,无需关心具体的设备类型及设备状态(如横竖屏)等。

上一篇下一篇

猜你喜欢

热点阅读