Flutter文本输入框TextField控制器TextEditingController，TextField预设内容，获取TextField中的输入内容，兼听TextField中的内容变化

朴灿烈づ我的快乐病毒、 2023-10-08 11:14 20阅读 0赞

**题记**  
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

<table> 
 <thead> 
  <tr> 
   <th><a href="https://github.com/zhaolongs" rel="nofollow"><strong>github?</strong></a></th> 
   <th>你可能需要</th> 
   <th><a href="https://baijiahao.baidu.com/builder/preview/s?id=1676587101499079482" rel="nofollow">百度同步</a></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://biglead.blog.csdn.net/" rel="nofollow">CSDN</a></td> 
   <td><a href="https://study.163.com/instructor/1021406098.htm" rel="nofollow">网易云课堂教程</a></td> 
   <td><a href="https://juejin.im/user/712139263459176" rel="nofollow">掘金</a></td> 
  </tr> 
  <tr> 
   <td><a href="https://www.zhihu.com/people/zhao-long-90-89/posts" rel="nofollow">知乎</a></td> 
   <td><a href="https://blog.csdn.net/zl18603543572/article/details/93532582" rel="nofollow">Flutter系列文章 </a></td> 
   <td><a href="https://www.toutiao.com/i6867301274614759948/" rel="nofollow">头条同步</a></td> 
  </tr> 
 </tbody> 
</table>

本文章首发于微信公众号（biglead） 我的大前端生涯 ，同步刊登各技术论坛。

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center]

**TextField 系列文章**

*  TextField的基本使用以及TextField常用属性精讲[《点击查看详情》][Link 1]
 *  TextField 焦点获取控制篇[《点击查看详情》][Link 2]
 *  TextField 输入文本样式 TextStyle 篇《正在发文中》
 *  TextField 输入文本 textAlign 对齐分析篇[《点击查看详情》][Link 3]
 *  TextField 输入文本 decoration 配置边框样式以及提示文本分析篇[《点击查看详情》][Link 4]
 *  TextField TextEditingController 分析篇《就是本文章了》

--------------------

##### 1 简述 #####

一句话 TextEditingController 用来操作 TextField。

*  为绑定的输入框 TextField 预设内容
 *  获取 TextField 中输入的内容
 *  兼听文字输入变化与焦点变化

##### 2 TextEditingController 的基本使用 #####

第一步创建TextEditingController实例对象，其构造函数可选传参数text，通过构造函数text设置的内容将会在TextField创建时就显示到输入框内，代码如下：

///创建文本控制器实例
    ///创建方式一
    TextEditingController _editingController = new TextEditingController();
    ///创建方式二
    TextEditingController _controller2 = new TextEditingController(text: "初始化的");

第二步是对文本输入框TextField绑定控制器，代码如下：

new TextField(
       //绑定控制器
       controller: _editingController,
       ),

第三步就是TextEditingController控制器常用方法，代码如下：

/// 获取TextField中输入的内容
    String getEditeInputTextFunction(){
        
      return _editingController.text;
    }
    
    /// 设置TextField中显示的内容
    void setEditeInputTextFunction(String flagText){
        
       _editingController.text = flagText;
    }
    
    /// 清除TextField中显示的内容
    void clearEditeInputTextFunction(){
        
      _editingController.text = "";
      ///或者使用clear方法
      _editingController.clear();
    }

初始化的时候光标保持在文字最后，代码实例如下

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    ///整理
    ///TextField TextEditingController 分析篇
    class TextFeildHomePage6 extends StatefulWidget {
        
      @override
      State<StatefulWidget> createState() {
        
        return TextFeildHomePageState();
      }
    }
    
    class TextFeildHomePageState extends State {
        
    
      ///用于文本输入框
      TextEditingController controller = new TextEditingController();
      ///用来控制  TextField 焦点的获取与关闭
      FocusNode focusNode = new FocusNode();
    
      @override
      void initState() {
        
        super.initState();
        ///预设输入框的内容
        String preText = "";
    
        ///控制 初始化的时候光标保持在文字最后
        controller = TextEditingController.fromValue(
          ///用来设置初始化时显示
          TextEditingValue(
            ///用来设置文本 controller.text = "0000"
            text: preText,
            ///设置光标的位置
            selection: TextSelection.fromPosition(
              ///用来设置文本的位置
              TextPosition(
                  affinity: TextAffinity.downstream,
                  /// 光标向后移动的长度
                  offset: preText.length),),),
        );
    
        /// 添加兼听 当TextFeild 中内容发生变化时 回调 焦点变动 也会触发
        /// onChanged 当TextFeild文本发生改变时才会回调
        controller.addListener((){
        
          ///获取输入的内容
          String currentStr = controller.text;
          print(" controller 兼听 $currentStr");
        });
    
      }
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(
            title: Text("TextField 讲解"),
            actions: <Widget>[
              FlatButton(child: Text("保存",style: TextStyle(color: Colors.white),),onPressed: (){
        
                ///获取文本输入框的内容
                String inputText  = controller.text;
                print("点击了保存 $inputText");
              },)
            ],
          ),
          body: Center(
            ///SizedBox 用来限制一个固定 width height 的空间
            child: SizedBox(
              width: 400,
              height: 110,
              child: Container(
                color: Colors.white24,
                padding:EdgeInsets.all(10) ,
                ///Alignment 用来对齐 Widget
                alignment: Alignment(0,0),
                ///文本输入框
                child: TextField(
                  controller: controller,
                  ///当TextField中输入的内容发生改变时回调
                  onChanged: (value){
        
                    print("TextField 中输入的内容 $value");
                  },
                  ),
                ),
              ),
            ),
        );
      }
    }

--------------------

完毕  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200908075406902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70#pic_center
[Link 1]: https://blog.csdn.net/zl18603543572/article/details/94347668
[Link 2]: https://blog.csdn.net/zl18603543572/article/details/103759708
[Link 3]: https://blog.csdn.net/zl18603543572/article/details/103772291
[Link 4]: https://blog.csdn.net/zl18603543572/article/details/103772941
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200908075427319.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70#pic_center