1. 基本介紹

InputDecoration 主要為 TextField 提供各種樣式排版布局，由于內(nèi)容較多，所以單獨拿出來詳解。

2. 示例代碼

代碼下載地址。如果對你有幫助的話記得給個關注，代碼會根據(jù)我的 Flutter 專題不斷更新。

3. 屬性介紹

InputDecoration 屬性
--|--
icon | 位于輸入框外側(cè)坐標的圖標
labelText | 提示語，位于輸入框上方
labelStyle | 提示語樣式 TextStyle
helperText | 輔助文本，位于輸入框下方，errorText 為空時顯示
helperStyle | 輔助文本樣式 TextStyle
helperMaxLines | 輔助文本最大展示行數(shù)
hintText | 占位文本，位于輸入框光標后，輸入內(nèi)容為空時展示
hintStyle | 占位文本樣式 TextStyle
hintMaxLines | 占位文本最大展示行數(shù)
errorText | 錯誤文本，位于輸入框下方
errorStyle | 錯誤文本樣式 TextStyle
errorMaxLines | 錯誤文本最大展示行數(shù)
hasFloatingPlaceholder | 默認為true，從 v1.13.2 版本已廢棄，使用 floatingLabelBehavior 替代
floatingLabelBehavior | FloatingLabelBehavior，auto : labelText 顯示在輸入框中，當開始輸入時，會有一個動畫，字體變小并顯示在輸入框上方。 never : labelText 顯示在輸入框中，當開始輸入時，labelText 隱藏。 always: LabelText 永遠顯示在最上方。
isCollapsed | 是否為InputDecoration.collapsed，默認為 false，為true時，需要使用 InputDecoration.collapsed() 來創(chuàng)建 decoration
isDense | 輸入框是否為密集形式，默認為false
contentPadding | 內(nèi)間距，默認值與 border 以及 isDense 有關，下方會貼源碼備注
prefixIcon | 頭部圖標，位于輸入框內(nèi)部最左側(cè)
prefixIconConstraints | 頭部圖標盒約束，效果不是很明顯
prefix | 頭部組件 Widget，位于光標左側(cè)，與 prefixText 不能同時使用
prefixText | 頭部文本，位于光標左側(cè)，與 prefix 不能同時使用
prefixStyle | 頭部文本樣式 TextStyle
suffixIcon | 尾部圖標，位于輸入框內(nèi)部最右側(cè)
suffix | 尾部組件 Widget，位于輸入框右側(cè)，與 suffixText 不能同時使用
suffixText | 尾部文本，位于輸入框右側(cè)，與 suffix 不能同時使用
suffixStyle | 尾部文本樣式 TextStyle
suffixIconConstraints | 尾部圖標盒約束，效果不是很明顯
counter | 備注組件 Widget，位于輸入框右下角外側(cè)，與 counterText 不能同時使用
counterText | 備注文本，位于輸入框右下角外側(cè)，與 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 容器創(chuàng)建

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. 技術(shù)小結(jié)

InputDecoration 屬性較多，但是沒什么難點，多加使用即可掌握。