在 Ant Design Pro Components 中实现 BetaSchemaForm 分组两列布局

背景介绍

Ant Design Pro Components 是一个基于 Ant Design 的企业级组件库，其中 BetaSchemaForm 组件提供了一种基于 JSON Schema 的声明式表单构建方式。在实际业务场景中，我们经常需要实现复杂的表单布局，比如将表单内容分成左右两列显示。

需求分析

在表单设计中，有时我们需要将一个分组下的内容分成左右两部分显示，每部分包含各自的字段集合。这种布局方式在需要对比显示或节省空间时非常有用。例如：

• 左侧显示基本信息，右侧显示扩展信息
• 左侧为必填项，右侧为选填项
• 左侧为当前状态，右侧为修改选项

解决方案

基本实现方法

通过 BetaSchemaForm 的 valueType: 'group' 和 colProps 属性，我们可以轻松实现两列布局：

const columns = [
  {
    valueType: 'group',
    columns: [
      {
        title: '左侧分组',
        valueType: 'group',
        colProps: { span: 12 },
        columns: [
          { title: '字段1', dataIndex: 'field1' },
          { title: '字段2', dataIndex: 'field2' }
        ]
      },
      {
        title: '右侧分组',
        valueType: 'group',
        colProps: { span: 12 },
        columns: [
          { title: '字段3', dataIndex: 'field3' },
          { title: '字段4', dataIndex: 'field4' }
        ]
      }
    ]
  }
];

关键属性说明

1. valueType: 'group'：声明这是一个分组容器
2. colProps: { span: 12 }：设置分组占据的栅格列数，12 表示占据一半宽度
3. columns：嵌套的子字段配置

完整示例

下面是一个完整的实现示例，包含了表单的渲染和布局控制：

import { BetaSchemaForm } from '@ant-design/pro-components';
import { Card } from 'antd';

const TwoColumnForm = () => {
  const columns = [
    {
      valueType: 'group',
      columns: [
        {
          title: '基本信息',
          valueType: 'group',
          colProps: { span: 12 },
          columns: [
            { title: '姓名', dataIndex: 'name' },
            { title: '年龄', dataIndex: 'age', valueType: 'digit' }
          ]
        },
        {
          title: '扩展信息',
          valueType: 'group',
          colProps: { span: 12 },
          columns: [
            { title: '邮箱', dataIndex: 'email', valueType: 'email' },
            { title: '手机号', dataIndex: 'phone', valueType: 'text' }
          ]
        }
      ]
    }
  ];

  return (
    <Card style={{ width: 800 }}>
      <BetaSchemaForm 
        grid={true} 
        columns={columns} 
        onFinish={async (values) => {
          console.log(values);
          return true;
        }}
      />
    </Card>
  );
};

布局原理

1. 栅格系统：Ant Design 使用 24 栅格系统，span: 12 表示占据一半宽度
2. 嵌套结构：外层 group 包含两个内层 group，每个内层 group 设置不同的 span
3. grid 属性：grid={true} 启用栅格布局模式，使 colProps 生效

高级用法

响应式布局

可以通过 colProps 设置不同屏幕尺寸下的布局：

colProps: { 
  xs: 24,  // 超小屏幕下占满
  sm: 12,  // 小屏幕下一半
  md: 12,  // 中等屏幕下一半
  lg: 8    // 大屏幕下三分之一
}

混合布局

可以在分组中混合使用不同比例的列：

columns: [
  {
    title: '主内容',
    valueType: 'group',
    colProps: { span: 16 },
    // ...
  },
  {
    title: '侧边栏',
    valueType: 'group',
    colProps: { span: 8 },
    // ...
  }
]

常见问题

1. 布局错乱：确保外层容器宽度足够，避免挤压内部布局
2. 字段对齐：同一分组内的字段高度最好保持一致
3. 表单验证：分组布局不影响表单验证逻辑，验证规则按字段配置

总结

通过 BetaSchemaForm 的分组和栅格系统，我们可以灵活地实现各种复杂的表单布局。两列布局是其中常见的需求，掌握这种布局方式可以显著提升表单的可读性和用户体验。在实际项目中，可以根据业务需求调整列宽比例和响应式设置，打造最适合当前场景的表单界面。