无需代码！3分钟用Formily拖拽构建企业级表单界面
项目地址: https://gitcode.com/gh_mirrors/fo/formily 你是否还在为开发复杂表单界面而烦恼？还在为调整表单布局和验证规则而编写大量代码？本文将带你探索如何使用Formily表单设计器，通过简单拖拽即可快速构建专业级表单，无需编写复杂代码，让你3分钟内完成原本需要几小时的表单开发工作。
读完本文后，你将能够：
- 了解Formily表单设计器的核心优势和适用场景
- 掌握使用拖拽方式快速创建表单的基本流程
- 学会如何配置表单验证规则和布局样式
- 了解如何将设计好的表单集成到实际项目中
什么是Formily表单设计器
Formily表单设计器是基于designable开发的可视化表单构建工具，它继承了designable的基础能力，专门针对Formily表单提供了丰富的搭建和配置功能。通过拖拽式操作，用户可以轻松构建各种复杂程度的表单界面，极大地提高了表单开发效率。
设计器的核心理念是将表单开发变成模块化组合，一切皆可替换。它提供了一系列开箱即用的组件，但同时也允许用户根据需求替换任何组件，实现最大化的灵活定制。
官方文档：docs/guide/form-builder.zh-CN.md
核心功能与优势
Formily表单设计器的核心优势主要体现在以下几个方面：
1. 拖拽式可视化操作
设计器提供了直观的拖拽界面，用户可以从组件库中选择需要的表单元素，直接拖放到工作区中，无需编写任何代码即可完成表单结构的搭建。
2. 丰富的表单组件库
设计器内置了多种常用表单组件，包括输入框、选择器、日期选择器、上传组件等，满足各种表单需求：
- 输入控件：Input、Password、NumberPicker等
- 布局组件：FormGrid、FormTab、FormCollapse等
- 自增组件：ArrayCards、ArrayTable等
- 展示组件：Text等
3. 灵活的表单配置
每个表单组件都提供了丰富的配置选项，用户可以通过右侧属性面板轻松设置组件的各种属性，如标签、占位符、验证规则等，实现表单的个性化定制。
4. 多视图切换
设计器支持多种视图模式切换，包括设计视图、JSON视图、标记视图和预览视图，满足不同场景下的需求：
- 设计视图：可视化拖拽设计界面
- JSON视图：查看和编辑表单的JSON Schema
- 标记视图：查看表单的标记语法
- 预览视图：实时预览表单效果
5. 历史记录功能
设计器提供了完整的历史记录功能，支持撤销和重做操作，方便用户在设计过程中进行尝试和修改。
快速开始使用
环境准备
在开始使用Formily表单设计器之前，需要先安装相关依赖包。根据你使用的UI库，可以选择以下安装命令：
Ant Design用户：
npm install --save @designable/formily-antd
Alibaba Fusion用户：
npm install --save @designable/formily-next
基础使用示例
以下是一个简单的Formily表单设计器使用示例，展示了如何快速创建一个基础的表单设计器：
import React, { useMemo } from 'react'
import {
Designer, // 设计器根组件
Workspace, // 工作区组件
ResourceWidget, // 拖拽源挂件
OutlineTreeWidget, // 大纲树组件
SettingsPanel // 右侧配置面板
} from '@designable/react'
import { createDesigner } from '@designable/core'
import {
Form,
Input,
Select,
DatePicker,
FormGrid,
FormTab
} from '@formily/next'
const FormDesigner = () => {
const engine = useMemo(() => createDesigner(), [])
return (
<Designer engine={engine}>
<div style={{ display: 'flex', height: '500px' }}>
{/* 左侧组件库 */}
<div style={{ width: '200px', borderRight: '1px solid #eee' }}>
<ResourceWidget
title="基础组件"
sources={[Input, Select, DatePicker]}
/>
<ResourceWidget
title="布局组件"
sources={[FormGrid, FormTab]}
/>
</div>
{/* 中间工作区 */}
<div style={{ flex: 1 }}>
<Workspace>
<Form />
</Workspace>
</div>
{/* 右侧属性面板 */}
<div style={{ width: '300px', borderLeft: '1px solid #eee' }}>
<SettingsPanel />
</div>
</div>
</Designer>
)
}
export default FormDesigner
完整的示例代码可以参考：示例源代码
设计器核心组件
Formily表单设计器主要由以下核心组件构成：
- Designer：设计器根组件，用于提供上下文环境
- Workspace：工作区组件，用于管理拖拽行为和树节点数据
- ResourceWidget：组件资源挂件，提供可拖拽的组件源
- OutlineTreeWidget：大纲树组件，展示表单的组件结构
- SettingsPanel：设置面板，用于配置选中组件的属性
- ViewportPanel：视口面板，提供多视图切换功能
这些组件协同工作，构成了Formily表单设计器的完整功能。
实际应用场景
Formily表单设计器适用于多种场景，以下是一些常见的应用案例：
1. 后台管理系统表单
在后台管理系统中，经常需要开发各种数据录入和查询表单。使用Formily表单设计器可以快速构建这些表单，减少开发工作量，提高开发效率。
相关文档：scenes/edit-detail.zh-CN.md
2. 流程审批表单
对于需要流程审批的业务场景，如请假申请、报销申请等，可以使用Formily表单设计器创建复杂的审批表单，满足流程中的各种数据收集需求。
3. 调查问卷设计
Formily表单设计器也可以用于创建各种调查问卷，通过拖拽方式快速设计问卷结构，并支持多种题型和逻辑跳转。
4. 动态表单生成
在一些需要根据用户需求动态生成表单的场景中，Formily表单设计器可以作为表单配置工具，让用户自行设计表单结构，系统根据设计结果动态生成表单。
相关文档：guide/advanced/linkages.zh-CN.md
深入学习与资源
官方文档
- Formily核心文档：docs/guide/index.zh-CN.md
- 表单设计器文档：docs/guide/form-builder.zh-CN.md
- 高级用法：docs/guide/advanced/
源代码资源
- Formily核心包：packages/core/
- React适配器：packages/react/
- Next组件库：packages/next/
- 设计器组件：devtools/chrome-extension/src/
示例项目
总结
Formily表单设计器是一款功能强大、易于使用的可视化表单构建工具，它通过拖拽式操作和丰富的配置选项，极大地简化了表单开发流程，提高了开发效率。无论是简单的数据录入表单，还是复杂的业务流程表单，Formily表单设计器都能满足你的需求。
如果你正在寻找一款能够快速构建高质量表单的工具，不妨尝试使用Formily表单设计器，相信它会为你的开发工作带来极大的便利。
最后，欢迎你参与到Formily项目的开发和贡献中，一起完善这个优秀的表单解决方案：contribution.zh-CN.md
希望本文能够帮助你快速了解和使用Formily表单设计器，祝你在表单开发的道路上越走越远！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
