微信小程序学习总结(3)——“顿悟”页面布局

 前情提要学写小程序，从了解源文件结构开始小程序全局文件小程序页面文件示例小程序页面文件结构关系对开发小程序的启发Flex布局

根据网上教程，微信小程序采用Flex布局，它的最大优点是可以根据屏幕大小伸缩，使得一套布局在任何尺寸的屏幕上看都很漂亮。

我们看一些网上教程，通常学到的页面布局要么是垂直布局，要么是水平布局，但是实际上小程序的页面布局是非常灵活的。以我的小程序“YOYO小宝箱”为例，图1和图2展示了灵活的小程序页面布局。

图1. 算术小练习页面布局

图2. 形状小制作页面布局

这些实际应用场景中的页面布局，到底是垂直布局，还是水平布局呢？

一开始我被这个布局问题搞得很崩溃，在写图2“形状小制作”这个页面时，我基本是“撞大运”的状态，在写每个组件的布局时，垂直布局不行就改成水平的，水平布局不行又改成垂直的，就这么改了几个小时，还是达不到想要的效果。然后我困了，睡着了，睡梦中居然“顿悟”了小程序布局的精髓——垂直与水平的嵌套！

仍以“算术小练习”和“形状小制作”这两个页面为例，垂直与水平布局的嵌套关系图3、图4所示。

图3. “算术小练习”布局嵌套关系图

图3整体上看是垂直布局，如最外层的红色虚线框所示。在垂直布局自上而下的第三个模块内部，是一个内嵌的水平布局，如中间的紫色虚线框所示。在水平布局的右侧模块内部，是一个内嵌的垂直布局（删除图标和OK图标）。

图4. “形状小制作”布局嵌套关系图

图4整体上看也是一个垂直布局，如最外层的红色虚线框所示，分为上下两个模块。下面模块内部是水平布局，如紫色虚线框所示，分为左右两个模块。左边模块内部是垂直布局，分为颜色选择区和文字显示区两块。右边模块内部整体上看也是垂直布局，分为图标区和画布区两块。图标区则是水平布局，水平排列着铅笔图标和橡皮图标。

在写页面布局的时候，只要按照上述嵌套关系把<view>嵌套起来，把模块写在对应的<view>里就可以了。