SuperAPI AI 工具集

shadcn_ui-form

前端与建站

查看项目

更新于 10-16 03:39

技能介绍

用途:该技能介绍如何使用 ShadForm 构建表单,集中管理表单状态、校验和字段值,无需为每个字段单独维护控制器。

主要能力:ShadForm 以一个 Map<String, dynamic> 保存所有字段值。用 GlobalKey<ShadFormState> 调用 saveAndValidate() 并在校验通过后读取 value。每个字段需设置 id,并使用 Shad*FormField 系列组件,如 ShadInputFormField、ShadCheckboxFormField、ShadSelectFormField、ShadDatePickerFormField、ShadTimePickerFormField、ShadRadioGroupFormField。

使用方式:先创建 final formKey = GlobalKey<ShadFormState>();,在 ShadForm 中传入 key,子级放置各表单字段组件。提交时调用 formKey.currentState!.saveAndValidate(),成功则通过 formKey.currentState!.value 读取全部值,失败表示校验未通过。可通过 initialValue 设置默认值。单个字段可用 setFieldValue('username', 'new_username') 修改,传 notifyField: false 可跳过界面更新;整表可用 setValue({...}),传 notifyFields: false 可跳过字段更新。

当表单值类型与字段类型不一致时(例如表单存字符串、字段用 DateTime),可使用 fromValueTransformer 与 toValueTransformer 转换,文中以 ShadDatePickerFormField 为例。字段 id 支持点号表示嵌套,如 user.name 会生成嵌套映射 {'user': {'name': '...'}},initialValue 需用嵌套映射而非点号键;可用 fieldIdSeparator 自定义分隔符(如 '/'),设为 null 则禁用嵌套、保留扁平键。

适用场景与限制:适用于 Flutter 中使用 Shadcn UI 构建带校验的表单界面。更多初始值、setFieldValue/setValue、值转换和点号嵌套的细节见 reference.md;各字段组件的示例见 Checkbox、Switch、Input、Select、RadioGroup、DatePicker、TimePicker 文档。其他如收费、平台等具体信息暂未提供。