flutter TextField 位置居中，初始值（默认值），内容居中，设置圆角，前后加图标，监控输入值，输入限制，去掉下划线，自动换行等

标题写这篇文章是因为网上相关的居中问题错的一大堆，而我一直白嫖，今天也回馈一下社会（写这篇文章的时候是这个情况，但不代表以后的技术更改）！

去掉下划线

TextField(
      decoration: InputDecoration(border: InputBorder.none),
      ),

初始值，光标依然在最后面

  TextEditingController storeNameController = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    storeNameController.text = widget.name;
    storeNameController.addListener(() {

    });
  }

输入字体样式

TextField(
		style: TextStyle(),
      decoration: InputDecoration(border: InputBorder.none),
      
      ),

提示占位符样式

TextField(
      decoration: InputDecoration(
         hintText: '提示占位符',
 		hintStyle: TextStyle()
      border: InputBorder.none),
      ),

最大最小行数

TextField(
	maxLines: 2,
    minLines: 1,
    obscureText: true,
      decoration: InputDecoration(border: InputBorder.none),
      ),

自适应高度，自动换行

//同时设置最大最小行数，就可以实现自动换行
TextField(
	maxLines: 2,
    minLines: 1,
  ),

隐藏文本

TextField(
    obscureText: true,
      decoration: InputDecoration(border: InputBorder.none),
      ),

圆角实现

1. TextField自身实现

TextField(
     textAlign: TextAlign.center,
      decoration: InputDecoration(
        hintText: "请输入参数值",
        hintStyle: TextStyle(fontSize: 22,fontWeight: FontWeight.w500,color: Color(0xFF999999)),
             border: OutlineInputBorder(
                        ///设置边框四个角的弧度
                        borderRadius: BorderRadius.all(Radius.circular(12)),

                        ///用来配置边框的样式
                        borderSide: BorderSide(
                          ///设置边框的颜色
                          color: Color(0xffDCDEE3),

                          ///设置边框的粗细
                          width: 1,
                        ),
                      ),  
          ),
        )

2. 有时候不需要有点击变化这个效果，可以外层加Container来实现

 Container(
              height: 58,
              width: 540,
              alignment: Alignment.center,
              child: const TextField(
                textAlign: TextAlign.center,
                decoration: InputDecoration(
                  hintText: "请输入参数值",
                  hintStyle: TextStyle(fontSize: 22,fontWeight: FontWeight.w500,color: Color(0xFF999999)),
                  // contentPadding: EdgeInsets.only(left: 20),
                  border: OutlineInputBorder(borderSide: BorderSide.none),
                ),
              ),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                  border: Border.all(
                      color: const Color(0xFFE5E6E6),
                      width: 2
                  )
              ),
            ),

TextField上下左右居中

1.上下左右居中

Container(
              height: 58,
              width: 540,
              // 让TextField实现上下居中，
              alignment: Alignment.center,
              child: const TextField(
                 // 让TextField内容实现左右居中，
                textAlign: TextAlign.center,
                decoration: InputDecoration(
                  hintText: "请输入参数值",
                  hintStyle: TextStyle(fontSize: 22,fontWeight: FontWeight.w500,color: Color(0xFF999999)),
                  // contentPadding和border的设置是为了让TextField内容实现上下居中
                  contentPadding: EdgeInsets.all(0),
                  border: OutlineInputBorder(borderSide: BorderSide.none),
                ),
              ),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(
                      color: const Color(0xFFE5E6E6),
                      width: 2
                  )
              ),
            ),   

2.上下居中左对齐

// textAlign: TextAlign.center,

contentPadding: EdgeInsets.only(left: 20),

监控并获取输入值

TextEditingController noteController = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    noteController.addListener((){
    //这里可以写一些需要的逻辑
      print("controller的监听方法："+noteController.text);
    });
  }

//监听哪个输入框就把noteController写进去
        TextField(
              controller: noteController,
              ),
            )

//在需要用到输入值的地方，直接用 noteController.text 获取
        

加小图标

1.输入框左侧外加图标

             TextField(
                decoration: InputDecoration(
                  icon: Icon(Icons.person),
                ),
              ),

2.输入框左侧内加图标

              TextField(
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.phone_android),
                ),
              ),

3.输入框右侧内加图标

            TextField(
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                  //这里图标可以随便定义
                    icon: Icon(Icons.close),
                    onPressed: () {
                    //这是清空输入值，可以根据自己需要添加不同事件，下面展示的图标是密码显示的图标
                      controller.clear();
                    },
                  ),
                ),
              ),

一些基本输入限制

1.限制弹出键盘种类

            TextField(
            //number是弹数字键盘，可以自己选者键盘弹出种类
              keyboardType: TextInputType.number,
              ),

2.限制输入值种类的一些常用例子

            TextField(
                inputFormatters:[
                FilteringTextInputFormatter.allow(RegExp("[a-zA-Z]")),//只允许输入字母
                FilteringTextInputFormatter.allow(RegExp("[0-9.]")),//只允许输入小数
                FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),//设置只允许输入数字
                FilteringTextInputFormatter.digitsOnly,//设置只允许输入数字
              ],
             
              ),

3.限制输入值的长度

            TextField(
              inputFormatters:[
               LengthLimitingTextInputFormatter(6)//限制长度
              ],
              ),

有错的地方欢迎指出来，大家一起进步！