【Harmony3.1/4.0】笔记三

news2024/10/1 15:02:48

概念

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

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

网格布局-计算器

代码如下

@Entry
@Component
struct One{
  build(){
    Column(){
      Row(){
        Text("计算器").fontSize(28)
          .fontColor(Color.White).fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center).width("100%")
      }.height(60).backgroundColor("#600f").width("100%")
      Row(){
        Column(){
          Text("0").textAlign(TextAlign.End)
            .width("100%").margin({right:20,top:5})
            .fontSize(26).fontWeight(1).height("50%")
          Text("0").textAlign(TextAlign.End)
            .width("100%").margin({right:20,top:5})
            .fontSize(26).fontWeight(1)
        }.width("100%").height("100%")
      }.borderWidth(5).borderColor("#600f").margin({ left:20,right:20,top:1 })
      .width("100%").height(120)
      Grid(){
        GridItem(){
          Button("MC").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1})
        GridItem(){
          Button("MR").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("MS").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("M+").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("-").type(ButtonType.Normal).fontSize(24)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({ right:5 })
        GridItem(){
          Button("←").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1})
        GridItem(){
          Button("CE").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("C").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("±").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("√").type(ButtonType.Normal).fontSize(24)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({ right:5 })
        GridItem(){
          Button("7").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1})
        GridItem(){
          Button("8").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("9").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("/").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("%").type(ButtonType.Normal).fontSize(24)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({ right:5 })
        GridItem(){
          Button("4").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1})
        GridItem(){
          Button("5").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("6").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("*").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("1/").type(ButtonType.Normal).fontSize(24)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({ right:5 })
        GridItem(){
          Button("1").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1})
        GridItem(){
          Button("2").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("3").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("-").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("=").type(ButtonType.Normal).fontSize(24).margin({bottom:20,top:10})
            .borderRadius(10).width("98%").height("75%").backgroundColor("#600f")
        }.margin({ right:5 }).rowStart(4).rowEnd(5)
        GridItem(){
          Button("0").type(ButtonType.Normal).fontSize(22).margin({bottom:20})
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1}).columnStart(0).columnEnd(1)
        GridItem(){
          Button(".").type(ButtonType.Normal).fontSize(22).margin({bottom:20})
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("+").type(ButtonType.Normal).fontSize(22).margin({bottom:20})
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }


      }.width("100%").height("80%")
      .columnsTemplate("1fr 1fr 1fr 1fr 1fr")
      .rowsTemplate("1fr 1fr 1fr 1fr 1fr 1fr ")
      .columnsGap(5)
    }.width("100%")
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue2 —— 学习(十)

一、vue-resource 库 了解即可 在之前的 vue 版本中经常使用 这个库发送 ajax 请求 现在建议使用 axios 我们可以通过使用 vue-resource 库 来实现发送 ajax 请求 它是 vue 的一个插件库 Vue.use() 就能使用我们的插件了 我们引入后去 我们的实例对象 vc 中查看 发现出现…

设计模式之访问者模式(下)

3)访问者模式与组合模式联用 1.概述 在访问者模式中,包含一个用于存储元素对象集合的对象结构,可以使用迭代器来遍历对象结构,同时具体元素之间可以存在整体与部分关系,有些元素作为容器对象,有些元素作为…

2024年小程序视频下载教程

现在已经是2024年,还是有很多人不知道如何下载小程序视频,这里就教大家如何下载小程序视频,一共有3种方法 1.录屏 2.利用抓包工具(Fiddler&Charles) 3.利用专门的下载资源工具(下载高手) 我介绍其中的第3种方法 工具我已经打包好了 …

【Linux学习】Linux调试器-gdb使用

这里写目录标题 🌂背景🌂gdb使用🌂指令总结: 🌂背景 程序的发布方式有两种,debug模式和 release模式 其中,debug模式是可以被调试的,到那时release模式是不能被调试的; …

股东减持,营收“四连降”,三只松鼠用什么撑起“百亿”野心?

近日,国内零食品牌三只松鼠(SZ:300783)发布了2023年业绩报告。从规模效益的层面出发,三只松鼠在高端化和高性价比逻辑下对门店进行了集中优化,虽然营收略有下降,但利润端却实现了强势回暖。 不过&#xff…

表达式求值(后缀表达式)(数据结构)

一、概念 算术表达式是由操作数(运算数)、运算符(操作符)、和界线符(括号)三部分组成,在计算机中进行算术表达式的计算是通过堆栈来实现的。 二后缀表达式的逻辑和实现方式(逆波兰…

4*5的矩阵(C语言)

一、N-S流程图&#xff1b; 二、运行结果&#xff1b; 三、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int i 0;int j 0;int result 0;//嵌套循环输出&#xff1b;for (i 1; i < 4; i){//列…

冯喜运:4.22黄金蒋继续“消化超买“,原油回落,通胀担忧缓解?

【 黄金消息面解析】&#xff1a;上周五(4月19日)伊朗媒体似乎淡化了以色列袭击的影响&#xff0c;表明地缘政治风险降低&#xff0c;导致避险资产需求放缓&#xff0c;金价回吐涨幅。上周现货黄金价格上涨超2%。美国黄金期货收盘上涨0.7%&#xff0c;至2413.8美元。从长期来看…

前端开发攻略---合并表格单元格,表格内嵌套表格实现手风琴效果。

1、演示 2、思路 1、用传统的 <table></table> 表格标签来实现比较麻烦。因此通过模拟 表格标签 的写法用<div></div>来实现 2、表头和表格列数是相同的&#xff0c;因此可以确定代码结构 <div class"table"><div class"head…

【Linux 进程间通信】管道(三)

文章目录 1.管道的五种特征2.管道的四种情况 1.管道的五种特征 ①&#x1f34e;匿名管道只能用于有血缘关系的进程之间进行通信&#xff08;爷孙进程之间可以进行通信&#xff09;&#xff0c;常用于父子之间进行通信&#xff1b; ②&#x1f34e;管道内部&#xff0c;自带进…

Mysql的【存储引擎】之【InnoDB】与【MyISAM】的区别

目录 1.存储引擎在 MyISAM 和 InnoDB 有什么区别 2.Mysql 5.7 默认的存储引擎是什么 3.一个简单例子&#xff08;如果非要使用【MyISAM】存储引擎 &#xff09; 4.2009年写的留言板程序的数据&#xff08;存储引擎是&#xff1a;【MyISAM】&#xff09; 5.mysql 8.0 可以使…

【简单讲解下如何用爬虫玩转石墨文档】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

UV胶水能够粘接丙烯腈-丁二烯-苯乙烯共聚物ABS吗?

UV胶水能够粘接丙烯腈-丁二烯-苯乙烯共聚物ABS吗&#xff1f; UV胶水通常能够用于粘接丙烯腈-丁二烯-苯乙烯共聚物&#xff08;ABS&#xff09;。UV胶水的优势之一是其适用于多种材料的粘接&#xff0c;包括ABS。然而&#xff0c;成功的粘接还取决于一些因素&#xff0c;包括表…

ActiveMQ 如果数据处理出现异常会怎么样

我们有一个 Spring 的客户端&#xff0c;在处理消息的时候因为程序的原因出现消息处理异常。 对这种情况&#xff0c;ActiveMQ 会把出现异常的消息放在 DLQ 队列中进行持久化。 因此&#xff0c;在 ActiveMQ 消息处理队列中需要持续关注 DLQ 队列&#xff0c; DLQ 的队列都是无…

记录好用的python包

记录好用的python包 PipxCentos 安装pipx确保 Pip 被安装更新 Pip安装 Pipx添加 Pipx 到 PATH临时添加到 PATH:永久添加到 PATH: 验证 Pipx 安装 Hatch安装特性 Poetry安装准备工作创建虚拟环境激活虚拟环境安装包追踪 & 更新包常用配置pycharm 远程连接poetry创建的虚拟环…

《QT实用小工具·三十四》Qt/QML使用WebEngine展示的百度ECharts图表Demo

1、概述 源码放在文章末尾 该项目实现了百度ECharts图表的样式&#xff0c;效果demo如下所示&#xff1a; 项目部分代码如下所示&#xff1a; #include <QGuiApplication> #include <QQmlApplicationEngine> #include <QtWebEngine>int main(int argc, ch…

第二证券|炒股如何降低成本?降低成本放大收益!

炒股便是以股票为出资标的&#xff0c;以低价买入、高价卖出的办法赚取差价&#xff0c;其核心内容便是通过证券市场的买入与卖出之间的股价差额获利。那么炒股怎么下降本钱&#xff1f;下面就由第二证券为大家剖析&#xff1a; 炒股怎么下降本钱&#xff1f; 1、股价跌落买进…

8.0 新特性 - RESOURCE GROUP

文章目录 前言1. 应用场景2. 资源组介绍3. 资源组维护4. 资源组的限制 前言 MySQL 是单进程多线程的程序&#xff0c;在 8.0 之前所有的线程优先级都是相同的&#xff0c;并且所有的线程资源都是共享的。8.0 之后推出 RESOURCE GROUP 特性 DBA 可以通过资源组的方式修改线程优…

怎么开通扣款服务(原委托代扣),看这一篇就足够你快速开通自动续费周期扣款了。

一、什么是扣款服务 扣款服务&#xff08;原委托代扣&#xff09;为微信支付为商户和用户提供的&#xff0c;可以在交易场景之外完成支付的能力。委托代扣是指商户取得用户的扣款授权后&#xff0c;向微信支付发起从用户账户扣款至商户账户的扣款指令,微信支付无需验证用户的支…

解开Intel ECI 的面纱

前言 Intel ECI是一个用于工业领域边缘控制的软硬件平台&#xff0c;我们今天主要探索的是软件部分&#xff0c;也就是系统镜像。区别于传统的Ubuntu或者Debian&#xff0c;ECI的强大之处在于它的实时性以及对于Intel自家芯片的缓存优化能力极强。 那么让我们来探索一下 编译…