1. 基本介紹
InputDecoration 主要為 TextField 提供各種樣式排版布局澎现，由于內(nèi)容較多所刀，所以單獨(dú)拿出來(lái)詳解凿宾。
2. 示例代碼
代碼下載地址坠非。如果對(duì)你有幫助的話記得給個(gè)關(guān)注误澳，代碼會(huì)根據(jù)我的 Flutter 專題不斷更新耻矮。
3. 屬性介紹
InputDecoration 屬性
--|--
icon | 位于輸入框外側(cè)坐標(biāo)的圖標(biāo)
labelText | 提示語(yǔ)，位于輸入框上方
labelStyle | 提示語(yǔ)樣式 TextStyle
helperText | 輔助文本忆谓，位于輸入框下方裆装，errorText 為空時(shí)顯示
helperStyle | 輔助文本樣式 TextStyle
helperMaxLines | 輔助文本最大展示行數(shù)
hintText | 占位文本，位于輸入框光標(biāo)后倡缠，輸入內(nèi)容為空時(shí)展示
hintStyle | 占位文本樣式 TextStyle
hintMaxLines | 占位文本最大展示行數(shù)
errorText | 錯(cuò)誤文本哨免，位于輸入框下方
errorStyle | 錯(cuò)誤文本樣式 TextStyle
errorMaxLines | 錯(cuò)誤文本最大展示行數(shù)
hasFloatingPlaceholder | 默認(rèn)為true，從 v1.13.2 版本已廢棄昙沦，使用 floatingLabelBehavior 替代
floatingLabelBehavior | FloatingLabelBehavior琢唾，auto : labelText 顯示在輸入框中，當(dāng)開始輸入時(shí)盾饮，會(huì)有一個(gè)動(dòng)畫采桃，字體變小并顯示在輸入框上方。 never : labelText 顯示在輸入框中丐谋，當(dāng)開始輸入時(shí)芍碧，labelText 隱藏。 always: LabelText 永遠(yuǎn)顯示在最上方号俐。
isCollapsed | 是否為InputDecoration.collapsed，默認(rèn)為 false定庵，為true時(shí)吏饿，需要使用 InputDecoration.collapsed() 來(lái)創(chuàng)建 decoration
isDense | 輸入框是否為密集形式踪危，默認(rèn)為false
contentPadding | 內(nèi)間距，默認(rèn)值與 border 以及 isDense 有關(guān)猪落，下方會(huì)貼源碼備注
prefixIcon | 頭部圖標(biāo)贞远，位于輸入框內(nèi)部最左側(cè)
prefixIconConstraints | 頭部圖標(biāo)盒約束，效果不是很明顯
prefix | 頭部組件 Widget笨忌，位于光標(biāo)左側(cè)蓝仲，與 prefixText 不能同時(shí)使用
prefixText | 頭部文本，位于光標(biāo)左側(cè)官疲，與 prefix 不能同時(shí)使用
prefixStyle | 頭部文本樣式 TextStyle
suffixIcon | 尾部圖標(biāo)袱结，位于輸入框內(nèi)部最右側(cè)
suffix | 尾部組件 Widget，位于輸入框右側(cè)途凫，與 suffixText 不能同時(shí)使用
suffixText | 尾部文本垢夹，位于輸入框右側(cè)，與 suffix 不能同時(shí)使用
suffixStyle | 尾部文本樣式 TextStyle
suffixIconConstraints | 尾部圖標(biāo)盒約束维费，效果不是很明顯
counter | 備注組件 Widget果元，位于輸入框右下角外側(cè)，與 counterText 不能同時(shí)使用
counterText | 備注文本犀盟，位于輸入框右下角外側(cè)而晒，與 counter 不能同時(shí)使用
counterStyle | 備注文本樣式 TextStyle
filled | 是否填充
fillColor | 填充色
focusColor | 聚焦色
hoverColor | 鼠標(biāo)懸停色
errorBorder | 錯(cuò)誤邊框，errorText不為空阅畴，輸入框沒有焦點(diǎn)時(shí)顯示
focusedBorder | 輸入框開始輸入時(shí)的邊框欣硼，errorText為空時(shí)生效
focusedErrorBorder | errorText不為空時(shí)，輸入框有焦點(diǎn)時(shí)的邊框
disabledBorder | 輸入框禁用時(shí)的邊框恶阴，errorText為空時(shí)生效
enabledBorder | 輸入框可用時(shí)的邊框诈胜，errorText為空時(shí)生效
border | 邊框
enabled | 輸入框是否可用，默認(rèn)為 true
semanticCounterText | counterText 的語(yǔ)義標(biāo)簽
alignLabelWithHint | 當(dāng) textField 為多行時(shí)冯事，居中對(duì)齊行為焦匈，默認(rèn)為 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(
);
}
}
4.2 填充色，以及填充文字
filled == true 時(shí)昵仅，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",
);
}
4.3 各個(gè)位置的 Text 屬性設(shè)置
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
);
}
5. 技術(shù)小結(jié)
InputDecoration 屬性較多，但是沒什么難點(diǎn)摔笤，多加使用即可掌握够滑。
