WebBuilder页面布局与向导交互：新手最容易忽视的两堂"排版课"

一、为什么你的页面"功能都有，就是难看"

新手做的页面，最常见的评价是："功能都实现了，就是看着……不太专业。"问题十有八九出在两处：布局没对齐、流程没节奏。按钮忽大忽小、控件挤在左边、弹窗步骤乱七八糟——这些不是审美问题，是方法问题。

geejing WebBuilder 快速开发平台把这两件事都做成了配置：布局是容器的 layout 属性，分步流程是向导组件（Wb.CardCt）。平台「示例 → basic」下的 layout 和 wizard 两个示例

二、布局：把"怎么摆"交给 layout 属性

打开「示例 → basic → layout」，一页看全所有布局形态：

1. row：一行排开

容器设置 layout: row，子组件自动从左到右排列。示例里一排按钮，有的不设宽度（自然宽度）、有的定宽（width: 10em）、有的用 flex: 1、flex: 2 按比例分剩余空间：

• flex: 1 和 flex: 2 的两个按钮，宽度永远是 1:2——拖动窗口它们一起伸缩；
• flex: "2 0 12em" 是完整写法：比例 2、不收缩、基准宽 12em。

2. 自动换行与对齐

• wrap: true（Row with auto wrap）：一行放不下自动换到下一行，窄屏也不乱；
• justify: center（Row with justify center）：整行内容水平居中——工具栏标题就是这么居中的；
• align 与 justify 组合（Row with align and justify）：垂直对齐 + 水平分布，示例里那排斜着排列的按钮演示的就是 align-items 与 justify-content 的不同取值；
• justify: between（Row with justify between）：两端对齐，中间自动撑开——"左边标题、右边按钮"的经典工具栏布局。

这些词如果让你想起 CSS 的 flexbox——没错，WebBuilder 的 row 布局就是 flexbox 的配置化封装。区别在于：你不用写一行 CSS，也不用背 display: flex 那串声明，属性面板里选一下就行；懂 flex 的人可以无缝上手，不懂的人看属性名也能猜个八九不离十。

3. 别忘了 grid 与 fit

除了 row，还有两个高频布局：

• layout: grid1 / grid2 / grid3：按 1 列、2 列、3 列栅格自动排列子控件——表单组件那篇讲过，配合 autoGrid: true 和 gridColumn: span 2 跨列，就是整张表单的对齐方案；
• layout: fit：子组件撑满整个容器——Viewport、弹窗内容区、图表容器默认用它。

记住一个原则：布局是容器的事。子组件只管声明自己的宽、高、flex，怎么排由父容器决定。把这句话刻进脑子里，你的页面就再也不会"挤成一团"。

三、向导：把长流程切成有节奏的步骤

第二个示例是「示例 → basic → wizard」，一个典型的"应用创建向导"：

它的实现核心是卡片容器（Wb.CardCt）：四个步骤就是四个 Container 子节点，同一时刻只显示一张卡片。上一步/下一步只是改一个索引：

click: app.cardCt1.activeIndex++;
app.setButtons();

// initialize 事件里定义的按钮状态控制
setButtons() {
  let ct = app.cardCt1, activeIndex = ct.activeIndex;
  app.prevBtn.disabled = activeIndex == 0;
  app.nextBtn.disabled = activeIndex >= ct.items.length - 1;
}

拆解一下这套"向导套路"，你会发现它非常通用：

1. 步骤即卡片：每一步是一个 Container，想加一步就加一个子节点，不用管页面切换动画（内置）；
2. 状态即索引：activeIndex 一个数字描述整个流程进度；
3. 边界即禁用：第一步禁"上一步"、最后一步把"下一步"换成"完成"，逻辑就是两个比较表达式；
4. 校验各管各的：每一步的表单控件自己负责校验，不通过就不让切页。

注册向导、安装向导、多步审批、分期录入……所有"分步走"的场景，都是这一套模板。

四、动手练习：仿一套"新建项目向导"

1. 打开「示例 → basic → layout」，把每一行布局的容器属性在 IDE 里点开对照；
2. 新建模块，用 row + flex 布局复刻一排"标题居中、按钮靠右"的工具栏；
3. 打开 wizard 示例，把四个步骤的内容换成你的业务（比如：基本信息 → 成员选择 → 参数配置 → 完成）；
4. 给"下一步"加校验：当前卡片里有必填控件没填，就不允许切换；
5. 最后一步的"完成"按钮里，把前面几步的数据合并提交（一个 Wb.ajax 就够了）。