【Flutter】【widget】TextField 和CupertinoTextField 输入框

widget名字：TextField 和CupertinoTextField 输入框

TextField 和CupertinoTextField 输入框，主要提供的是输入框的功能。具体详细介绍可以查看代码备注

---

功能：

功能：

1. 文本输入
2. 设置边框
3. 输入限制
4. 输入监听

---

使用实例和代码：

class TxInputWidge extends StatefulWidget {
 const TxInputWidge({Key? key}) : super(key: key);

 @override
 _TxInputWidgeState createState() => _TxInputWidgeState();
}

class _TxInputWidgeState extends State<TxInputWidge> {
 // controller是输入框文本编辑的控制器，可以获取TextField的内容、设置TextField的内容
 late TextEditingController _controller;
 @override
 void initState() {
   // TODO: implement initState
   super.initState();
   _controller = TextEditingController()
     ..addListener(() {
       //把输入文字转为大写
       print('listen to control');
     });
 }

 @override
 void dispose() {
   // TODO: implement dispose
   super.dispose();
   _controller.dispose();
 }

 @override
 Widget build(BuildContext context) {
   return SingleChildScrollView(
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         const Text('TextField_1'),
         const TextField(),
         const Text('TextField_2'),
         const TextField(
           decoration: InputDecoration(
               prefix: Text('I AM prefix'), //前置widget ，可以是widget 获得焦点的时候才显示
               prefixIcon: Icon(Icons.first_page),
               icon: Icon(Icons.settings), //最前面的图标显示，不需要获取焦点一直显示
               suffix: Text('I AM suffix'),
               suffixIcon: Icon(Icons.clear)), //尾部
         ),
         const Text('TextField_3_背景色的填充和边框样式'),
         const TextField(
             decoration: InputDecoration(
                 filled: true,
                 fillColor: Colors.greenAccent,
                 //失去焦点的时候的边框样式设置
                 enabledBorder: OutlineInputBorder(
                     //外边框的配置项目
                     borderSide: BorderSide(color: Colors.grey, width: 2.0),
                     borderRadius: BorderRadius.all(Radius.circular(20))),
                 //获取焦点的时候的边框样式
                 focusedBorder: OutlineInputBorder(
                     //外边框的配置项目
                     borderSide:
                         BorderSide(color: Colors.pinkAccent, width: 2.0),
                     borderRadius: BorderRadius.all(Radius.circular(100))))),
         const Text('TextField_4_背景色的填充和边框样式'),
         const TextField(
             maxLength: 100, //最大的输入字符100 ，有下边框显示。超过一个字就不能再输入
             cursorColor: Colors.red, //光标的颜色
             cursorHeight: 2.0,
             decoration: InputDecoration(
                 labelText: '左上角的文字标识', helperText: '帮助提示的文本，比如输入邮箱')),
         const Text('TextField_5_onchange 等'),
         TextField(
           onChanged: (value) {
             //文本输入有变化的时候就做这个槽子
             print("onchange $value");
           },
           onSubmitted: (value) {
             //点击回车提交按键的操作
             print("onSubmitted $value");
           },
           onEditingComplete: () {
             print('编写完成,不能获取到value');
           },
         ),
         const Text('TextField_6_限制功能，输入，正则'),
         TextField(
           inputFormatters: [
             //允许 ,如下只允许输入0-9的数字，可以匹配正则表达式
             // FilteringTextInputFormatter.allow(RegExp(r'[0-9]'))
             //禁止输入字母
             // FilteringTextInputFormatter.deny(RegExp(r'"[a-zA-Z]"')) //禁止
             FilteringTextInputFormatter.deny("zzz") //禁止输入zzz
           ],
         ),
         const Text('TextField_7_密码遮挡等'),
         const TextField(
           obscureText: true, //默认用小圆点遮挡
           obscuringCharacter: '*', //可以更改为自己想要的遮挡文本
         ),
         const Text('TextField_8_CupertinoTextField'),
         CupertinoTextField(
             decoration: BoxDecoration(
           color: Colors.red,
           borderRadius: BorderRadius.circular(5),
         )),
         const Text('TextField_9_control'),
         const TextField(
           obscureText: true, //默认用小圆点遮挡
           obscuringCharacter: '*', //可以更改为自己想要的遮挡文本
         ),
         TextField(
           key: UniqueKey(),
           controller: _controller,
           // autofocus: true, //自动获取到焦点
           decoration: InputDecoration(
               suffix: IconButton(
             icon: const Icon(Icons.clear),
             onPressed: () {
               _controller.clear(); //清除已编写的文本
             },
           )),
         ),
         const TextField(

             // obscureText: true, //默认用小圆点遮挡
             // obscuringCharacter: '*', //可以更改为自己想要的遮挡文本
             ),
       ],
     ),
   );
 }
}

---

截图：