鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?【课程入口】

目录:
1.Grid简介
2.使用Grid布局实现的效果
3.grid-row-gap和grid-colunm-gap属性
4.《鸿蒙的js开发模式》系列文章合集

1.目前鸿蒙css布局方案中,除了Flex布局 ,网格布局Grid可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。

容器里面的水平区域称为“行”,垂直区域称为“列”,行列重叠出来的空间组成单元格

划分网格的线,称为”网格线“

黄色的代表是列的网格线,绿色代表的是行的网格线。Grid和flex类似,布局的属性都是分为两类,一类定义在容器上,称为容器属性,一类定义在项目上,称为项目属性。

display属性
display:grid指定一个容器为网格布局,

<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div> <div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
.container {
width: 100%;
display: grid; /**采用grid布局**/
background-color: palevioletred;
/** grid-template-columns: 100px 200px 300px;
grid-template-rows: 200px 200px;**/
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 300px ;
}
.item
{
border: 5px solid white;
width: 100%;
height: 100%; }

布局效果如下:

特别注意

grid-template-columns和 grid-template-rows
grid-template-columns:用来指定行的宽度

grid-template-rows:用来指定行的高度

1.1也可以使用百分比来表示

1.2 网格提供了fr关键字(fraction的缩写,意为“片段”),如果两列的宽度分别为1fr和2fr,就表示后者是前者的2倍

1.3 可以使用具体的像素单位。

2.使用Grid布局构建底部菜单栏和整体页面的分割控制,实现的效果如下:

2.1页面视图部分代码:

<div class="container">
<div class="contentview"> </div>
<div class="bottomview">
<block for="{{menus}}">
<div class="box">
<div class="boximg">
<image class="topimg" src="{{$item.path}}"></image>
</div>
<div class="boxtxt">
<text>{{$item.name}}</text>
</div> </div> </block>
</div>
</div>

2.2 业务逻辑js代码,数据构建

export default {
data: {
title: 'World',
menus:[{"name":"首页","path":"common/fs.png"},{"name":"分类","path":"common/cs.png"},
{"name":"旅游","path":"common/ls.png"},{"name":"我的","path":"common/ms.png"}]
}
}

2.3 css采用 Grid布局,

.container {
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 88% 12%;
}
.contentview{
width: 100%;
height: 100%;
border: 5px solid powderblue;
}
.bottomview{
width: 100%;
height: 100%;
border: 5px solid cadetblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100%;
}
.box{
width: 100%;
height: 100%;
border: 8px solid green;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 70% 30%; }
.boximg{
width: 80%;
height: 100%;
/** border:2px solid red;**/
display: flex;
justify-content: center;
align-items: center;
}
.boxtxt{
width: 100%;
height: 100%;
/** border:2px solid blue;**/
display: flex;
justify-content: center;
}
.topimg{
width: 65px;
height: 65px; }

这个是Grid布局构建底部菜单栏的具体实现,可以和Flex布局做个技术的对比。

3.grid-row-gap和grid-colunm-gap属性

grid-row-gap:设置行与行之间的间隔

grid-colunm-gap:设置列于列之间的间隔

grid-row-gap和grid-colunms-gap合并简写的话,格式为grid-gap

<div class="container">
<div class="item1">
<text>1</text>
</div>
<div class="item1">
<text>2</text>
</div>
<div class="item1">
<text>3</text>
</div>
<div class="item1">
<text>4</text>
</div>
<div class="item1">
<text>5</text>
</div>
<div class="item1">
<text>6</text>
</div>
</div>
.container {
width:100%;
background-color: #f3f3f3;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 200px 300px ;
grid-columns-gap: 20px;
grid-rows-gap: 20px;
}
.item1{ width: 100%;
height: 100%;
border:1px solid #fff;
color:#fff;
font-weight: bold;
background-color: powderblue;
display: flex;
justify-content: center;
align-items: center;
}

设置间隔效果如下:

Grid布局和Flex布局在鸿蒙,PC,小程序都有非常广泛的应用,也是布局标准,入门的同学,可以选择从这里起步,能够够好的掌握鸿蒙的应用开发,然后在切入到鸿蒙的Java开发。

作者:六合李欣

想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com

鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一的更多相关文章

  1. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  2. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

  3. grid网格布局使用

    定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

  4. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  5. python之tkinter使用-Grid(网格)布局管理器

    # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

  6. Grid 网格布局

    CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

  7. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  8. CSS3中的display:grid网格布局介绍

    1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...

  9. Android布局_网格布局GirdLayout

    自Android4.0版本后新增的GirdLayout网格布局(API 14) <?xml version="1.0" encoding="utf-8"? ...

  10. TKinter布局之grid 网格布局

    1.由于我们的程序大多数都是矩形,因此特别适合于网格 布局,也就是 grid 布局. 2.使用 grid 布局的时候,我们使用 grid 函数,在里面指 定两个参数,用 row 表示行,用 colum ...

随机推荐

  1. 一对一还是一对多? MVP设计前提

    设计MVP之前,先要确定好以下模块之间是一对多还是一对一的关系: View ---> Presenter --> Model --> Interface(URL) 就是一个View只 ...

  2. 关于js中for in和foreach in的区别

    js 中for in 和foreach in的区别 两个的作用都用来遍历对象,但为什么有了for in语句了还要foreach in语句呢,后来看了下foreach in开发的文档,foreach i ...

  3. android service 学习

    参考:http://www.cnblogs.com/allin/archive/2010/05/15/1736458.html http://www.cnblogs.com/allin/archive ...

  4. Excel合并单元格数据

    1.=A1&B1 2.=CONCATENATE(A1,B1)

  5. MD5Encoder加密支持utf-8

    import java.security.MessageDigest; public class MD5Encoder { public static String encode(String str ...

  6. 移植FastBlur模糊算法至SDL

    FastBlur是Android标配的模糊算法,这也在当时引起了一股毛玻璃热潮.IOS7就采用了此算法(这有抄袭Android之嫌,因为Android1.5就在标库中加入了此函数).算法效率很高,这也 ...

  7. php操作xml详解

    XML是一种流行的半结构化文件格式,以一种类似数据库的格式存储数据.在实际应用中,一些简单的.安全性较低的数据往往使用 XML文件的格式进行存储.这样做的好处一方面可以通过减少与数据库的交互性操作提高 ...

  8. ap143 led修改

    以前的硬件版本只使用了一个eth口,新的板子增加了一个eth口,并且增加了响应的通信时使用的灯. led修改涉及到一下的内容: (1)led 对应的gpio口(这个需要根据原理图来定义) 需要修改的源 ...

  9. Idea+maven+tomcat部署第一个tomcat项目

    IDEA创建Maven项目及部署发布,IDEA配置Tomcat,创建java源文件夹. 此教程适合刚刚使用IDEA的新手. 工具/原料   IntelliJ IDEA 2016.3.4 apache- ...

  10. jmeter之JDBC Request各种数据库配置

    URL和JDBC驱动: Datebase Driver class Database URL MySQL com.mysql.jdbc.Driver jdbc:mysql://host:port/{d ...