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

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

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

github?	你可能需要	百度同步
CSDN	网易云课堂教程	掘金
知乎	Flutter系列文章	头条同步

本文章首发于微信公众号（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 {
  @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");
              },
              ),
            ),
          ),
        ),
    );
  }
}