首页 > 其他分享 >学习笔记(二十五):ArkUi-栅格布局 (GridRow/GridCol)

学习笔记(二十五):ArkUi-栅格布局 (GridRow/GridCol)

时间:2024-11-05 20:30:41浏览次数:1  
标签:布局 GridCol GridRow 栅格 设置 组件 order

概述:

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

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

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

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

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

一、GridRow属性值

1、columns,布局总列数

columns设置栅格布局的总列数(columns默认值为12,即在未设置columns时,任何断点下,栅格布局被分成12列。)

GridRow({columns:4}) { // 设置列表为4列
...
}

 

 

2、direction,排列方向

设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向。

该属性可以设置为GridRowDirection.Row(从左往右排列)或GridRowDirection.RowReverse(从右往左排列),以满足不同的布局需求 

GridRow({columns:4,direction:GridRowDirection.Row}) {
..
}

 

GridRow({columns:4,direction:GridRowDirection.RowReverse}){
..
}

 

 

3、gutter,子组件间距

gutter属性设置子元素在水平和垂直方向的间距

1、当gutter类型为number时,同时设置栅格子组件间水平和垂直方向边距且相等。下例中,设置子组件水平与垂直方向距离相邻元素的间距为10。

 GridRow({ gutter: 10 }){}

 

2、当gutter类型为GutterOption时,单独设置栅格子组件水平垂直边距,x属性为水平方向间距,y为垂直方向间距

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

 

 

二、GridCol属性值

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

如下示例,GridCol 内容为'Order'  的span设置了3,宽度占比为3

 

2、order,栅格子组件的序号

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

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

如下示例,GridCol 内容为'Order'  排在了前面

 

标签:布局,GridCol,GridRow,栅格,设置,组件,order
From: https://www.cnblogs.com/xqxacm/p/18528458

相关文章

  • 无人机避障——2D栅格地图pgm格式文件路径规划代码详解
    代码和测试效果请看上一篇博客:无人机避障——使用三维PCD点云生成的2D栅格地图PGM做路径规划-CSDN博客 更换模型文件.dae:部分模型文件可以从这里下载:https://github.com/ethz-asl/rotors_simulator/wiki将原先代码中的car.dae文件更换为无人机.dae文件然后对urdf文件进......
  • 无人机避障——使用三维PCD点云生成的2D栅格地图PGM做路径规划
            着重介绍通过对三维PCD点云进行处理生成2D栅格地图PGM,而后将该PGM地图充分运用到无人系统路径规划之中,使得无人机能够依据此规划合理避开飞行路线上可能出现的障碍物。(解决如何使用PGM的问题)HybridA*算法参考博客:HybridA*——ROS实现带有车辆运动......
  • 将NC栅格表示时间维度的数据提取出来的方法
      本文介绍基于Python语言,逐一读取大量.nc格式的多时相栅格文件,导出其中所具有的全部时间信息的方法。  .nc是NetCDF(NetworkCommonDataForm)文件的扩展名,表示一种常用的科学数据存储格式。NetCDF是一种自描述的、可移植的二进制文件格式,用于存储科学和工程领域的大型数据集......
  • ai如何栅格化
    ai栅格化的步骤:1.选中要栅格化的文字;2.点击工具栏中的对象-栅格化;3.选择栅格化的参数;4.点击确定栅格化。其中,ai中栅格化图形是将矢量智能图形转化成一般图形。一、ai栅格化的步骤1.选中要栅格化的文字2.点击工具栏中的对象-栅格化3.选择栅格化的参数设置好之后点......
  • 粒子群算法应用——二维栅格路径规划
    粒子群算法详见:粒子群优化算法及应用-CSDN博客目录1栅格地图1.1 什么是栅格地图1.2栅格地图绘制2基本原理3结果展示1栅格地图1.1 什么是栅格地图栅格地图是一种将环境或地图区域均匀划分为一系列大小一致的网格单元,并为每个单元分配特定属性信息的地图表示方法......
  • 【MATLAB源码-第239期】基于matlab的孔雀优化算法(POA)机器人栅格路径规划,输出做短路
    操作环境:MATLAB2022a1、算法描述孔雀优化算法(PeafowlOptimizationAlgorithm,简称POA)以孔雀(peafowl)的求偶展示行为为灵感,通过模拟这一过程来解决复杂的优化问题。以下是对孔雀优化算法的详细描述:孔雀优化算法是一种基于自然界中孔雀求偶展示行为的群体智能优化算法。孔雀......
  • MATLAB两类栅格数据之间的相关性计算
    两类栅格数据之间的相关性计算(输出为tif影像)栅格数据做相关性分析前的预处理(批量定义投影、栅格投影、重采样)栅格影像行列号需要一致,行列号不一致可以在ArcGIS中批量处理:1.重采样2.裁剪右键空白环境设置处理完毕后,进行相关分析。Matlab代码-年[a,R]=geotiffread(......
  • 【MATLAB源码-第227期】基于matlab的北方苍鹰优化算法(NGO)机器人栅格路径规划,输出做
    操作环境:MATLAB2022a1、算法描述鼠群优化算法(RatSwarmOptimization,RSO)简介鼠群优化算法(RatSwarmOptimization,RSO)是一种模仿鼠类群体觅食行为的优化算法。该算法属于群体智能算法,通过模拟鼠群在复杂环境中寻找食物的行为,来解决各种优化问题。鼠类在觅食过程中表现......
  • 【数据分享】1975-2020年人口密度POP栅格数据
    数据来源GHS-POP空间栅格产品(GHS-POP_GLOBE_R2023)描绘了人口的分布,表示为每个单元的人数。这个数据集描述了人口的分布和密度,以每个单元的人数表示,1975年-2020年,五年间隔,空间分辨率1000m.官网下载地址:https://human-settlement.emergency.copernicus.eu/download.php?ds=po......
  • 【数据分享】1985-2023年30米CLCD土地覆盖栅格数据分享
    1.数据来源​CLCD反映了中国快速的城市化进程和一系列生态工程,揭示了气候变化条件下人为对LC的影响,其在全球变化研究中具有潜在应用价值。2021年7月,武汉大学杨杰、黄昕两位教授共同撰写题为《30mannuallandcoveranditsdynamicsinChinafrom1990to2019》的研究论......