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

前情提要学写小程序，从了解源文件结构开始小程序全局文件小程序页面文件示例小程序页面文件结构关系对开发小程序的启发Flex布局根据网上教程，微信小程序采用Flex布局，它的最大优点是可以根据屏幕大小伸缩，使得一套布局在任何尺寸的屏幕上看都很漂亮。

8 J: E% }6 ~9 Q* ]. j

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

7 ~; Q5 s- J1 @: E

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

图2. 形状小制作页面布局这些实际应用场景中的页面布局，到底是垂直布局，还是水平布局呢？一开始我被这个布局问题搞得很崩溃，在写图2“形状小制作”这个页面时，我基本是“撞大运”的状态，在写每个组件的布局时，垂直布局不行就改成水平的，水平布局不行又改成垂直的，就这么改了几个小时，还是达不到想要的效果。

然后我困了，睡着了，睡梦中居然“顿悟”了小程序布局的精髓——垂直与水平的嵌套！布局精髓——嵌套仍以“算术小练习”和“形状小制作”这两个页面为例，垂直与水平布局的嵌套关系图3、图4所示。

7 w% f2 v# e- ~( n3 f

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

. l0 D" g- u3 f9 N6 O

图4. “形状小制作”布局嵌套关系图图4整体上看也是一个垂直布局，如最外层的红色虚线框所示，分为上下两个模块下面模块内部是水平布局，如紫色虚线框所示，分为左右两个模块左边模块内部是垂直布局，分为颜色选择区和文字显示区两块。

1 `4 a g2 `6 B, U! {: C

右边模块内部整体上看也是垂直布局，分为图标区和画布区两块图标区则是水平布局，水平排列着铅笔图标和橡皮图标在写页面布局的时候，只要按照上述嵌套关系把嵌套起来，把模块写在对应的里就可以了。

- J; J; W6 ]! Y8 f2 x 4 M! M. K: L; M7 s: x4 d0 u ) k& x7 p- w0 U9 i : r; e- T7 V+ c _' P

这个分享太实用了，刚好能用到，感谢楼主！