flutter的TextField参数、案例整理（上）

TextField

概述

• TextField 用于文本输入

构造函数

const TextField({Key key,this.controller, this.focusNode,this.decoration = const InputDecoration(),TextInputType keyboardType,this.textInputAction,this.textCapitalization = TextCapitalization.none,this.style, // 文本样式this.strutStyle,this.textAlign = TextAlign.start, // 文本水平方向对齐方式this.textAlignVertical, // 本文垂直方向对齐方式this.textDirection, // 文本方向this.readOnly = false, // 是否是只读ToolbarOptions toolbarOptions,this.showCursor,this.autofocus = false, //在widget创建的时候是否自动获取焦点this.obscureText = false,// 是否隐藏文本，常用于密码输入this.autocorrect = true,this.enableSuggestions = true,this.maxLines = 1,this.minLines,this.expands = false,this.maxLength,//当设置了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.dragStartBehavior = DragStartBehavior.start,this.enableInteractiveSelection = true,this.onTap, // 点击方法回调(开始编辑)this.buildCounter, // 搭配maxLength出现的字数统计，控制字数统计的显示样式this.scrollController, // 滚动this.scrollPhysics,})

示例代码

• 使用 TextEditingController 对 TextField 输入进行监听
  • 别忘记了释放TextEditingController
  • 可以获取输入框的文本、设置光标位置、清空输入框等操作

/// 编辑框的控制器
TextEditingController textEditingController = TextEditingController();
/// 组件
TextField(maxLines: 1,maxLength: 50,textInputAction: TextInputAction.search,style: const TextStyle(fontSize: 12, color: Colors.black),controller: textEditingController,onEditingComplete: onSearch,decoration: InputDecoration(/// 关闭计数器counterText: '',contentPadding: const EdgeInsets.symmetric(horizontal: 10),hintText: "输入你想搜索的内容",hintStyle: TextStyle(fontSize: 12, color: Global.theme.light_gray_color),hintMaxLines: 1,/// 直接用border: BorderSide.none会有布局问题，需要包裹OutlineInputBorderborder: const OutlineInputBorder(// BorderSide(color: ) 设置边框颜色// borderRadius: const BorderRadius.all(Radius.circular(10.0)), 设置边框圆角borderSide: BorderSide.none),suffixIcon: EIcon(width: 20,height: 20,path: "assets/icon/icon_search.png",onTap: onSearch),),
)
/// 在页面里放上键盘监听
KeyboardVisibilityBuilder(builder: (context, isKeyboardVisible) {dLog(_tag, "keyboard visible: $isKeyboardVisible");return emptyWidget;}),
// 给全部添加一个GestureDetector，设置onTap方法
// 方法内部加入FocusScope.of(context).unfocus();可以实现点击其他位置的地方让编辑框弹出的键盘隐藏
// 本质是用了焦点来控制键盘的显隐

通过点击button控制键盘显隐

• 搭配FocusNode
• FocusNode，管理TextField的焦点

class _TestWidgetState extends State<TestWidget> {// focusNodefinal FocusNode _focusNode = FocusNode(debugLabel: "Button");@overridevoid initState() {super.initState();// 监听焦点_focusNode.addListener(() {if (_focusNode.hasFocus == true) {print("输入框获得焦点");} else {print("输入框失去焦点");}});}@overridevoid dispose() {_focusNode.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Container(padding: EdgeInsets.only(left: 20, right: 20),child: Column(children: <Widget>[Center(child: TextField(focusNode: _focusNode,),),FlatButton(onPressed: () {if (_focusNode.canRequestFocus) {FocusScope.of(context).requestFocus(_focusNode);}},child: Text('键盘弹出'),),MaterialButton(onPressed: () {_focusNode.unfocus();},child: Text('键盘消失'),)],),);}
}