常用属性介绍

decoration 设置输入框的外观 InputDecoration，decoration里有常用的有如下属性：

icon 设置icon

labelText 输入框的介绍，当输入框获取焦点时默认会浮动到上方

labelStyle 设置labelText的样式

helperText
辅助文本，位于输入框下方，如果errorText不为空的话，则helperText不会出现

helperStyle 辅助文本样式

errorText 错误提示信息，如果该属性不为null的话，labelText失效

hintText 输入框中的提示信息

hasFloatingPlaceholder labelText是否浮动，默认为true，修改为false则labelText在输入框获取焦点时不会浮动且不显示

prefixIcon、prefixText 图片和预填充的文字

suffixIcon、suffixText 输入框右侧，比如输入密码时，设置小眼睛显示或者隐藏密码

style 输入的文本类型

maxLines 输入的最大行数

counterText 用来计数

filled，fillColor 是否要设置输入框的背景颜色填充，以及设置填充颜色
border

errorBorder

focusedBorder

focusedErrorBorder

disabledBorder

enabledBorder
设置边框

border: InputBorder.none此时输入框去掉了默认的线条
enabled: false //设置该输入框不能获取焦点

enabled: false disabledBorder才会起作用

enabled: true enabledBorder才会起作用
disabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20),)
)
enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20))
)
当输入框获取到焦点的时候
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20))
)
当输入框失去焦点的时候，依然用 enabledBorder
enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20))
)
OutlineInputBorder

这里也可以不用边框，

设置默认的底线，改成

UnderlineInputBorder
关于上面OutlineInputBorder的几个属性，这里再介绍一下
OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20),//设置弧度),borderSide: BorderSide(color: Colors.blue,//设置外框的颜色width: 2,//设置外框的宽度style: BorderStyle.none//这里属性默认是solid，设置为none，表示不显示边框)
)
其他属性

keyboardType
设置输入类型

TextInputType枚举值含义

text 文本输入键盘

multiline 多行文本，需和maxLines配合使用(设为null或大于1)

number 数字；会弹出数字键盘

phone 优化后的电话号码输入键盘；会弹出数字键盘并显示“* #”

datetime 优化后的日期输入键盘；Android上会显示“: -”

emailAddress 优化后的电子邮件地址；会显示“@ .”

url 优化后的url输入键盘；会显示“/ .”

textInputAction
把键盘上的回车按钮变成其他 textInputAction: TextInputAction.search 例如变成搜索
onChanged
实时监测输入内容
onChanged: (value){print(value);
}
controller 编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件

TextFild应用

通过上面介绍的属性，简单写个小demo

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() {runApp(TextFildApp());
}class TextFildApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(backgroundColor: Colors.red,title: Text('文本输入框练习',style: TextStyle(fontSize: 18, color: Colors.yellow),),),body: TextFieldTest(),),);}
}class TextFieldTest extends StatelessWidget {@overrideWidget build(BuildContext context) {return Column(children: <Widget>[Container(margin: EdgeInsets.all(20),child: TextField(keyboardType: TextInputType.phone,decoration: InputDecoration(icon: Icon(Icons.face),prefixIcon: Icon(Icons.phone),prefixText: '+86  ',prefixStyle: TextStyle(color: Colors.orange,fontSize: 18),enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20),),borderSide: BorderSide(color: Colors.blue,width: 2,style: BorderStyle.none)),focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20))),filled: true,fillColor: Colors.yellow,counterText: '0/15',counterStyle: TextStyle(color: Colors.purple),hasFloatingPlaceholder: false,labelText: '请输入手机号',labelStyle: TextStyle(fontSize: 30, color: Colors.black, fontWeight: FontWeight.w700),helperText: '注意：最多输错三次哦',helperStyle: TextStyle(fontSize: 16, color: Colors.green, fontWeight: FontWeight.w700),errorText: null,errorStyle: TextStyle(fontSize: 16, color: Colors.red, fontWeight: FontWeight.w700),hintText: '邮箱/手机号/用户名',hintStyle: TextStyle(fontSize: 18, color: Colors.blue),),),),Container(margin: EdgeInsets.all(20),child: TextField(keyboardType: TextInputType.visiblePassword,decoration: InputDecoration(icon: Icon(Icons.face),prefixIcon: Icon(Icons.phonelink_lock),enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20))),focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20))),filled: true,fillColor: Colors.yellow,suffixIcon: Icon(Icons.remove_red_eye),suffixText: '隐藏或显示密码',labelText: '请输入密码',labelStyle: TextStyle(fontSize: 30, color: Colors.black, fontWeight: FontWeight.w700),helperText: '注意：最多输错三次哦',helperStyle: TextStyle(fontSize: 18, color: Colors.green, fontWeight: FontWeight.w700),errorText: null,errorStyle: TextStyle(fontSize: 18, color: Colors.red, fontWeight: FontWeight.w700),hintText: '邮箱/手机号/用户名',hintStyle: TextStyle(fontSize: 18, color: Colors.blue),),)),Container(margin: EdgeInsets.all(20),child: TextField(decoration: InputDecoration(icon: Icon(Icons.face),prefixIcon: Icon(Icons.airline_seat_recline_extra),enabledBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20),),borderSide: BorderSide(color: Colors.pink,width: 2,)),focusedBorder: UnderlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20)),borderSide: BorderSide(color: Colors.pink,width: 2,)),hintText: '性别',hintStyle: TextStyle(fontSize: 18, color: Colors.blue),),onChanged: (value){print(value);},),),],);}
}

运行效果

TextEditingController

比如我要实现点击按钮获取TextFile文本框中的内容

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() {runApp(TextFildApp());
}class TextFildApp extends StatefulWidget {@overrideState<StatefulWidget> createState() {// TODO: implement createStatereturn TextFieldTest();}
}class TextFieldTest extends State<TextFildApp> {TextEditingController _controller=new TextEditingController();@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(backgroundColor: Colors.red,title: Text('文本输入框练习',style: TextStyle(fontSize: 18, color: Colors.yellow),),),body:Column(children: <Widget>[Container(margin: EdgeInsets.all(20),child: TextField(keyboardType: TextInputType.phone,maxLines: 1,decoration: InputDecoration(icon: Icon(Icons.phone),filled: true,fillColor: Colors.yellow,enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20),),borderSide: BorderSide(color: Colors.blue,width: 5)),focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(20),),borderSide: BorderSide(color: Colors.blue,width: 5)),hintText: '请输入手机号',hintStyle: TextStyle(fontSize: 18,color: Colors.black),),onChanged: (value){this._controller.text = value;
//                  this.setState(() {
//                    this._controller.text = value;
//                  });},controller: TextEditingController.fromValue(TextEditingValue(text: _controller.text,selection: TextSelection.fromPosition(TextPosition(affinity: TextAffinity.downstream,offset: _controller.text.length,)),)),),),SizedBox(height: 10),Container(child: FlatButton(onPressed: (){setState(() {});},color: Colors.blue,padding: EdgeInsets.all(10),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),child: Text('获取文本框中的手机号',style: TextStyle(fontSize: 18,color: Colors.white),),),),SizedBox(height: 10),Container(child: Text('${_controller.text}',style: TextStyle(fontSize: 18,color: Colors.blue),),)],),),);}
}

运行效果

光标位置

                controller: TextEditingController.fromValue(TextEditingValue(text: _controller.text,selection: TextSelection.fromPosition(TextPosition(affinity: TextAffinity.downstream,offset: _controller.text.length,)),)

Flutter组件学习（7）输入框TextField相关推荐

Flutter组件学习（二）—— Image
序言上一节中,我们讲了 Flutter 中 Text 组件的一些用法以及 API,本节我们继续学习 Flutter 中的 Image 组件,同样先上图: Image组件的构造方法在 Android ...
Flutter组件学习（13）层叠布局Stack、Positioned
介绍层叠布局和Web中的绝对定位.Android中的Frame布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置.绝对定位允许子组件堆叠起来(按照代码中声明的顺序) Stack ali ...
Flutter组件学习（19）GridView
介绍 GridView和ListView的大多数参数都是相同的,它们的含义也都相同, 唯一需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridV ...
Flutter组件学习之自定义画板绘制圆形——筑梦之路
import 'package:flutter/material.dart';/*** 自定义画板* 绘制圆形*/ void main() => runApp(new MyApp());clas ...
【Flutter学习】组件学习之目录
01. Flutter组件-Layout-Container-容器 02. Flutter组件-Text-Text-文本 03. Flutter组件-Text-RichText-富文本 04. ...
【鸿蒙 HarmonyOS】UI 组件 ( 文本输入框 TextField 组件 )
文章目录一.布局中设置 TextField 组件二.代码中获取并设置 TextField 组件一.布局中设置 TextField 组件 TextField 组件是文本输入框 , 允许用户在界面中 ...
Flutter文本输入框TextField控制器TextEditingController，TextField预设内容，获取TextField中的输入内容，兼听TextField中的内容变化
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. github? 你可能需要百度同步 CSDN 网易云课堂教程掘金知乎 Flutter系列文章头条同步本文章首发于微信公众号( ...
Flutter文本输入框TextField的焦点控制
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. github? 你可能需要百度同步 CSDN 网易云课堂教程掘金知乎 Flutter系列文章头条同步本文章首发于微信公众号( ...
Flutter文本输入框TextField属性（InputDecoration、textInputAction、inputFormatters等等）详解
文章目录 TextField TextField decoration keyboardType TextField textInputAction TextField onChanged TextF ...

Flutter组件学习（7）输入框TextField

常用属性介绍

TextFild应用

TextEditingController

光标位置

Flutter组件学习（7）输入框TextField相关推荐

最新文章

热门文章