Flutter入门进阶之旅（四）文本输入Widget TextField

上一篇文章中我们一起学习了什么是Text跟如何给Text设置字体样式以及Text Widget的一些常用属性Flutter入门进阶之旅（三） Text Widgets，通过对Text的学习我们了解到Text是用于显示文本的，如果对显示的文本有一些特殊的要求，比如字体样式，文字颜色我们可以通过TextStyle去给Text指定style来做个性化定制，这一点跟原生Android的TextView非常类似，有了文字显示就肯定会有文字输入，今天我们就一起来学习一下Flutter中的文字输入Widget TextField。

先来看下TextField的构造方法

key controller focusNode decoration keyboardType textInputAction textCapitalization none style textAlign start autofocus obscureText autocorrect maxLines maxLength maxLengthEnforced onChanged onEditingComplete onSubmitted inputFormatters enabled cursorWidth cursorRadius cursorColor keyboardAppearance scrollPadding

通过上面的构造方法跟预览效果图，熟悉android开发的小伙伴们是不是有种似曾相识的感觉，Flutter的TextField跟原生Android中的EditText用法包括部分属性名几乎都是一样的，比如我们可以通过keyboardType来指定唤起软件盘时的输入方式，例如上图的两个输入框属性设置：

home context appBar title body child children style fontSize keyboardType text keyboardType number

通过上面的构造方法我们留意到TextField给我提供了onChanged、onSubmitted、OnEditingComplete回调方法帮助我们监听输入框的内容变化、编辑提交、编辑完成等事件，我们给输入框绑定上述监听方法做下测试：

onSubmitted value onEditingComplete onChanged value keyboardType text

唤起软键盘后在输入框中输入123456，log控制台打印出：

到此对输入框的基本使用你已经完全get到了，但是现实开发过程中，可能我们会需要给输入框指定一些辅助性的说明内容，比如输入框未输入内容时添加hint提示，或者在输入框的旁边添加Icon指示，或者输入框内部文字的显示样式、背景色等等，这些辅助性的设置在Flutter中统一有一个叫做InputDecoration的装饰器来完成操作，我们先来看下InputDecoration的构造方法，然后来简单尝试下几个日常开发中常用的操作。

icon labelText labelStyle helperText helperStyle hintText hintStyle errorText errorStyle errorMaxLines isDense contentPadding prefixIcon prefix prefixText prefixStyle suffixIcon suffix suffixText suffixStyle counterText counterStyle filled fillColor errorBorder focusedBorder focusedErrorBorder disabledBorder enabledBorder border enabled semanticCounterText

给输入框添加输入辅助性输入说明：

body child decoration labelText helperText prefixIcon print suffixIcon picture_as_pdf contentPadding bottom keyboardType number

通过给InputDecoration设置border给输入框添加边框：

body child decoration border gapPadding borderRadius prefixIcon print contentPadding keyboardType number

其他样式跟属性读者可自行运行体验，我就不逐一列举说明了，总之参考文档再结合原生开发的经验去使用TextField还是比较简单的。下面我分享一个完整的登录UI的例子供大家参考：

完整代码：

home context _userPhoneController _userPasswordController * 清空输入框内容 _userPhoneControllertext _userPasswordControllertext appBar title body children controller _userPhoneController keyboardType number decoration contentPadding icon phone labelText helperText onChanged str onSubmitted str controller _userPasswordController keyboardType text decoration contentPadding icon nature_people labelText helperText builder context onPressed _userPasswordControllertext _userPhoneControllertext context content context content color blue highlightColor deepPurple disabledColor cyan child style color white

下一篇：Flutter入门进阶之旅（五）Image Widget

宙飒天下网