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

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

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

TextField 系列文章

• TextField的基本使用以及TextField常用属性精讲《点击查看详情》
• TextField 焦点获取控制篇《点击查看详情》
• TextField 输入文本样式 TextStyle 篇《正在发文中》
• TextField 输入文本 textAlign 对齐分析篇《点击查看详情》
• TextField 输入文本 decoration 配置边框样式以及提示文本分析篇《点击查看详情》
• 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 {@overrideState<StatefulWidget> createState() {return TextFeildHomePageState();}
}class TextFeildHomePageState extends State {///用于文本输入框TextEditingController controller = new TextEditingController();///用来控制  TextField 焦点的获取与关闭FocusNode focusNode = new FocusNode();@overridevoid 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");});}@overrideWidget 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 用来对齐 Widgetalignment: Alignment(0,0),///文本输入框child: TextField(controller: controller,///当TextField中输入的内容发生改变时回调onChanged: (value){print("TextField 中输入的内容 $value");},),),),),);}
}

完毕