题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。
本文章首发于微信公众号（biglead） 我的大前端生涯 ，同步刊登各技术论坛。
TextField 系列文章
TextField的基本使用以及TextField常用属性精讲《点击查看详情》
TextField 焦点获取控制篇《点击查看详情》
TextField 输入文本样式 TextStyle 篇《点击查看详情》
TextField 输入文本 textAlign 对齐分析篇《点击查看详情》
TextField 输入文本 decoration 配置边框样式以及提示文本分析篇《点击查看详情》
TextField TextEditingController 分析篇《点击查看详情》
1 引言
1.1 情景一
一个文本框默认情况下 可编辑 （允许输入文本的情况）获取焦点（正在输入文本）下，会有默认的一个下划线，这个下划线的颜色是获取的MaterialApp 组件中 them 配置的 textTheme 主题中的样式。
1.2 情景二
当本框可编辑，但是并没有获取焦点时（也就是没在输入时），也会有一个样式如下：
与情景一不同的效果是下划线的样式不一样以及无光标
1.3 情景三
实际开发中，某些应用场景下，文本输入框是不可输入文字的（可通过配置 enabled:false）, TextFeild 也会有不同的样式如下：
综合来看，上述几种情景，TextFeild 在不同状态下都有不同的响应。
2 自定义 TextFeild 的下划线样式以及外边框样式
源代码一览，注释中有详细说明
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///整理
//TextField 输入文本 decoration 配置边框样式以及提示文本分析篇
class TextFeildHomePage5 extends StatefulWidget {
State<StatefulWidget> createState() {
return TextFeildHomePageState();
}
}
class TextFeildHomePageState extends State {
///用来控制 TextField 焦点的获取与关闭
FocusNode focusNode = new FocusNode();
///文本输入框是否可编辑
bool isEnable = true;
void initState() {
super.initState();
///添加获取焦点与失去焦点的兼听
focusNode.addListener((){
///当前兼听的 TextFeild 是否获取了输入焦点
bool hasFocus = focusNode.hasFocus;
///当前 focusNode 是否添加了兼听
bool hasListeners = focusNode.hasListeners;
print("focusNode 兼听 hasFocus:$hasFocus hasListeners:$hasListeners");
});
/// WidgetsBinding 它能监听到第一帧绘制完成，第一帧绘制完成标志着已经Build完成
WidgetsBinding.instance.addPostFrameCallback((_) {
///获取输入框焦点
FocusScope.of(context).requestFocus(focusNode);
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
FlatButton(child: Text("获取焦点"),onPressed: (){
FocusScope.of(context).requestFocus(focusNode);
},),
FlatButton(child: Text("失去焦点"),onPressed: (){
focusNode.unfocus();
},),
FlatButton(child: Text("编辑"),onPressed: (){
setState(() {
isEnable = true;
});
},),
FlatButton(child: Text("不可编辑"),onPressed: (){
setState(() {
isEnable = false;
});
},),
],
),
body: Container(
///SizedBox 用来限制一个固定 width height 的空间
child: SizedBox(
width: 400,
height: 130,
child: Container(
color: Colors.white24,
///距离顶部
margin: EdgeInsets.only(top: 30),
padding: EdgeInsets.all(10),
///Alignment 用来对齐 Widget
alignment: Alignment(0, 0),
///文本输入框
child: TextField(
///是否可编辑
enabled: isEnable,
///焦点获取
focusNode: focusNode,
///用来配置 TextField 的样式风格
decoration: InputDecoration(
///设置输入文本框的提示文字
///输入框获取焦点时 并且没有输入文字时
hintText: "请输入用户名",
///设置输入文本框的提示文字的样式
hintStyle: TextStyle(color: Colors.grey,textBaseline: TextBaseline.ideographic,),
///输入框内的提示 输入框没有获取焦点时显示
labelText: "用户名",
labelStyle: TextStyle(color: Colors.blue),
///显示在输入框下面的文字
helperText: "这里是帮助提示语",
helperStyle: TextStyle(color: Colors.green),
///显示在输入框下面的文字
///会覆盖了 helperText 内容
errorText: "这里是错误文本提示",
errorStyle: TextStyle(color: Colors.red),
///输入框获取焦点时才会显示出来 输入文本的前面
prefixText: "prefix",
prefixStyle: TextStyle(color: Colors.deepPurple),
///输入框获取焦点时才会显示出来 输入文本的后面
suffixText: "suf ",
suffixStyle: TextStyle(color: Colors.black),
///文本输入框右下角显示的文本
///文字计数器默认使用
counterText: "count",
counterStyle:TextStyle(color: Colors.deepPurple[800]),
///输入文字前的小图标
prefixIcon: Icon(Icons.phone),
///输入文字后面的小图标
suffixIcon: Icon(Icons.close),
///与 prefixText 不能同时设置
// prefix: Text("A") ,
/// 与 suffixText 不能同时设置
// suffix: Text("B") ,
///设置边框
/// InputBorder.none 无下划线
/// OutlineInputBorder 上下左右 都有边框
/// UnderlineInputBorder 只有下边框 默认使用的就是下边框
border: OutlineInputBorder(
///设置边框四个角的弧度
borderRadius: BorderRadius.all(Radius.circular(10)),
///用来配置边框的样式
borderSide: BorderSide(
///设置边框的颜色
color: Colors.red,
///设置边框的粗细
width: 2.0,
),
),
///设置输入框可编辑时的边框样式
enabledBorder: OutlineInputBorder(
///设置边框四个角的弧度
borderRadius: BorderRadius.all(Radius.circular(10)),
///用来配置边框的样式
borderSide: BorderSide(
///设置边框的颜色
color: Colors.blue,
///设置边框的粗细
width: 2.0,
),
),
disabledBorder: OutlineInputBorder(
///设置边框四个角的弧度
borderRadius: BorderRadius.all(Radius.circular(10)),
///用来配置边框的样式
borderSide: BorderSide(
///设置边框的颜色
color: Colors.red,
///设置边框的粗细
width: 2.0,
),
),
///用来配置输入框获取焦点时的颜色
focusedBorder: OutlineInputBorder(
///设置边框四个角的弧度
borderRadius: BorderRadius.all(Radius.circular(20)),
///用来配置边框的样式
borderSide: BorderSide(
///设置边框的颜色
color: Colors.green,
///设置边框的粗细
width: 2.0,
),
),
),
),
),
),
),
);
}
}
