flutter_input

此包提供了用于操作数据的输入小部件（字段）。要操作的数据要么是单个变量，要么是map中的一个条目。map甚至可以是嵌套的。参数path定义了访问map中条目的键。要访问嵌套map中的条目，键必须用单个斜杠（/）分隔。

所有输入小部件共享一组通用的参数和方法。可以将一组验证器附加到每个输入小部件。

每个输入小部件都可以独立使用。如果它找到一个InputForm的祖先，它将自动向表单注册自己。表单提供了enable()、reset()、save()或validate()所有字段的方法。

输入小部件

以下是可用的输入小部件。
有关构建自己的输入小部件，请参阅下面的“开发”部分。

  • InputCheckbox - 数据类型为bool的复选框
  • InputCountry - 下拉菜单，用于选择国家（显示国旗）
  • InputDate - 基于日历的选择，用于数据类型DateTime（仅日期部分）
  • InputDatePicker - 一个高度可定制的日期选择器，带有周数和多个滑动操作
  • InputDateTime - 用于数据类型DateTime的滚轮，可以自定义为仅日期、仅时间或两者兼有
  • InputDropDown<T> - 数据类型为T的下拉按钮
  • InputFavorite - 一个喜欢的按钮，带有可选择的图标，用于数据类型bool
  • InputKeyboard - 数据类型为String、int或double的文本输入
  • InputLanguage - 下拉菜单，用于选择语言（Locale）
  • InputPassword - 文本字段，带有切换开关，可使隐藏的输入可见（String）
  • InputRadio<T> - 单选按钮，用于选择类型为T的单个值
  • InputRating - 评分小部件，带有可选的图标和一个范围滑块，用于数据类型int
  • InputSlider - 数据类型为double的滑块，介于最小值和最大值之间
  • InputSpinner - 带按钮的微调器，用于数据类型double，以减小或增大值
    介于最小值和最大值之间
  • InputSwitch - 数据类型为bool的开关

通用参数

所有输入小部件都共享一组通用参数。
所有参数都是命名的且可选的。

  • Key key - 字段的标识符
  • bool autosave = true - 自动保存任何更改的值。
    如果autovalidate为true，则只有在没有验证失败时
    值才会被更改。
  • bool autovalidate = false - 自动验证更改的值
  • InputDecoration decoration - 例如用于标签（参见示例）
  • bool enabled - 启用或禁用用户输入。
    如果未设置，则使用InputForm的设置
    或者默认为true（如果没有表单）。
  • T initialValue - 设置字段的初始值。
    使用map中的值进行覆盖。
  • ValueSetter<T> onChanged - 在输入字段值每次更改时调用
    。
  • ValueSetter<T> onSaved - 由save()调用，该方法
    将由InputForm.save()自动调用。
  • String path - 用于访问map中的值
  • List<InputValidator> validators - 验证器列表

验证器

以下验证器可以传递给输入小部件的validators参数。
每个验证器都接受可选的message参数，
以便在验证失败时设置单独的错误消息。

  • after(DateTime date) - 验证字段值
    是否在date之后
  • before(DateTime date) - 验证字段值
    是否在date之前
  • future - 验证DateTime字段值
    是否在未来
  • max(num maxVal) - 验证num字段值
    是否不大于maxVal
  • maxLen(num maxLen) - 验证String字段值的长度
    是否不超过maxLen
  • min(num minVal) - 验证num字段值
    是否不小于minVal
  • minLen(num minLen) - 验证String字段值的长度
    是否不小于minLen
  • notNull - 验证字段值是否不为空
  • past - 验证DateTime字段值
    是否在过去

用法

每个输入小部件都会自动注册自己，如果它
找到一个InputForm祖先。
否则，它将独立运行。
它将使用initialValue作为其显示值。
如果initialValue为null，则它将使用
map[path]中的值，前提是两者都已设置。
如果未设置map，则字段将使用map
来自InputForm祖先（如果存在）。

修改的值将在

  • 每次更改时保存，如果autosave = true（这是默认设置），
  • 调用save()时，
  • 或者在InputFormState上调用save()时。

更改的值将被写入map中，位于path
如果两者都已提供。同时，onSave()方法将以更改后的值调用。
。

演示

有关完整示例，请参见example/main.dart。

InputDatePicker

高度可定制的InputDatePicker允许您从日历页面选择日期，
该页面还显示了该年份的周数。
它提供了微调器、滑动和下拉菜单来选择月份。
甚至可以将年份作为文本输入。
所有部分都可以通过DatePickerStyles进行自定义。

date_picker

开发

要为数据类型T创建新的输入字段，请遵循以下步骤：

  1. 复制一个包含的类文件。
  2. 将类小部件及其状态重命名为新的名称。
  3. 将T替换为新输入字段的值类型。
  4. 调整参数，并使用所有通用参数保留对super()的调用。
    。
  5. 在状态类中调整build( BuildContext context)方法。
    它必须以return super.buildInputField( context, ...结尾，其中
    ...是用于显示新字段小部件的代码。

实用工具

此包还包含一些实用程序。

  • InputUtils.convertToType()将值转换为给定的目标类型。
  • InputUtils.readFromJson()从嵌套的map中读取值。
  • InputUtils.writeToJson()将值写入嵌套的map。
  • 有关DateTime的扩展，请参见date_helper.dart
    用于weekOfYear、julianDay等。

待办事项

  • [X] 创建一个可定制的带周数的日历选择器
  • [X] 为int和double创建文本输入字段
  • [ ] 为带事件的日历创建输入小部件
  • [ ] 创建一个用于选择多个选项的输入小部件，例如
    多选列表
  • [ ] 向此文档添加一些图片
  • [X] 对整个包进行国际化
  • [X] 创建一个在应用程序内更改语言的输入小部件

GitHub

https://github.com/djarjo/flutter_input