TextField
| InputDecoration屬性 | 作用 | 備注 |
|---|---|---|
| icon | 文本框外，左側的圖標 | |
| labelText | 標簽，文本框獲取焦點后移到左上角，字體變小 | |
| hintText | 提示，文本框輸入內容后不顯示，無內容則顯示 | 設置labelText，labelText正常顯示時hintText不顯示 |
| helperText | 文本框外，左下角的提示文字 | 設置errorText時，只顯示errorText，不顯示helperText |
| errorText | 文本框外，左下角的錯誤提示 | |
| counterText | 文本框外，右下角 | 設置counter時，只顯示counter |
| counter | 文本框外，右下角Widget | |
| prefixIcon | 文本框內，最左邊圖標，一直顯示 | |
| prefix | 文本框內，prefixIcon右側，內容輸入區左側，獲取焦點后顯示 | |
| suffixIcon | 文本框內，最右側圖標，一直顯示 | |
| suffix | 文本框內，suffixIcon左側，內容輸入區右側，獲取焦點后顯示 | |
| border | 文本框邊框 | 還有各種狀態下的邊框可以設置，比如focusedBorder等 。設置無邊框要用InputBorder.none，用null無效 |
| contentPadding | 文本框內邊距 |
| TextField屬性 | 作用 | 備注 |
|---|---|---|
| decoration | 設置各種提示/邊框等 | |
| controller | 文本控制，獲取文本 | |
| obscureText | 是否隱藏文字內容，為true時不顯示內容 | 輸入密碼時常用 |
| keyboardType | 鍵盤類型，如數字鍵盤等 | TextInputType |
| textInputAction | 鍵盤右下角鍵的操作 | TextInputAction |
| maxLength | 最大長度，設置這個，文本框右下角counter的位置會默認顯示輸入字數和最大長度 “0/5” | 設置最大長度，不顯示右下角字數的解決方案：1. 設置counterText=""； 2. 不采用maxLength: 8,用 inputFormatters: [LengthLimitingTextInputFormatter(8)] 代替 |
| maxLengthEnforced | 為true時，超過最大長度輸入不進去；為false時，超過最大長度可繼續輸入 | |
| textAlign | 文本位置，居中/靠左/靠右等 | TextAlign |
| textDirection | 文本顯示方向，左到右/右到左 | textDirection |
| onChanged | 文本變化的時候會回調 | String |
| onEditingComplete | 輸入完成的時候回調 | 在onSubmitted之前 |
| onSubmitted | 提交的時候會回調 | String |
textfield默認.jpg
textfield獲取焦點后.jpg
開發中的問題及解決：
TextField輸入很多文字，會橫向滑動，不能自動換行
解決：同時設置minLines和maxLines。只設置maxLines的話，輸入框的初始高度會很高；只設置minLines的話，只能顯示minLines行，如果為1，只能橫向滑動，大于1的時候，垂直滑動。輸入不符合要求的時候，errorText怎么設置并顯示
解決：新建一個類，繼承自TextField，對其功能進行擴展
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class EditText extends TextField {
EditText({
Key key,
controller,
focusNode,
decoration = const InputDecoration(),
TextInputType keyboardType,
textInputAction,
textCapitalization = TextCapitalization.none,
style,
strutStyle,
textAlign = TextAlign.start,
textDirection,
autofocus = false,
obscureText = false,
autocorrect = true,
maxLines = 1,
minLines,
expands = false,
maxLength,
maxLengthEnforced = true,
onChanged,
onEditingComplete,
onSubmitted,
inputFormatters,
enabled,
cursorWidth = 2.0,
cursorRadius,
cursorColor,
keyboardAppearance,
scrollPadding = const EdgeInsets.all(20.0),
dragStartBehavior = DragStartBehavior.start,
enableInteractiveSelection,
onTap,
buildCounter,
errorText,
clearText = false,
}) : super(
key : key,
controller: controller,
focusNode: focusNode,
decoration: decoration.copyWith(
errorText: errorText,
suffix: clearText ? new GestureDetector(
onTap: () {
controller.clear();
},
child: new Icon(Icons.clear),
) : null,
),
keyboardType:keyboardType,
textInputAction:textInputAction,
textCapitalization:textCapitalization,
style:style,
strutStyle:strutStyle,
textAlign:textAlign,
textDirection:textDirection,
autofocus:autofocus,
obscureText:obscureText,
autocorrect:autocorrect,
maxLines:maxLines,
minLines:minLines,
expands:expands,
maxLength:maxLength,
maxLengthEnforced:maxLengthEnforced,
onChanged:onChanged,
onEditingComplete:onEditingComplete,
onSubmitted:onSubmitted,
inputFormatters:inputFormatters,
enabled:enabled,
cursorWidth:cursorWidth,
cursorRadius:cursorRadius,
cursorColor:cursorColor,
keyboardAppearance:keyboardAppearance,
scrollPadding:scrollPadding,
dragStartBehavior:dragStartBehavior,
enableInteractiveSelection:enableInteractiveSelection,
onTap:onTap,
buildCounter: buildCounter,
);
}
應用：
String errorText;
TextEditingController controller = new TextEditingController();
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("基礎Widget"),
),
body: new SingleChildScrollView(
child: new Container(
child: new EditText(
decoration: new InputDecoration(
hintText: "input your account",
contentPadding: EdgeInsets.fromLTRB(15, 10, 15, 10),
border: new OutlineInputBorder(
borderSide: new BorderSide(
width: 1.0,
color: Colors.cyan,
)
),
),
controller: controller,
onEditingComplete: _check,
errorText: errorText,
clearText: true,
),
),
),
);
}
_check() {
setState(() {
if(controller.text.contains("2b")) {
errorText = "2bhhhh";
} else {
errorText = null;
}
});
}
