1. 基本介绍

InputDecoration 主要为 TextField 提供各种样式排版布局，由于内容较多，所以单独拿出来详解。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

InputDecoration 属性
--|--
icon | 位于输入框外侧坐标的图标
labelText | 提示语，位于输入框上方
labelStyle | 提示语样式 TextStyle
helperText | 辅助文本，位于输入框下方，errorText 为空时显示
helperStyle | 辅助文本样式 TextStyle
helperMaxLines | 辅助文本最大展示行数
hintText | 占位文本，位于输入框光标后，输入内容为空时展示
hintStyle | 占位文本样式 TextStyle
hintMaxLines | 占位文本最大展示行数
errorText | 错误文本，位于输入框下方
errorStyle | 错误文本样式 TextStyle
errorMaxLines | 错误文本最大展示行数
hasFloatingPlaceholder | 默认为true，从 v1.13.2 版本已废弃，使用 floatingLabelBehavior 替代
floatingLabelBehavior | FloatingLabelBehavior，auto : labelText 显示在输入框中，当开始输入时，会有一个动画，字体变小并显示在输入框上方。 never : labelText 显示在输入框中，当开始输入时，labelText 隐藏。 always: LabelText 永远显示在最上方。
isCollapsed | 是否为InputDecoration.collapsed，默认为 false，为true时，需要使用 InputDecoration.collapsed() 来创建 decoration
isDense | 输入框是否为密集形式，默认为false
contentPadding | 内间距，默认值与 border 以及 isDense 有关，下方会贴源码备注
prefixIcon | 头部图标，位于输入框内部最左侧
prefixIconConstraints | 头部图标盒约束，效果不是很明显
prefix | 头部组件 Widget，位于光标左侧，与 prefixText 不能同时使用
prefixText | 头部文本，位于光标左侧，与 prefix 不能同时使用
prefixStyle | 头部文本样式 TextStyle
suffixIcon | 尾部图标，位于输入框内部最右侧
suffix | 尾部组件 Widget，位于输入框右侧，与 suffixText 不能同时使用
suffixText | 尾部文本，位于输入框右侧，与 suffix 不能同时使用
suffixStyle | 尾部文本样式 TextStyle
suffixIconConstraints | 尾部图标盒约束，效果不是很明显
counter | 备注组件 Widget，位于输入框右下角外侧，与 counterText 不能同时使用
counterText | 备注文本，位于输入框右下角外侧，与 counter 不能同时使用
counterStyle | 备注文本样式 TextStyle
filled | 是否填充
fillColor | 填充色
focusColor | 聚焦色
hoverColor | 鼠标悬停色
errorBorder | 错误边框，errorText不为空，输入框没有焦点时显示
focusedBorder | 输入框开始输入时的边框，errorText为空时生效
focusedErrorBorder | errorText不为空时，输入框有焦点时的边框
disabledBorder | 输入框禁用时的边框，errorText为空时生效
enabledBorder | 输入框可用时的边框，errorText为空时生效
border | 边框
enabled | 输入框是否可用，默认为 true
semanticCounterText | counterText 的语义标签
alignLabelWithHint | 当 textField 为多行时，居中对齐行为，默认为 false

  /// The padding for the input decoration's container.
  ///
  /// The decoration's container is the area which is filled if [filled] is
  /// true and bordered per the [border]. It's the area adjacent to
  /// [decoration.icon] and above the widgets that contain [helperText],
  /// [errorText], and [counterText].
  ///
  /// By default the `contentPadding` reflects [isDense] and the type of the
  /// [border].
  ///
  /// If [isCollapsed] is true then `contentPadding` is [EdgeInsets.zero].
  ///
  /// If `isOutline` property of [border] is false and if [filled] is true then
  /// `contentPadding` is `EdgeInsets.fromLTRB(12, 8, 12, 8)` when [isDense]
  /// is true and `EdgeInsets.fromLTRB(12, 12, 12, 12)` when [isDense] is false`.
  /// If `isOutline` property of [border] is false and if [filled] is false then
  /// `contentPadding` is `EdgeInsets.fromLTRB(0, 8, 0, 8)` when [isDense] is
  /// true and `EdgeInsets.fromLTRB(0, 12, 0, 12)` when [isDense] is false`.
  ///
  /// If `isOutline` property of [border] is true then `contentPadding` is
  /// `EdgeInsets.fromLTRB(12, 20, 12, 12)` when [isDense] is true
  /// and `EdgeInsets.fromLTRB(12, 24, 12, 16)` when [isDense] is false.
  final EdgeInsetsGeometry contentPadding;

4. InputDecoration 详解

4.1 容器创建

import 'package:flutter/material.dart';

class FMTextFieldVC extends StatefulWidget{
  @override
  FMTextFieldState createState() => FMTextFieldState();
}

class FMTextFieldState extends State<FMTextFieldVC>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("TextField"),
      ),
      body: _listView(),
    );
  }

  ListView _listView(){
    return ListView(
      padding: EdgeInsets.all(30),
      children: [
        _textField(),
      ],
    );
  }

  TextField _textField(){
    return TextField(
      decoration: _decoration(),
    );
  }

  InputDecoration _decoration(){
    return InputDecoration(
    );
  }
}

Decoration none.png

4.2 填充色，以及填充文字

filled == true 时，fillColor 生效。

  InputDecoration _decoration(){
    return InputDecoration(
      fillColor: Colors.yellow.shade200,
      filled: true,
      errorText: "errorText",
      helperText: "helperText",
      labelText: "labelText",
      suffixText: "suffixText",
      counterText: "counterText",
      hintText: "hintText",
      prefixText: "prefixText",
      semanticCounterText: "semanticCounterText",
    );
  }

Decoration text.png

4.3 各个位置的 Text 属性设置

  InputDecoration _decoration(){
    return InputDecoration(
      icon: Icon(Icons.print),

      fillColor: Colors.yellow.shade200,
      filled: true,

      errorMaxLines: 2,
      errorText: "ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ErrorText ",
      errorStyle: TextStyle( color: Colors.green, fontSize: 14),

      helperText: "helperText",
      helperMaxLines: 2,
      helperStyle: TextStyle( color: Colors.black, fontSize: 14),

      labelText: "labelText",
      labelStyle: TextStyle( color: Colors.red, fontSize: 14),


      suffixText: "suffixText",
      suffixStyle: TextStyle( color: Colors.grey, fontSize: 14),
      suffixIcon: Icon(Icons.ac_unit),

      counterText: "counterText",
      counterStyle: TextStyle( color: Colors.pink, fontSize: 14),

      hintText: "hintText",
      hintMaxLines: 2,
      hintStyle: TextStyle( color: Colors.orange, fontSize: 14),

      prefixText: "prefixText",
      prefixStyle: TextStyle( color: Colors.blue, fontSize: 14),
      prefixIcon: Icon(Icons.phone),

      // 没啥明显效果
      prefixIconConstraints: BoxConstraints(minWidth: 50),
      suffixIconConstraints: BoxConstraints(minWidth: 30, minHeight: 50),

      semanticCounterText: "semanticCounterText",

      contentPadding: EdgeInsets.fromLTRB(0, 30, 0, 30),

      floatingLabelBehavior: FloatingLabelBehavior.always
    );
  }

Decoration textStyle.png Decoration textStyle helperText.png

5. 技术小结

InputDecoration 属性较多，但是没什么难点，多加使用即可掌握。