Flutter组件--TextField使用详情

1.TextField常用的属性

属性	解释
maxLength	文本的输入长度
maxLines	文本输入的行数
textAlign	输入框内内容剧中对齐
textDirection	文字从左向右还是从右向左
autofocus	自动获取焦点
obscureText	密文输入(如果是密文输入的话,maxLines只能是1).
enabled	输入框是否可以输入
onChanged	当文本发生改变的时候,回调的函数
onSubmitted	单击完成按钮时候,回调的函数
inputFormatters	限制输入的方式(文本/数字)
keyboardType	设置键盘格式
textInputAction	输入的类型(下一步,发送,搜索等等)

2.decoration设置输入框

hintText	占位符
labelText	输入框没有焦点的时候显示在输入框里面,如果输入框获取焦点后就显示在输入框边框线上面
helperText	显示在输入框下面
errorText	和helperText显示的文字位置一致,两者相互重叠
prefixText	输入框获取焦点的时候才会显示出来,在输入框的最前面,光标在该文字后面
prefixIcon	前面的小图标(该小图标会显示在输入框横线上方)
Icon	前面的小图标(该小图标会将整个输入框进行缩进)
suffixText	输入框获取焦点的时候才会显示出来,在输入框的最后面
counterText	输入框右下角显示的文字,默认和最大字数是相重叠的
enabledBorder	配置可编辑状态时候的样式

3.style

color	设置文字颜色
fontSize	设置文字大小
decoration	none:没有 underline:下划线 overline:上划线 lineThrough:删除线
decorationColor	设置下划线的颜色
decorationStyle	decorationStyle设置下划线的样式 solid:实线 double:两条实线 dashed:虚线 wavy:波浪线
fontWeight	设置文字为粗体
fontStyle	设置为斜体
letterSpacing	设置文字之间间距
wordSpacing	设置单词之间的间距
height	控制行高倍数
backgroundColor	设置输入框背景颜色

void main() {
  runApp( MyApp());
}

class MyApp extends StatelessWidget {

   MyApp({Key? key}) : super(key: key);

    //当文本框需要使用到初始值的话需要使用到TextEditingController.否则的话可以直接声明一个变量用来接收onChanged: (value) {}里面的value值.
     TextEditingController controller =new TextEditingController();

void dispose() {
  //需要进行释放
  controller.dispose();
  super.dispose();
}

@override
void initState() {

controller.text="原始值";
//文本框的值有变化的时候,就会执行该监听器方法
controller.addListener(
  (){

  }
);

//控制 初始化的时候鼠标保持在文字最后面
    controller=TextEditingController.fromValue(
      //用来初始化显示
      TextEditingValue(
        //用来设置文本内容
        text:"preText",
        //设置光标的位置
        selection: TextSelection.fromPosition(
          //用来设置文本的位置
          TextPosition(
            affinity: TextAffinity.downstream,
            //光标向后移动的长度
            offset: 3,
          ),
        ),
      )

     );

}
   
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter App"),
          actions: [
            ElevatedButton(
                onPressed: () {
                  print(controller.text);//输入框里面的内容

                },
                child: Text("保存")),
          ],
        ),
        /**
         * TextField使用详情
         * 1.TextField组件基本使用以及常用属性配置;
         * 2.TextField边框decoration详细综述;
         * 3.TextField的帮助提示文本配置;
         * 4.TextField的TextEditingController;
         * 5.TextField的焦点相关配置;
         * 6.TextField的输入光标的相关配置.
         */
        body: Center(
          child: TextField(
            maxLength: 30, //文本的输入长度
            maxLines: 1, //文本输入的行数
            textAlign: TextAlign.left, //输入框内内容剧中对齐
            textDirection: TextDirection.ltr, //文字从左向右
            autofocus: false, //自动获取焦点
            obscureText: false, //密文输入(如果是密文输入的话,maxLines只能是1).
            enabled: true, //输入框是否可以输入
            onChanged: (value) {}, //当文本发生改变的时候,回调的函数
            inputFormatters: <TextInputFormatter>[], //限制输入的方式(文本/数字)
            keyboardType: TextInputType.phone, //设置键盘格式
            decoration: const InputDecoration(
              hintText: "请输入用户名", //占位符
              labelText: "输入中...", //输入框没有焦点的时候显示在输入框里面,如果输入框获取焦点后就显示在输入框边框线上面
              helperText: "帮助提示语", //显示在输入框下面
              errorText: "错误文本提示", //和helperText显示的文字位置一致,两者相互重叠
              prefixText: "用户名:", //输入框获取焦点的时候才会显示出来,在输入框的最前面,光标在该文字后面
              prefixIcon: Icon(Icons.call), //前面的小图标
              suffixText: "后面", //输入框获取焦点的时候才会显示出来,在输入框的最后面
              counterText: "计数", //输入框右下角显示的文字,默认和最大字数是相重叠的
              //配置可编辑状态时候的样式
              enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  borderSide: BorderSide(
                    color: Colors.black, //设置边框颜色
                    width: 2, //设置边框宽度
                  )), //设置边框的样式
              //focusedBorder: (),//获取焦点时候的配置
              //disabledBorder: (),//配置不可编辑状态的样式
            ),

            style: const TextStyle(
              color: Colors.purple, //设置文字颜色
              fontSize: 16, //设置文字大小
              /**
               * none:没有
               * underline:下划线
               * overline:上划线
               * lineThrough:删除线
               */
              decoration: TextDecoration.none,
              decorationColor: Colors.red, //设置下划线的颜色
              /**
               * decorationStyle设置下划线的样式
               * solid:实线
               * double:两条实线
               * dotted:
               * dashed:虚线
               * wavy:波浪线
               */
              decorationStyle: TextDecorationStyle.wavy,
              fontWeight: FontWeight.w600, //设置文字为粗体,
              fontStyle: FontStyle.italic, //设置为斜体
              letterSpacing: 3, //设置文字之间间距
              wordSpacing: 2, //设置单词之间的间距
              height: 1, //控制行高倍数
              backgroundColor: Colors.yellow, //设置输入框背景颜色
            ),
          ),
        ),
      ),
    );
  }
}