首页 > 其他分享 >ArcTs布局入门05——栅格布局(GridRow/GridCol)

ArcTs布局入门05——栅格布局(GridRow/GridCol)

时间:2024-07-09 22:31:34浏览次数:20  
标签:GridRow Color GridCol 布局 栅格 sm 组件

如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧

扫描下面的二维码关注公众号。

1、概述

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

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

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

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

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

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

2、栅格容器GridRow

标签:GridRow,Color,GridCol,布局,栅格,sm,组件
From: https://blog.csdn.net/harmonyClassRoom/article/details/140280355

相关文章

  • 躲过了地沟油,还是没躲过工业油 —— 一车混装油“投毒”10万人!透视4000万吨食用油产业
    原文地址:https://baijiahao.baidu.com/s?id=1804095661359226790&wfr=spider&for=pc截取重点内容:值得注意的是,此次事件“国家队”中储粮和600亿民营粮油巨头汇福粮油牵扯其中。公开资料显示,中储粮旗下的食用油品牌包括金鼎、鼎皇、华鼎、汉鼎、淳口香和聚味美等。汇福粮油有......
  • 基于Python与GDAL的栅格转矢量(去边框)、添加缓冲区、简化容差
    文章目录概要整体内容简化矢量数据并应用容差小结概要在地理信息系统(GIS)中,栅格数据与矢量数据之间的转换是一项基本且重要的操作。栅格数据通常用于表示连续变化的数据(如温度、海拔等),而矢量数据则更适合表示离散的地理要素(如点、线、面)。此外,为矢量要素添加缓冲区是......
  • CSS Grid 网格布局边框设置
    Grid网格布局是一种比较新的布局方法,几乎能实现所有设计的布局,比Flex布局更强大.但是最近将它用于画表格时碰到了一点问题,就是关于边框.需求是将所有边都加上等粗的边框,同时内容最好能进行水平和垂直的居中.碰到的问题:1.使用cssborder,可能会造成边框的重叠这个能搜到......
  • ArcTs布局入门02——弹性布局(Flex)
    如果你对鸿蒙开发感兴趣,加入“Harmony自习室”吧~......
  • ENVI无缝镶嵌、拼接栅格数据的方法
      本文介绍基于ENVI软件,利用“SeamlessMosaic”工具实现栅格遥感影像无缝镶嵌的操作。  在遥感图像镶嵌拼接:ENVI的PixelBasedMosaicking工具操作方法这篇文章中,我们介绍了在ENVI软件中通过“PixelBasedMosaicking”工具实现栅格遥感影像的镶嵌的方法。这一工具虽然可以......
  • 前端位置布局汇总
    1、位置:绝对位置和相对位置绝对位置style="position:absolute;left:218px;top:0%;"style="position:absolute;bottom:5px;right:5px;"相对位置:margin外边距 padding内边距style="border:1pxsolidblack;width:200px;text-align:left;margin-left:1200px;pa......
  • QT ui界面中对控件进行布局操作,无法改变内控控件大小
    QSizePolicy想象你有一个装满各种物品(窗口部件)的抽屉。QSizePolicy就像是给抽屉里的每个物品设定的规则,决定当抽屉变大时,每个物品如何变化尺寸。固定(Fixed):就像一个固定大小的盒子,不管抽屉变大还是变小,它总是保持原样。最小(Minimum):这就像一个可以伸缩的袋子,但它不能小于它......
  • flex布局学习笔记
    教学视频来自25分钟彻底弄懂CSSFlex基础布局/CSSFlex入门教程_哔哩哔哩_bilibili目录一、前置代码二、flex元素的自动宽度​编辑三、flex元素的增大逻辑四、flex元素的缩小逻辑五、flex容器的交叉轴对齐六、flex元素的换行七、flex元素直接的多轴换行八、补充......
  • css的布局
    1css布局标准流标准流处在网页的最底层,表示页面的位置。在标准流中有两种排列方式,垂直排列,水平排列在css中将元素分为三类,行内元素,块级元素,行内块级元素如果是块级元素,就会垂直排列,如果是行内元素或者行内块级元素,就会水平排列如何让块级元素水平排列呢?  float:left......
  • 第四章 对象的实例化内存布局与访问定位
    对象的实例化内存布局与访问定位对象的实例化 对象创建的方式(1)new:最常见的方式、单例类中调用getInstance的静态类方法,XXXFactory的静态方法(2)Class的newInstance方法:在JDK9里面被标记为过时的方法,因为只能调用空参构造器,并且权限必须为public(3)Cons......