微信小程序> flutter应用开发中TextFieldTextEditingController使用篇

flutter应用开发中TextFieldTextEditingController使用篇

浏览量:9595 时间: 来源:早起的年轻人

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

重要消息

  • 精通点的可以查看这里 精述
  • Flutter 从入门实践到开发一个APP之UI基础篇  视频
  • flutter从入门 到精通 系列文章

TextField 系列文章

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

1 简述

一句话 TextEditingController 用来操作 TextField。

  • 为本方输入框 TextField 预设内容
  • 获取 TextField 中输入的内容
  • 兼听文字输入变化与焦点变化

2 TextEditingController 的基本使用

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎