Input 输入框
代码演示
基本用法
dart
const Input(
onChange: print,
hint: "支持多行",
autoFocus: true,
),键盘类型: 文字
dart
const Input(
hint: "Plain Text",
keyboardType: TextInputType.text,
),键盘类型: 电话号码
dart
const Input(
hint: "Phone",
keyboardType: TextInputType.phone,
),键盘类型: 数字
dart
const Input(
hint: "Integer",
keyboardType: TextInputType.number,
),键盘类型: 小数
dart
const Input(
hint: "Decimal",
keyboardType: TextInputType.numberWithOptions(decimal: true),
),键盘类型: 密码
dart
const Input(
hint: "Password",
obscureText: true,
keyboardType: TextInputType.visiblePassword,
),禁用状态
dart
const Input(
hint: "无法输入内容和获取焦点",
disabled: true,
),最大输入长度
dart
const Input(
hint: "Max Length 6",
maxLength: 6,
),自定义风格
默认渲染朴素、接近 Web input 的风格。而通过 as 可自定义 Input 绘制，比如装饰到一个华丽的盒子里
dart
Input(
hint: "Placeholder",
bgColor: Colors.white,
as: (child) => TailBox()
.p(10)
.rounded(8)
.border(Colors.blue.shade800)
.bg(Colors.white)
.Container(child: child),
),API
| Props | 类型 | 描述 |
|---|---|---|
value | String | 当前值 |
autoFocus | bool | 自动聚焦 |
focusNode | FocusNode | 聚焦对象 |
obscureText | bool | 隐藏文本 |
hint | String | 输入提示 |
minLines | int | 最小行 |
maxLines | int | 最大行 |
disabled | bool | 禁用状态 |
maxLength | int | 最大长度 |
controller | TextEditingController | 控制器 |
inputFormatters | List<TextInputFormatter> | 文本格式化 |
onChange | Function(String value) | 值变化回调 |
onFocus | Function() | 聚焦时回调 |
onBlur | Function() | 失去焦点回调 |
keyboardType | TextInputType | 系统键盘风格 |
textInputAction | TextInputAction | 系统键盘「确认」键风格 |
toolbarOptions | ToolbarOptions | 框选选项，可配置复制、粘贴、全选、剪切功能 |
selectionControls | TextSelectionControls | 框选控制 |
textStyle | TextStyle | 文本样式 |
showSelectionHandles | bool | 展示框选光标 |
cursorColor | Color | 光标颜色 |
bgCursorColor | Color | 背景光标颜色 |
selectionColor | Color | 框选浮层颜色 |
bgColor | Color | 背景颜色 |
as | Widget Function(Widget input) | 绘制代理，可用于自定义绘制 |