Flutter TextField 边框样式以及提示文本 、Flutter输入文本TextField

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

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

本文章首发于微信公众号（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 {
  @override
  State<StatefulWidget> createState() {
    return TextFeildHomePageState();
  }
}

class TextFeildHomePageState extends State {

  ///用来控制  TextField 焦点的获取与关闭
  FocusNode focusNode = new FocusNode();
  ///文本输入框是否可编辑
  bool isEnable = true;

  @override
  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);
    });
  }

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