首页 > 解决方案 > flutter - 需要扩展 State 和 FormField

问题描述

我需要创建一个创建formFiled的有状态类。为此,我需要做这样的事情:

class SelectCategories  extends StatefulWidget{
  SelectCategories();

  @override
  _SelectCategoriesState createState() => new _SelectCategoriesState();

}

class _SelectCategoriesState extends State<SelectCategories> extends FormField<List<number>>{

}

所以我需要扩展 2 类。这样做的正确方法是什么?我想创建一个类别列表并允许用户从中进行选择。它应该是表格的一部分。当用户单击类别时,我需要更改状态以指示它

标签: flutter

解决方案


你可以参考这个包的源代码
https://pub.dev/packages/flutter_form_builder

下拉看起来像你需要的
https://github.com/danvick/flutter_form_builder/blob/master/lib/src/fields/form_builder_dropdown.dart

还有你可以参考的验证器,这个包提供了 10 多个内置验证器https://github.com/danvick/flutter_form_builder/blob/master/lib/src/form_builder_validators.dart

form_builder_dropdown.dart 的代码片段
它返回一个 FormField 并在构建器中返回 DropdownButton

@override
  Widget build(BuildContext context) {
    return FormField(
      key: _fieldKey,
      enabled: !_readonly,
      initialValue: widget.initialValue,
      validator: (val) {
        for (int i = 0; i < widget.validators.length; i++) {
          if (widget.validators[i](val) != null)
            return widget.validators[i](val);
        }
      },
      onSaved: (val) {
        if (widget.valueTransformer != null) {
          var transformed = widget.valueTransformer(val);
          FormBuilder.of(context)
              ?.setAttributeValue(widget.attribute, transformed);
        } else
          _formState?.setAttributeValue(widget.attribute, val);
      },
      builder: (FormFieldState<dynamic> field) {
        return InputDecorator(
          decoration: widget.decoration.copyWith(
            errorText: field.errorText,
            border: InputBorder.none,
          ),
          child: DropdownButton(
            isExpanded: widget.isExpanded,
            hint: widget.hint,
            items: widget.items,
            value: field.value,
            style: widget.style,
            isDense: widget.isDense,
            disabledHint: widget.disabledHint,
            elevation: widget.elevation,
            iconSize: widget.iconSize,
            onChanged: _readonly
                ? null

在此处输入图像描述


推荐阅读