1. 基本介绍

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

2. 示例代码

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

3. 属性介绍

  /// 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 属性较多，但是没什么难点，多加使用即可掌握。

Flutter入门（27）：Flutter 组件之 InputDecoration 详解