Flutter-输入框

TextField（文本输入框）

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.subject),
    labelText: 'Title', // 文字提示
    hintText: 'Enter the post title', // 文字提示，类似placeholder
    // border: InputBorder.none, // 不设置四周边框
    // border: OutlineInputBorder() // 设置四周边框
    filled: true, // 是否填充背景
    fillColor: Colors.grey, // 填充颜色
    // onChanged: (value){}, // 当输入框内容发生变化时调用的函数
    // onSubmitted: (value){}, // 当点击确定时调用的函数
  ),
);

decoration（InputDecoration）属性介绍:

属性	作用
border	增加一个边框，
hintText	未输入文字时，输入框中的提示文字，
prefixIcon	输入框内侧左面的控件，
labelText	一个提示文字。输入框获取焦点/输入框有内容 会移动到左上角，否则在输入框内，labelTex的位置.
suffixIcon	输入框内侧右面的图标.
icon	输入框左侧添加图标
filled	是否填充背景
fillColor	填充颜色
onChanged	当输入框内容发生变化时调用的函数
onSubmited	当点击确定时调用的函数
errorText	错误提示文字

controller详解

controller可以理解为该文本框的映射，通过以下方式创建

TextEditingController textEditingController = TextEditingController();

final textEditingController = TextEditingController();

以上两种创建方法等效，接下来，我们将要让控制器与对应文本框绑定

TextField(
  controller: textEditingController, // 控制器绑定
);

至此控制器就创建完成。另外，控制器还有两个默认的方法

dispose

调用dispose的方法意为在使用完controller后自动卸载，从而优化性能

@override
void dispose(){
  textEditingController.dispose(); // 卸载该控制器，类似于使用完成后卸载，将优化性能
  super.dispose();
}

initState

initState设置初始状态

@override
void initState(){ // 设定控制器初始状态
  super.initState();
  textEditingController.text = 'hi'; // 设置默认值
  textEditingController.addListener( // 添加事件监听
    (){
      debugPrint('input: ${textEditingController.text}');
    }
  );
}