HarmonyOS--创建网格（Grid/GridItem）

已于 2024-04-08 21:40:35 修改
阅读量639 收藏 9
点赞数 12
分类专栏： 鸿蒙 文章标签： 前端 鸿蒙
于 2024-03-28 23:15:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mqh_520/article/details/137126627
版权

概述

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

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

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

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

  • 行、列数量与占比同时设置：Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚动。（推荐使用该种布局方式）
  • 只设置行、列数量与占比中的一个&#x
最低0.47元/天 解锁文章
爱敲代码的懒洋洋
关注
专栏目录
2.9、创建网格（Grid/GridItem）
lujianfeiccie2009的专栏
03-26 188
网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：GridItem）
m0_64420071的博客
03-15 1392
ArkTS声明式开发（容器组件：GridItem）
君子生非异也，善假于物也！—— HarmonyOS 计算器实现
最新发布
2302_79379903的博客
08-02 1386
风流要是贤公子，白晰仍为美少年。隐墨同学恋爱了，她爱上了隔壁班的少年，恰同学少年，风华正茂，指点江山，挥斥方遒。隐墨同学彻底的坠入了爱河，一发不可收拾，每天梦想着和少年檫出不一样的火花，来一场特殊的经历。让两个人的生活交轨，可谓衣带渐宽终不悔,为伊消得人憔悴啊！！正巧，少年家电脑上的计算器不能正常使用了，你眼睛一亮，真相只有一个，那就是机会，你快速在书架上找到》大喊：如意如意，按我心意。
HarmonyOS实战开发-如何实现一个支持加减乘除混合运算的计算器。
2401_82546228的博客
03-29 1769
本篇Codelab基于基础组件、容器组件，实现一个支持加减乘除混合运算的计算器。
鸿蒙应用开发-ArkUI 计算器
liuhaikang的博客
04-04 1736
效果图上的计算器界面简洁大方，每个按钮都经过精心设计，颜色搭配恰到好处，使得整体界面既美观又实用。按钮的实现代码已经给出，通过这段代码，我们可以看到如何设置按钮的文字颜色、背景颜色、圆角大小等属性。例如，我们选择了合适的颜色搭配，使得按钮在视觉上更加吸引人；同时，设置了较大的圆角，使得按钮呈现出圆润的外观，更加符合现代审美趋势。要实现计算器中的按钮，我们首先需要使用ArkUI中的Text组件来表示按钮上的文字。每个按钮都是一个独立的个体，因此我们使用Column布局来包裹每个按钮，以便进行统一的样式设置。
HarmonyOS开发案例：【计算器】
鸿蒙的技术博客
05-07 2369
基于基础组件、容器组件，实现一个支持加减乘除混合运算的计算器。由于数字都是双精度浮点数，在计算机中是二进制存储数据的，因此小数和非安全整数（超过整数的安全范围[-Math.pow(2, 53)，Math.pow(2, 53)]的数据）在计算过程中会存在精度丢失的情况。
harmony实现简易计算器
zqxzqx666的博客
07-15 810
HarmonyOS-简易的计算器实现本计算器是仿造windows系统实现的，实现了基本的功能四则运算，清除，退位，小数点，正负号功能。
2024年HarmonyOS鸿蒙最新鸿蒙开发实战案例-计算器（附整套源码）_开源计算器源码，2024年最新面试拷问问题
2401_84871540的博客
05-08 1346
)else {})})另外，在计算器算法中，涉及到优先级的问题，例如1+2*3这种混合运算式要先算乘除，再算加减。我的思路是先把输入的运算式存入字符串，并用空格分开，如1 + 2 * 3，然后把该字符串切分成数组，对数组进行两次遍历，第一次遍历计算乘法和除法，第二次遍历计算加减法，最后输出结果。
OpenHarmony实战开发-创建网格 (Grid/GridItem)
m0_70749039的博客
04-26 900
网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。
HarmonyOS ArkUI --- List组件和Grid组件的使用
weixin_47917081的博客
12-21 1101
List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。Grid组件为网格容器，是一种网格列表，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用，Grid列表中的每一个条目对应一个GridItem组件。
鸿蒙计算器源代码.rar
08-31
一款非常好用的鸿蒙系统的计算器实用软件
鸿蒙开发实战案例-计算器（附整套源码）
shudaoshanQAQ的博客
03-05 3878
鸿蒙开发实战案例-计算器（附整套源码）
鸿蒙应用开发——计算器（2）
J1062517968的博客
06-21 2259
在上一个篇章中我们简单介绍了DevEco Studio如何新建项目以及完成了我们计算器项目显示界面的一部分，今天我们继续来完善计算器的显示页面。
OpenHarmony实战开发-鸿蒙ArkTS语言入门（网格布局）
m0_70749039的博客
05-27 1061
首先我们来对Grid进行一个初步的认识：网格布局（Grid）是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。上面的内容是官方给出的对Grid的文字定义，不难看出，网格布局在特定场景（例如日历、计算器等）下是有较大优势的，它可以轻松的将页面进行均分，大大减少代码量，提高编码效率，而且做出来的页面会更加简洁美观。
鸿蒙开发计算机小demo
qq_52025312的博客
12-16 470
鸿蒙
HarmonyOS应用开发：鸿蒙Js实战，计算器功能开发
08-09 3568
开发计算器最主要的是连续计算，连续计算需要添加计算优先级逻辑，后续考虑通过遍历来判断里面的计算。
用十种编程语言开发计算器应用-第十一篇-华为鸿蒙
蓝不蓝编程
10-12 947
用十种编程语言开发计算器应用 C语言 C#（windows桌面软件） Swift （ios应用） python Dart（Flutter应用，跨平台，适用安卓、ios、mac、windows、web） Java（安卓App） Kotlin （安卓App） Js+Html+Vue（H5应用） 微信小程序 抖音小程序 鸿蒙 鸿蒙版 开发工具 DevEco Studio 如何下载 工程截图 关键代码文件 ability_main.xml 主界面布局 MainAbilitySlice.java 主界面对
『牛角书』鸿蒙-计算器的实现
weixin_51404541的博客
12-17 1393
经过在学校中的鸿蒙学习后，实现一个简易的鸿蒙应用，代码中还有很多不足，有待继续学习。
鸿蒙开发自定义渐变导航栏
shudaoshanQAQ的博客
03-08 1533
开发一个自定义渐变导航栏，本项目基于鸿蒙4.0。
解释下面的代码：<head> <meta charset="utf-8"> <title>CSS</title> <style> .grid-container{ <!--是一个类选择器，用于选择一个包含网格元素的容器--> display: grid; //是一个CSS属性，用于将容器设置为网格布局 grid-template-columns: 100px 100px 100px; //定义了列的数量和宽度，这里有3列，每列宽度为100像素。 grid-template-rows: 100px 100px 100px; //定义了行的数量和高度，这里有3行，每行高度为100像素。 grid-gap: 0px; //设置了单元格之间的空隙为0。 } .grid-item{ //是一个类选择器，用于选择网格布局中的单元格。 border: 1px solid black; //是一个CSS属性，用于设置单元格的边框宽度和颜色。 font-size: 20px; //是一个CSS属性，用于设置单元格中文本的字体大小。 } .itema{ grid-column: 1/span 2; grid-row: 1; } .itemb{ grid-column: 3; grid-row: 1/span 2; } .itemc{ grid-column: 1; grid-row: 2/4; } .itemd{ grid-column: 2; grid-row: 2; } .iteme{ grid-column: 2/4; grid-row: 3; } </style> </head> <body> <div class="grid-container"> <div class="grid-item itema"></div> <div class="grid-item itemb"></div> <div class="grid-item itemc"></div> <div class="grid-item itemd"></div> <div class="grid-item iteme"></div> </div> </body>
06-08
然后在标签中定义了CSS样式，包括一个类选择器.grid-container和一个类选择器.grid-item，分别用于设置网格容器和单元格的样式。在.grid-container样式中，使用display:grid将容器设置为网格布局，使用grid-template...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值