46.HarmonyOS鸿蒙系统 App(ArkUI)网格布局

Grid(){
       GridItem(){

          Button('按钮1').fontSize(28)
       }.backgroundColor(Color.Blue)
      GridItem(){
        Text('数学').fontSize(28)
      }.backgroundColor(Color.Yellow)
      GridItem(){
        Text('语文').fontSize(28)
      }.backgroundColor(Color.Green)
      GridItem(){
        Text('英语').fontSize(28)
      }.backgroundColor(Color.Yellow)
      GridItem(){
        Text('化学').fontSize(28)
      }.backgroundColor(Color.Blue)
      GridItem(){
        Text('体育').fontSize(28)
      }.backgroundColor(Color.Pink)
      GridItem(){
        Text('美术').fontSize(28)
      }.backgroundColor(Color.Green)
      GridItem(){
        Text('物理').fontSize(28)
      }.backgroundColor(Color.Yellow)
      GridItem(){
        Button('按钮9').fontSize(28)
      }.backgroundColor(Color.Blue)


    }.rowsTemplate('1fr 1fr 1fr') //3行
    .columnsTemplate('1fr 1fr 1fr') //两列
    .columnsGap(10) //列间距
    .rowsGap(15) //行间距

计算器的布局示范 

 

 

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {

    Grid(){
      GridItem(){
        Text('666').fontSize(28)
      }.columnStart(0) //开始 1列,结束到4列
      .columnEnd(3)
      .backgroundColor(Color.Blue)
      .rowStart(0)  //开始跨第1排
      .rowEnd(1)   //结束跨第2排

      GridItem(){
        Button('CE').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem(){
        Button('C').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem(){
        Button('/').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem(){
        Button('X').fontSize(28)
      }.backgroundColor(Color.Gray)

      GridItem(){
        Button('7').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem(){
        Button('8').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem(){
        Button('9').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem(){
        Button('-').fontSize(28)
      }.backgroundColor(Color.Gray)

      GridItem(){
        Button('4').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem(){
        Button('5').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem(){
        Button('6').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem() {
        Button('+').fontSize(28)
      }.backgroundColor(Color.Gray)

      GridItem() {
        Button('1').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem() {
        Button('2').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem() {
        Button('3').fontSize(28)
      }.backgroundColor(Color.Gray)
      GridItem() {
        Button('=').fontSize(28)
      }.backgroundColor(Color.Gray)
      .rowStart(5)
      .rowEnd(6)
      GridItem() {
        Button('0').fontSize(28)
      }.backgroundColor(Color.Gray)
      .columnStart(0)
      .columnEnd(1)
      GridItem() {
        Button('.').fontSize(28)
      }.backgroundColor(Color.Gray)

    }.columnsTemplate('1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
    .rowsGap(15)
    .columnsGap(15)


  }
}

网格布局是由“行”和“列”分割的单元格所组成的,它通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力,子组件占比控制能力,是一种重要自适应布局,其使用场景有九宫格图片展示、日历、计算器等。

ArkUI提供的Grid容器组件和子组件GridItem,用于构建网格布局。Grid用于设置网格布局相关参数,GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。

布局和约束

Grid组件为网格容器,其中容器内每一个条目对应一个GridItem组件,如下图所示。

图1 Grid和GridItem组件的关系

说明

Grid的子组件必须是GridItem组件。

网格布局是一种二维布局。Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列,同时提供了垂直和水平布局能力。当网格容器组件尺寸发生变化时,所有子组件以及间距会等比例调整,从而实现网格布局的自适应能力。根据Grid的这些布局能力,可以构建出不同样式的网格布局,如下图所示。

图2 网格布局

如果Grid组件设置了宽高属性,则其尺寸为设置值。如果没有设置宽高属性,Grid组件的尺寸默认适应其父组件的尺寸。

Grid组件根据行列数量与占比属性的设置,可以分为三种布局情况:

  • 行、列数量与占比同时设置:Grid只展示固定行列数的元素,其余元素不展示,且Grid不可滚动。(推荐使用该种布局方式)
  • 只设置行、列数量与占比中的一个:元素按照设置的方向进行排布,超出的元素可通过滚动的方式展示。
  • 行列数量与占比都不设置:元素在布局方向上排布,其行列数由布局方向、单个网格的宽高等多个属性共同决定。超出行列容纳范围的元素不展示,且Grid不可滚动。

设置排列方式

设置行列数量与占比

通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。

rowsTemplate和columnsTemplate属性值是一个由多个空格和'数字+fr'间隔拼接的字符串,fr的个数即网格布局的行或列数,fr前面的数值大小,用于计算该行或列在网格布局宽度上的占比,最终决定该行或列的宽度。

图3 行列数量占比示例

如上图所示,构建的是一个三行三列的的网格布局,其在垂直方向上分为三等份,每行占一份;在水平方向上分为四等份,第一列占一份,第二列占两份,第三列占一份。

只要将rowsTemplate的值为'1fr 1fr 1fr',同时将columnsTemplate的值为'1fr 2fr 1fr',即可实现上述网格布局。

 
  1. Grid() {
  2. ...
  3. }
  4. .rowsTemplate('1fr 1fr 1fr')
  5. .columnsTemplate('1fr 2fr 1fr')

说明

当Grid组件设置了rowsTemplate或columnsTemplate时,Grid的layoutDirection、maxCount、minCount、cellLength属性不生效,属性说明可参考Grid-属性。

设置子组件所占行列数

除了大小相同的等比例网格布局,由不同大小的网格组成不均匀分布的网格布局场景在实际应用中十分常见,如下图所示。在Grid组件中,通过设置GridItem的rowStart、rowEnd、columnStart和columnEnd可以实现如图所示的单个网格横跨多行或多列的场景。

图4 不均匀网格布局

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/546522.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构(算法)

总结,建议看EXCEL的《算法》页签,不然感觉有点乱 备注原理/步骤时间复杂度空间复杂度串的应用模式匹配简单/暴力O(mn) KMP  O(mn) 树的应用树哈夫曼树1、带权路径长度WPL 2、外部排序-最佳归并树1、哈夫曼树的度,只有0和m(m叉…

七月审稿之提升模型效果的三大要素:prompt、数据质量、训练策略(含Reviewer2和PeerRead)​

前言 我带队的整个大模型项目团队超过40人了,分六个项目组,每个项目组都是全职带兼职,且都会每周确定任务/目标/计划,然后各项目组各自做任务拆解,有时同组内任务多时 则2-4人一组 方便并行和讨论,每周文档…

Normalizing Flows

需要学的是神经网络 f f f, 用于完成从source distribution (Pz)(latent space,一般为高斯分布)到 target distribution (Px) 的映射。 Normalizing Flows 是一种强大的生成模型,它通过学习一个可逆且易于计算的转换来将复杂的概…

(弟弟14)递归•按顺序打印一个整数的每一位

这里是目录哦 题目代码运行截图递归思路递归停止条件如何实现“按顺序”悟了✨加油&#x1f389; 题目 按顺序打印一个整数的每一位。 代码 #include<stdio.h> void Print(int n) {if (n > 9)//递归停止条件{Print(n / 10);//不断趋近递归停止条件}printf("%d…

代码随想录算法训练营Day56|LC583 两个字符串的删除操作LC72 编辑距离

一句话总结&#xff1a;看起来复杂&#xff0c;动规分析以后就比较简单。 原题链接&#xff1a;583 两个字符串的删除操作 本质就是求两个字符串的最短子序列的长度。已经做过&#xff0c;不再详解。 class Solution {public int minDistance(String word1, String word2) {/…

一文读懂自动化运维工具ansible及其使用

1. ansible简介 ansible是干什么的 ansible是目前最受运维欢迎的自动化运维工具&#xff0c;基于Python开发&#xff0c;集合了众多运维工具&#xff08;SaltStack puppet、chef、func、fabric&#xff09;的优点&#xff0c;实现了批量系统配置、批量程序部署、批量运行命令…

麒麟服务器操作系统安装HTTP服务

往期好文&#xff1a;麒麟服务器操作系统安装TFTP服务 Hello&#xff0c;大家好啊&#xff01;今天我们将探讨如何在麒麟服务器操作系统上安装和配置HTTP服务&#xff0c;这是任何网络服务或应用的基础。无论你是想建立一个简单的网站&#xff0c;还是需要一个全功能的Web服务器…

wangzherongyao 2024.04.15

第一局&#xff1a;百里陪那只重置技能CD的辅助&#xff0c;对面有兰陵王&#xff0c;妲己&#xff0c;然后我补位廉颇被自己人和对面一阵嘲讽&#xff0c;真的不想说啥&#xff0c;对面盾山和妲己估计都没明白&#xff0c;我一只就能破他们队伍&#xff0c;所以看到没先出魔抗…

在Windows上配置VS Code GO语言开发环境

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

代码随想录阅读笔记-回溯【全排列】

题目 给定一个 没有重复 数字的序列&#xff0c;返回其所有可能的全排列。 示例 输入: [1,2,3]输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1] ] 思路 以[1,2,3]为例&#xff0c;抽象成树形结构如下&#xff1a; 回溯三部曲 1、递归函数参数 首先排列是有…

C++内存分布

C代码编译过程 预处理 宏定义展开、头文件展开、条件编译&#xff0c;这里并不会检查语法编译检查语法&#xff0c;将预处理后文件编译生成汇编文件汇编将汇编文件生成目标文件(二进制文件)链接将目标文件链接为可执行程序 进程的内存分布 程序运行起来(没有结束前)就是一个…

Java实现单点登录(SSO)详解:从理论到实践

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; ✨✨ 帅哥美女们&#xff0c;我们共同加油&#xff01;一起进步&am…

亚信安慧AntDB:为安全加码

亚信安慧AntDB分布式数据库凭借平滑扩展、高可用性和低成本三大核心优势&#xff0c;在业界获得了极高的评价和认可。这些优点不仅为AntDB提供了巨大的市场发展潜力&#xff0c;也使其成为众多企业在数据管理上的首选解决方案。 AntDB的平滑扩展特性极大地提升了企业的灵活性和…

内网渗透-内网环境下的横向移动总结

内网环境下的横向移动总结 文章目录 内网环境下的横向移动总结前言横向移动威胁 威胁密码安全 威胁主机安全 威胁信息安全横向移动威胁的特点 利用psexec 利用psexec.exe工具msf中的psexec 利用windows服务 sc命令 1.与靶机建立ipc连接2.拷贝exe到主机系统上3.在靶机上创建一个…

EasyRecovery数据恢复软件2024百度云网盘下载链接

EasyRecovery数据恢复软件是一款功能强大的数据恢复工具&#xff0c;它能够帮助用户从各种存储设备中恢复丢失或误删除的文件数据。无论是由于意外删除、格式化、病毒攻击还是其他原因导致的数据丢失&#xff0c;EasyRecovery都能提供有效的解决方案。 该软件支持多种存储介质…

JavaScript排序大揭秘:手绘图解6大常见排序算法,一网打尽

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热爱技术和分享&#xff0c;欢迎大家交流&#xff0c;一起学习进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 本文用图解总结梳理了6种常见的排序算法 &#xff0c;如下&#x1f447;&#xff1…

地理空间分析中的深度学习应用

深度学习与地理信息系统 (GIS) 的结合彻底改变了地理空间分析和遥感的格局。这种结合将遥感和地理空间分析领域带到了全球研究人员和科学家的前沿。 深度学习是机器学习的一个复杂子集&#xff08;更多关于机器学习的内容&#xff0c;请参阅我的其他文章&#xff09;&#xff0…

Qt5 编译oracle数据库驱动

库文件 1、Qt源码目录&#xff1a;D:\Qt5\5.15.2\Src\qtbase\src\plugins\sqldrivers\oci 2、oracle客户端SDK: https://www.oracle.com/database/technologies/instant-client/winx64-64-downloads.html 下载各版本中的如下压缩包&#xff0c;一定要版本相同的 将两个压缩包…

如何通过WordPress发送电子邮件

本周有一个客户&#xff0c;购买Hostease的HK Basic Linux虚拟主机&#xff0c;询问我们的在线客服&#xff0c;WordPress发送电子邮件不成功。我们为用户提供教程&#xff0c;用户很快完成了设置。在此&#xff0c;我们分享这个操作教程&#xff0c;希望可以对您有帮助。 Host…

github上的软件许可证是什么?如何合并本地的分支德语难学还是俄语更加难学?站在一个中国人的立场上,德语难学还是俄语更加难学?俄语跟德语有什么样的显著差别?

目录 github上的软件许可证是什么&#xff1f; 如何合并本地的分支 德语难学还是俄语更加难学&#xff1f; 站在一个中国人的立场上&#xff0c;德语难学还是俄语更加难学&#xff1f; 俄语跟德语有什么样的显著差别&#xff1f; github上的软件许可证是什么&#xff1f; …