HarmonyosJS开发部模型16：鸿蒙LayoutGrid网格布局应用1

时间：2023-03-12 01:29:51 科技观察

更多信息请访问：与华为官方共建的Harmonyos技术社区https://harmonyos.51cto.com1。目前鸿蒙css布局方案中，除了Flex布局，网格布局Grid可以算是最强大的布局方案。它可以将网页划分成网格，然后利用这些网格的组合来进行各种布局。容器中的水平区域称为“行”，垂直区域称为“列”。行和列重叠的空间形成将单元格划分为网格的线，称为“网格线”。黄色代表列的网格线。绿色代表行的网格线。Grid类似于flex。布局属性分为两类。一种定义在容器上，称为容器属性，另一种定义在项目上，称为项目属性。显示属性display:grid指定一个容器为网格布局，

.container{width:100%;display:grid;/**采用网格布局**/background-color:palevioletred;/**grid-template-columns:100px200px300px;grid-template-rows:200px200px;**/grid-template-columns:1fr1fr1fr;grid-template-rows:200px300px;}.item{border:5pxsolidwhite;width:100%;height:100%;}布局效果如下：特别注意grid-template-columns和grid-template-rowsgrid-template-columns：用于指定行grid-template-rows的宽度：用于指定行的高度1.1也可以用百分比表示1.2grid提供了fr关键字（fraction的缩写，意为“片段”），如果两列的宽度分别为1fr和2fr表示后者是前者的两倍1.3可以使用特定的像素单元。2、使用Grid布局构建底部菜单栏和整体页面的拆分控件。效果如下：2.1部分页面视图代码：<文本>{{$item.name}}2.2业务逻辑js代码，数据构建exportdefault{data:{title:'World',menus:[{"name":"Home","path":"common/fs.png"},{"name":"Category","path":"common/cs.png"},{"name":"travel","path":"common/ls.png"},{"name":"my","path":"common/ms.png"}]}}2.3css使用Grid布局,.container{width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:88%12%;}.contentview{width:100%;height:100%;border:5pxsolidpowderblue;}.bottomview{width:100%;height:100%;border:5pxsolidcadetblue;display:grid;grid-template-columns:1fr1fr1fr1fr;grid-template-rows:100%;}.box{width:100%;height:100%;border:8pxsolidgreen;display:grid;grid-template-columns:1fr;grid-template-rows:70%30%;}.boximg{width:80%;height:100%;/**border:2pxsolidred;**/display:flex;justify-content:center;align-items:center;}.boxtxt{width:100%;height:100%;/**border:2pxsolidblue;**/display:flex;justify-content:center;}.topimg{width:65px;height:65px;}这是网格layout构建底部菜单栏的具体实现可以类比Flex布局的技术3.grid-row-gap和grid-column-gap属性grid-row-gap：设置行之间的间隔grid-columm-gap：设置列之间的间隔grid-row-gap和grid-ifcolunms-gap合并缩写，格式为grid-gap123456.container{width:100%;background-color:#f3f3f3;display:grid;grid-template-columns:33%33%33%;grid-template-rows:200px300px;grid-columns-gap:20px;grid-rows-gap:20px;}.item1{width:100%;height:100%;border:1pxsolid#fff;color:#fff;font-weight:bold;background-color:powderblue;display:flex;justify-content:center;align-items:center;}设置区间效果如下：网格布局和香港的Flex布局萌萌、PC、小程序都有非常广泛的应用，也是排版标准。入门的同学可以选择从这里入手，可以充分掌握鸿蒙的应用开发，再切入鸿蒙的Java开发进行深入学习，请访问：https://harmonyos.51cto.com，与华为官方合作搭建的鸿蒙技术社区

上一篇：Nginx+Keepalived实现web服务器高可用

下一篇：58沉健：数据库秒级平滑扩展架构方案

HarmonyosJS开发部模型16：鸿蒙LayoutGrid网格布局应用1相关文章