|
尊敬的校长，您好！
通过前两篇教程，我们的小程序首页已经有了专业级的轮播图“门面”，并且我们还拥有了一个可以随时更新它的“后台办公室”。现在，我们要为首页添加几个核心功能的快速入口，让家长和学员一眼就能找到他们最关心的内容，比如“品牌介绍”、“师资团队”等等。
在行业里，我们常把这块由几个图标按钮组成的区域称为“金刚区”，因为它承载着最核心、最强大的功能入口。今天，我们就来搭建这个区域。
第一步：规划“柜子”（使用网格布局）
想象一下，我们要在墙上挂四个装饰画，为了让它们整齐划一，我们最好先在墙上画好四个同样大小的格子。在小程序开发中，这个“格子”就是“网格布局”组件。
回到首页设计器：打开您的“阳光舞蹈”小程序应用，进入首页的可视化编辑界面。
拖入网格组件：
在左侧的组件库中，找到“布局”分类下的“网格布局”组件。
将它拖拽到首页画布中，放置在轮播图的正下方。
设置网格：
选中刚刚拖入的网格组件。在右侧的“属性”面板中，设置常用布局属性，选择3：3：3：3。这样，我们就得到了一个完美的一行四列的“柜子”，准备用来放置我们的导航按钮。
第二步：精心制作第一个“抽屉”（创建导航按钮）
我们先集中精力把第一个按钮“品牌介绍”做到完美，剩下的三个就可以直接复制粘贴，事半功倍。为了形成一个颜色的反差，我们先将页面的背景色设置为灰色
放入“抽屉”背景（普通容器）：
从左侧组件库拖一个“普通容器”到网格布局的第一个格子里。将背景色设置为白色
设置布局为纵向排列，水平垂直居中
在里边继续添加普通容器，作为图标的容器
设置宽和高各位50
设置淡粉色作为背景色
 设置一定的圆角
上传并放入图标：
首先，我们需要把要用到的星星、团队、奖杯、相机等图标素材上传到平台的“素材管理”中心。这就像是把您的照片存入云相册，方便随时调用。
点击素材与资源，点击上传图片
上传完毕后，从左侧组件库拖一个“图标”组件，注意，要把它拖到刚刚创建的那个粉色容器内部。
选中这个图标，在右侧属性面板中，图片类型选择自定义图标，选择我们的素材
设置父容器的布局，纵向排列，水平垂直居中
添加说明文字：
从右侧组件库拖一个“文本”组件，把它放到网格布局的第一个格子里，位于粉色容器的下方。
选中这个文本组件，在右侧属性面板中，将文本内容修改为“品牌介绍”。
第三步：设置内外边距
默认情况下组件和组件之间没有空间，看起来很挤。我们先让最外层的容器有一定的内边距
设置文本的外边距让文本和图标有一定的间距
第四步：快速复制，批量生产
最难的一步已经完成了！现在我们来快速制作剩下三个按钮。
选中网格布局第一个格子里的所有内容。通常选择最外层的普通容器，点击鼠标右键，点击复制
粘贴：
依次点击第二个、第三个、第四个格子，按 Ctrl+V 将内容粘贴进去。现在您就拥有了四个一模一样的“品牌介绍”按钮。
逐个修改：
第二个按钮：选中它的容器，背景色改为淡紫色；选中图标，更换为“师资团队”图标；选中文本，内容改为“师资团队”。
第三个按钮：选中它的容器，背景色改为淡蓝色；选中图标，更换为“奖杯”图标；选中文本，内容改为“特色课程”。
第四个按钮：选中它的容器，背景色改为淡绿色；选中图标，更换为“相机”图标；选中文本，内容改为“机构荣誉”。
大功告成！
|