题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。
重要消息
- 精通点的可以查看这里 精述
- 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"); }, ), ), ), ), ); }}