当前位置: 首页 > news >正文

微搭低代码从入门到精通12-网格布局

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

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

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

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

01 案例效果

在这里插入图片描述

02 布局拆解

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

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

03 搭建方法

先往页面中放置网格布局

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

图标的话选择向右的箭头

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

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

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

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

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

http://www.lryc.cn/news/2728.html

相关文章:

  • 【c语言】二叉树
  • 六、Java框架之SpringBoot
  • 「Python|环境安装|Windows」如何在Windows上安装Python环境?
  • 人工智能轨道交通行业周刊-第33期(2023.2.6-2.12)
  • 五分钟看懂Java字节码:极简手册
  • C++ 类与对象(下)
  • Java基础——I/O
  • 关于@hide的理解
  • 使用python加密主机文件几种方法实现
  • 西湖论剑 2023 比赛复现
  • 微信小程序更换管理员/重置管理员
  • 企业进存销管理系统
  • C++入门
  • 视频知识点(20)- H264码流如何在SPS中获取宽高信息?
  • 鲜花数据集实验结果总结
  • ElasticJob-Lite架构篇 - 认知分布式任务调度ElasticJob-Lite
  • 【直击招聘C++】2.6 对象之间的复制
  • 学了这么久python,不会连自己啥python版本都不知道吧?
  • Revive:从间谍软件进化成银行木马
  • Python 之 NumPy 简介和创建数组
  • 与六年测试工程师促膝长谈,他分享的这些让我对软件测试工作有了全新的认知~
  • 裕太微在科创板上市:市值约186亿元,哈勃科技和小米基金为股东
  • 毕业后5年,我终于变成了月薪13000的软件测试工程师
  • 实践指南|如何在 Jina 中使用 OpenTelemetry 进行应用程序的监控和跟踪
  • MySQL 创建数据表
  • 一文详解网络安全事件的防护与响应
  • vue directive 注册局部指令
  • LC-70-爬楼梯
  • Scratch少儿编程案例-可爱的简约贪吃蛇
  • 编译 Android 时如何指定输出目录?