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

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

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

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


在这里插入图片描述

TextField 系列文章


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");
              },
              ),
            ),
          ),
        ),
    );
  }
}

完毕
在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页