微搭低代码从入门到精通12-网格布局
创始人
2024-05-25 15:04:43
0

开发小程序首要的就是考虑布局的问题,我们在以前的版本只能选择普通容器结合图片和文本组件来构建页面。

使用通用组件布局也可以,但有个问题是你要先学习CSS,要懂布局的概念,比如需要知道啥是flex布局,然后还得熟悉每个属性取啥值是啥效果。

要想熟练掌握CSS,一个要先学习相应的知识,另外一个就是要动手做。对于零基础的使用者来说,无疑提高了门槛。

最近更新的版本中新推出了一个布局组件,网格布局。使用起来就比较方便,本篇我们介绍一下网格布局的用法。

01 案例效果

在这里插入图片描述

02 布局拆解

一般我们看到一个布局就先要进行拆解,网格布局是用行和列来进行拆解的,我们可以看到我们要的效果可以拆解成一行两列。第一列放置一个文本组件,第二列放置一个图标组件。

还有就是下划线,下划线既可以使用组件也可以用边框实现,使用边框实现会比较紧凑,调整组件的高度时边框会自动进行调整。如果单独用分割线组件的话比较占空间,留白较多

03 搭建方法

先往页面中放置网格布局

在这里插入图片描述

如果调整列数量,会根据数字来自动添加或者删除多余的列组件,我们将列调整为2

在这里插入图片描述

目前这两列是横向平分,我们的效果是图标是在右边,我们选中第二列,将列宽度改为适应内容

在这里插入图片描述

然后分别给列组件添加文本组件和图标组件

在这里插入图片描述

修改文本组件的文字内容,改为最新推荐,设置文本格式为标题H6

在这里插入图片描述

图标的话选择向右的箭头

在这里插入图片描述

现在内容比较挤,可以给一些留白,留白通过设置边距来实现,给一定的外边距

在这里插入图片描述

下划线的话我们只需设置下边框即可

在这里插入图片描述

然后给一点内边距,让边框距离文字有一定的间隔

在这里插入图片描述

这样一个页面就搭建好了。经常有粉丝问,我是零基础的,我想学习这个工具开发产品可以么。

其实我建议以下几种类型的人学习这个工具,第一类是你本身就有一定的商业洞察力,已经发现了一些未满足的需求。那么你可以投入一些精力来学习,投入最小的成本来验证自己的商业想法是否可行。

第二类就是本身已经有一个经营起来的生意,可以用低码工具帮自己很好的运营你现有的生意,你也不指望用你产品的人给你付费或者通过广告来增加收入。

第三类就是身处企业的IT部门,本身企业就有一些信息化的需求,以前可能要借助乙方才能实现,现在可以快速搭建一下场景来满足企业的信息化需求。

因为现在低码工具也才处于普及阶段,有些零基础的希望学习低代码直接做低码开发工作,我建议如果你的财务压力不大,可以预研,如果比较大还是先学习传统开发比较好,后续等形成行业了再转入低码开发也不迟。

相关内容

热门资讯

【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
AsusVivobook无法开... 首先,我们可以尝试重置BIOS(Basic Input/Output System)来解决这个问题。...
ASM贪吃蛇游戏-解决错误的问... 要解决ASM贪吃蛇游戏中的错误问题,你可以按照以下步骤进行:首先,确定错误的具体表现和问题所在。在贪...
月入8000+的steam搬砖... 大家好,我是阿阳 今天要给大家介绍的是 steam 游戏搬砖项目,目前...