3.8 页面布局

2019-03-21 本文已影响0人 MisShop智能开发平台

MisShop通过布局区域来实现页面元素的排列。和通常的html规则相同，MisShop支持 div容器、表格布局、弹性布局、网格布局、列布局容器等通用的布局区域，以及九宫格等特殊区域。通过布局，可以使页面显示出优美的布局效果。

表格布局：可以套用常见的数据表样式，第一行是列头，其余行是数据，行和列的格子必定对齐。
弹性布局：单行的布局，每一行有12柱宽度，该行的所有单元格平分宽度。如果某个单元格占有n个格子，那么它将获得n/12的宽度。可以通过样式配置格子的实际宽度。
网格布局：就是多行的弹性布局，每行都相当于一个弹性布局，布局中的行对齐，列不一定对齐。
div容器：页面共12柱宽度，从左往右排。例如设计器中一个页面共3行4列，页面设置为div容器，则在浏览器中显示为12列。
列布局容器：对容器内元素分列显示，如3列、5列、左侧窄列等。

图中蓝色边框线将页面分割成了3个区域，其中最上方是弹性布局，中间是网格布局，下方是表格布局。下方是对应在浏览器中的显示效果，可以看出弹性布局和网格布局的区域，跟在设计器中显示有较大差别，而表格布局行列对齐，跟在设计器中看到的一样。

设置区域时，选中要设为区域的所有单元格，右键>设为区域，即可将该选中单元格设为区域，同时弹出对话框选择区域布局类型，此时区域边线上会显示蓝色边框。将鼠标指针放在蓝色边框线上，当边框线变绿色时，拖动边框线移动，待到边框线变黄又变绿时松手，即可调整区域的范围。
当要改变区域的布局类型时，需要先选择区域，这时点击区域内任意一个单元格，右键>选中区域（或Ctrl+3），即可选择该区域，此时整个区域的单元格颜色变为黄色，可以进行区域的样式或控件设置。

表格布局

选择区域后，右键>控件属性（或Ctrl+1），即可设置该区域的控件属性。此时由于已经选中区域，控件属性对话框中只出现布局和容器的选项。

选择表格，弹出表格布局的选项。

表格布局比较简单，选项较少：
整体填充方式：设置如果设计的表格区域比网页小，是否要撑开填满。
列宽按设计尺寸：设置单元格的列宽是浏览器根据列的内容自动调整，还是按照开发者的设计宽度确定。

选择区域后，右键>样式属性（或Ctrl+2），即可设置该区域的样式属性。此时由于选中区域已设置为表格布局，样式属性对话框中会出现表格布局相关的选项，开发者可以多试试看看效果。

弹性布局

弹性布局是对一行单元格区域的布局。总宽度是12柱，一个格子一般占1柱（当然如果整行元素太少，每个元素的宽度会增加，例如整行只有6个元素，那么每个元素占2柱，以此类推）。如果某个元素是合并格，那么占有合并格数的宽度，空单元格不占宽度。
可以设置其中某个格子的样式配置，来手动设置格子的宽度。如果格子宽度总和太多，默认是挤压显示，可以通过样式设置改为换行或者反向换行显示。

设置区域为弹性布局时，先选中区域，然后右键>控件配置>弹性布局容器（或Ctrl+1），此时可以设置列数和列宽，默认为12列。
设置区域的样式时，先选中区域，然后右键>样式配置（或Ctrl+2），弹出样式配置对话框。

弹性布局容器标签页中：
主轴排列方向：指这一行的元素是从左向右排列（默认），还是从右向左排列，也可以从上到下，或者从下往上排列。
主轴对齐方式：头对齐，尾对齐，居中对齐，分散对齐等。
换行方式：默认不换行，如果内容太多就挤压，可以选择换行或反向换行。
交叉轴对齐：对于常见的从左到右的布局来说，就是纵向的对齐，这一排元素是向上对齐，向下对齐，居中对齐，还是上下拉伸。
如主轴排列方向选择从右向左排列时，效果如下：

对于弹性布局区域内的单元格，设置单元格样式时，可以设置单元格占有多少栏。点击单元格，右键>样式配置，可以看到样式配置对话框中多了一个弹性容器元素的标签页，这与其他区域内单元格的样式配置不一样。

分栏宽度：设置该格子占有的宽度，12栏就是占有全部宽度。平分表示和其他设置为平分的格子一起平分所有剩余的宽度。例如只有A1格是平分，那么实际占有的会是除了剩余的5个格子之外的7栏宽度。
分栏偏移：表示这个格子前方（一般是左边）要留几栏空白。
纵向自身对齐：表示这个格子是向上对齐，还是向下对齐。如果整个弹性布局区域设置的向下对齐，而这个格子向上对齐，那么其他都会向下对齐，而该格子向上对齐。
行内水平对齐：居左、居中、居右等。
水平外边距、垂直外边距：设置外边距，如果设置最大左外边距，则将左边外边距尽量扩大。如图的增加、查询按钮，就是设置了最大左外边距。

网格布局

网格布局就是多行的弹性布局。与弹性布局不同，网格布局的行默认是自动换行，而不是挤压。
网格布局中每行也是12栏宽。一个格子一般占1栏（当然如果整行元素太少，每个元素的宽度会增加，例如整行只有6个元素，那么每个元素占2栏）。如果某个元素是合并格，那么占有合并格数的宽度。可以通过弹性布局下的单个格子的样式配置，手动设置格子的宽度。
网格布局时，其中的每一行可以单独设置样式，方法是点击所在行的单元格，右键>选中区域行，所在行变成青色，然后进行样式配置。