flutter 边框_Flutter TextField 边框样式以及提示文本

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

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