【Flutter 专题】64 图解基本 TextField 文本输入框 (一)

const TextField({
    Key key,
    this.controller,                    // 控制正在编辑文本
    this.focusNode,                     // 获取键盘焦点
    this.decoration = const InputDecoration(),              // 边框装饰
    TextInputType keyboardType,         // 键盘类型
    this.textInputAction,               // 键盘的操作按钮类型
    this.textCapitalization = TextCapitalization.none,      // 配置大小写键盘
    this.style,                         // 输入文本样式
    this.textAlign = TextAlign.start,   // 对齐方式
    this.textDirection,                 // 文本方向
    this.autofocus = false,             // 是否自动对焦
    this.obscureText = false,           // 是否隐藏内容，例如密码格式
    this.autocorrect = true,            // 是否自动校正
    this.maxLines = 1,                  // 最大行数
    this.maxLength,                     // 允许输入的最大长度
    this.maxLengthEnforced = true,      // 是否允许超过输入最大长度
    this.onChanged,                     // 文本内容变更时回调
    this.onEditingComplete,             // 提交内容时回调
    this.onSubmitted,                   // 用户提示完成时回调
    this.inputFormatters,               // 验证及格式
    this.enabled,                       // 是否不可点击
    this.cursorWidth = 2.0,             // 光标宽度
    this.cursorRadius,                  // 光标圆角弧度
    this.cursorColor,                   // 光标颜色
    this.keyboardAppearance,            // 键盘亮度
    this.scrollPadding = const EdgeInsets.all(20.0),        // 滚动到视图中时，填充边距
    this.enableInteractiveSelection,    // 长按是否展示【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】
    this.onTap,                         // 点击时回调
})

return TextField();

return TextField(cursorColor: Colors.purple.withOpacity(0.4), cursorWidth: 10.0, cursorRadius: Radius.circular(4.0));

return TextField(style: TextStyle(color: Colors.purple.withOpacity(0.7), fontSize: 18.0), textAlign: TextAlign.right);

return TextField(maxLength: 30, maxLengthEnforced: true);
return TextField(maxLength: 30, maxLengthEnforced: false);

return TextField(maxLength: TextField.noMaxLength);

return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: null);
return TextField(maxLength: 130, maxLengthEnforced: false, maxLines: 2);

return TextField(obscureText: true);

return TextField(enableInteractiveSelection: false);

return TextField(keyboardAppearance: Brightness.dark);

return TextField(textCapitalization: TextCapitalization.sentences);

return TextField(keyboardType: TextInputType.number);
return TextField(keyboardType: TextInputType.emailAddress);

return TextField(textInputAction: TextInputAction.search);

return TextField(autofocus: true);

FocusScope.of(context).requestFocus(node);

return TextField(focusNode: node);

return TextField(enabled: false);

return TextField(decoration: InputDecoration(icon: Icon(Icons.android)));

return TextField(inputFormatters: <TextInputFormatter>[
  LengthLimitingTextInputFormatter(12),
  WhitelistingTextInputFormatter.digitsOnly,
  BlacklistingTextInputFormatter.singleLineFormatter
]);

Center(child: Text(_textStr))

return TextField(onChanged: (text) {
  setState(() {
    _textStr = text;
  });
});

TextEditingController controller = TextEditingController();

@override
void initState() {
  super.initState();
  controller.addListener(() {
    setState(() {
      _textStr = controller.text;
    });
  });
}

return TextField(controller: controller);

return TextField(
  onTap: () {
    Toast.show('onTap!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.TOP);
  },
);

return TextField(
  onEditingComplete: () {
    Toast.show('onEditingComplete!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER);
  },
);

return TextField(
  onEditingComplete: () {
    Toast.show('onSubmitted -> $text!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER);
  },
);

resizeToAvoidBottomPadding: false

resizeToAvoidBottomPadding: true

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

return MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh', 'CN'),
    const Locale('en', 'US'),
  ]
}

return TextField(maxLength: null, inputFormatters: <TextInputFormatter>[
  LengthLimitingTextInputFormatter(10)
]);

return TextField(decoration: InputDecoration(counterText: ""), maxLength: 10);