這個組件屬性很多。。。
先看一下吧
const TextField({
Key key,
TextEditingController controller, //輸入框的控制器
FocusNode focusNode, //控制輸入框是否獲得焦點(diǎn)
InputDecoration decoration: const InputDecoration(), //設(shè)置輸入框的外觀
TextInputType keyboardType, //鍵盤類型
TextInputAction textInputAction, //回車按鈕的類型
TextCapitalization textCapitalization: TextCapitalization.none, // 鍵盤大小寫
TextStyle style, //文本樣式
StrutStyle strutStyle,
TextAlign textAlign: TextAlign.start, //水平方向?qū)R方式
TextAlignVertical textAlignVertical, //垂直方向?qū)R方式
TextDirection textDirection, //文本書寫順序
bool readOnly: false, //是否只讀
bool showCursor, //是否顯示光標(biāo)
bool autofocus: false, //是否自動獲得焦點(diǎn)
bool obscureText: false, //是否隱藏正在輸入的文本，內(nèi)容顯示為圓點(diǎn)
bool autocorrect: true, //是否自動修正
int maxLines: 1, //輸入框的最大行數(shù)
int minLines, //最小行數(shù)
bool expands: false, //是否填充父級
int maxLength, //文本最大長度
bool maxLengthEnforced: true, //超過文本最大長度是否限制輸入
ValueChanged<String> onChanged, //輸入文本時的回調(diào)
VoidCallback onEditingComplete, //完成輸入時觸發(fā)（按回車）
ValueChanged<String> onSubmitted, //完成輸入時觸發(fā)，接收當(dāng)前輸入文本為參數(shù)
List<TextInputFormatter> inputFormatters, //指定輸入格式
bool enabled, //是否可用
double cursorWidth: 2.0, //光標(biāo)寬度
Radius cursorRadius, //光標(biāo)圓角
Color cursorColor, //光標(biāo)顏色
Brightness keyboardAppearance, //鍵盤色調(diào)，只在ios上有效
EdgeInsets scrollPadding: const EdgeInsets.all(20.0), //當(dāng)輸入框獲得焦點(diǎn)并且有一部分被滾動出屏外時，將自動滾動。
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
bool enableInteractiveSelection, //是否允許選中
GestureTapCallback onTap, //點(diǎn)擊回調(diào)
InputCounterWidgetBuilder buildCounter,
ScrollController scrollController,
ScrollPhysics scrollPhysics
})
先來一個最簡單的demo
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
)
)
)
);
}
}
屏幕中間一條線...點(diǎn)擊獲得焦點(diǎn)。
接下來挨個屬性看一下
1、controller
輸入框文本發(fā)生改變時觸發(fā)，但不限于這個功能。
先看demo
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: TextFieldDemo()
)
);
}
}
class TextFieldDemo extends StatefulWidget {
@override
_TextFieldState createState() => new _TextFieldState();
}
class _TextFieldState extends State<TextFieldDemo> {
TextEditingController _controller = TextEditingController();
@override
void initState() {
_controller.addListener(() {
print(_controller.text);
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Center(
child: TextField(
controller: _controller
)
);
}
}
和前幾個組件類似，但不相同，不只是一個狀態(tài)值，而是有一個controller，并且在initState里監(jiān)聽文本變化。
是不是感覺和onChange重復(fù)了，繼續(xù)往下看，除了監(jiān)聽文本變化，還有一些其他的功能。
設(shè)置默認(rèn)值
initState方法修改如下
@override
void initState() {
_controller.text = 'default value'; //輸入框的默認(rèn)值
_controller.addListener(() {
print(_controller.text);
});
super.initState();
}
清空輸入框
initState方法修改如下
@override
void initState() {
_controller.text = 'default value';
_controller.addListener(() {
print(_controller.text);
_controller.clear();
});
super.initState();
}
當(dāng)輸入框獲得焦點(diǎn)時，會觸發(fā)_controller這個時候調(diào)用clear方法會清空輸入框。
selection
將initState方法修改如下：
void initState() {
_controller.text = 'default value';
_controller.selection = TextSelection(
baseOffset: 3,
extentOffset: 5,
affinity: TextAffinity.upstream,
isDirectional: true
);
_controller.addListener(() {
print(_controller.text);
});
super.initState();
}
baseOffset和extentOffset配對使用，demo中的寫法為從文本中第四個和第五個字符為選中狀態(tài)。
另外的兩個我不知道是干啥的。。。
2、focusNode
焦點(diǎn)控制
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: FocusNodeDemo(),
),
);
}
}
class FocusNodeDemo extends StatefulWidget {
@override
_FocusNodeState createState() => new _FocusNodeState();
}
class _FocusNodeState extends State<FocusNodeDemo> {
FocusNode focusNode1 = new FocusNode();
FocusNode focusNode2 = new FocusNode();
FocusScopeNode focusScopeNode;
@override
Widget build(BuildContext context) {
return Container (
child: Column(
children: <Widget>[
TextField(
//關(guān)聯(lián)focusNode1
focusNode: focusNode1,
),
TextField(
//關(guān)聯(lián)focusNode2
focusNode: focusNode2,
),
RaisedButton(
child: Text('移動焦點(diǎn)到1'),
onPressed: () {
//沒有輸入框獲得焦點(diǎn)時初始值為null
if (focusScopeNode == null) {
focusScopeNode = FocusScope.of(context);
}
//focusNode1獲得焦點(diǎn)
focusScopeNode.requestFocus(focusNode1);
//focusNode1和focusNode2焦點(diǎn)狀態(tài)
print(focusNode1.hasFocus);
print(focusNode2.hasFocus);
}
),
RaisedButton(
child: Text('移動焦點(diǎn)到2'),
onPressed: () {
//沒有輸入框獲得焦點(diǎn)時初始值為null
if (focusScopeNode == null) {
focusScopeNode = FocusScope.of(context);
}
//focusNode2獲得焦點(diǎn)
focusScopeNode.requestFocus(focusNode2);
//focusNode1和focusNode2焦點(diǎn)狀態(tài)
print(focusNode1.hasFocus);
print(focusNode2.hasFocus);
}
),
RaisedButton(
child: Text('隱藏鍵盤'),
onPressed: () {
//focusNode1和focusNode2失去焦點(diǎn)
focusNode1.unfocus();
focusNode2.unfocus();
}
),
RaisedButton(
child: Text('焦點(diǎn)狀態(tài)'),
onPressed: () {
//focusNode1和focusNode2焦點(diǎn)狀態(tài)
print(focusNode1.hasFocus);
print(focusNode2.hasFocus);
},
)
]
)
);
}
}
輸入框的焦點(diǎn)通過FocusNode和focusScopeNode控制，focusScopeNode可以通過focusScope.of方法來獲取初始值，這個方法不會讓元素獲得焦點(diǎn)，focusScopeNode.requestFocus方法可以讓元素獲得焦點(diǎn)。focusNode還有一個unFocus方法，可以讓輸入框失去焦點(diǎn)，另外focusNode還有一個hasFocus屬性，輸入框獲得焦點(diǎn)時為true，失去焦點(diǎn)時為false。
3、decoration
先看一下constructor
const InputDecoration({
Widget icon, //輸入框前的圖標(biāo)
String labelText, //與placeholder類似，當(dāng)輸入框獲得焦點(diǎn)時會縮小到左上角
TextStyle labelStyle, //labelText的字體樣式
String helperText, //幫助類型文字提示在輸入框下方，默認(rèn)為灰色
TextStyle helperStyle, //helperText的文字樣式
String hintText, //相當(dāng)于html里的placeholder，當(dāng)設(shè)置了labelText時輸入框未獲得焦點(diǎn)時不顯示，獲得焦點(diǎn)之后labelText縮小后會顯示
TextStyle hintStyle, //hintText文字樣式
int hintMaxLines, //hintText最大行數(shù)，如果文本超出這個最大行數(shù)后邊會顯示為...
String errorText, //錯誤提示，和helperText位置相同，默認(rèn)為紅色
TextStyle errorStyle, //helperText的文字樣式
int errorMaxLines, //errorText的最大行數(shù)，超出部分顯示為...
bool hasFloatingPlaceholder: true, //為false時，當(dāng)輸入框獲得焦點(diǎn)labelText不會縮小到左上角，而是消失
bool isDense,
EdgeInsetsGeometry contentPadding, //輸入框內(nèi)邊距
Widget prefixIcon, //輸入框前綴圖標(biāo)
Widget prefix, //輸入框前綴
String prefixText, //輸入框前綴文本
TextString prefixStyle, //前綴樣式
Widget suffixIcon, //后綴圖標(biāo)
Widget suffix, //后綴文本
String suffixText, //后綴
TextStyle suffixStyle, //后綴樣式
Widget counter, //輸入框右下方組件
String counterText, //輸入框右下方文本
TextStyle counterStyle, //右下方文本樣式
bool filled, //是否填充
Color fillColor, //填充色（相當(dāng)于背景色）
Color focusColor, //
Color hoverColor, //鼠標(biāo)移入的填充色
InputBorder errorBorder, //錯誤時的邊框
InputBorder focusedBorder, //獲得焦點(diǎn)時邊框
InputBorder focusedErrorBorder, //錯誤并獲得焦點(diǎn)時的邊框
InputBorder disabledBorder, //禁用時的邊框
InputBorder enabledBorder, //可用時的邊框
InputBorder border, //邊框
bool enabled: true, //是否可用
String semanticCounterText,
bool alignLabelWithHint
})
這里的屬性都很簡單，沒啥細(xì)說的而且有很多都是重復(fù)的，只不過是在不同狀態(tài)下和不同位置。沒注釋的暫時還沒整明白是干啥的。
4、keyboardType
輸入框獲得焦點(diǎn)時彈出鍵盤的類型。
number、phone、url、datetime、multiline、emailAddress、numberWithOptions()、visiblePassword、text
看著挺多，其實(shí)有好幾個都是重復(fù)的，可能是為了語義化。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
keyboardType: TextInputType.number,
)
)
)
);
}
}
5、textInputAction
回車按鈕的類型
continueAction、done、emergencyCall、go、join、newline、next、route、search、send、unspecified、none、previous
unspecified和newline是回車，none和previous不知道干啥，android和ios都報錯不支持，其他的值是什么按鈕就顯示什么
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
textInputAction: TextInputAction.send,
)
)
)
);
}
}
6、textCapitalization
配置平臺鍵盤如何選擇大寫或小寫鍵盤，只有文本鍵盤有效。
none：默認(rèn)鍵盤
characters：大寫鍵盤
sentences：第一個字母大寫
words：單詞首字母大寫
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
textCapitalization: TextCapitalization.words
)
)
)
);
}
}
7、style
文本樣式，這里不說了，之前的筆記有介紹。
8、strutStyle
這個也不說了，看之前的筆記flutter筆記（二）-----hello world和文本組件Text、TextSpan
9、textAlign
對齊方式flutter筆記（二）-----hello world和文本組件Text、TextSpan
10、TextAlignVertical
垂直方向的對齊方式，有三個值
top、center、bottom
和css的vertical-align一個作用
11、textDirection
文本的書寫順序，不詳細(xì)介紹了看之前的筆記flutter筆記（二）-----hello world和文本組件Text、TextSpan
12、readOnly
是否只讀，值為boolean類型，為true時只讀，但是輸入框可獲得焦點(diǎn)。
13、showCursor
是否顯示光標(biāo)，值為boolean類型。
14、autofocus
是否自動獲得焦點(diǎn)。
15、obscureText
是否密文，一般用于密碼輸入。
16、autocorrect
是否自動修正輸入的文本，默認(rèn)為true。
17、maxLines
輸入框的最當(dāng)行數(shù)，默認(rèn)為1，為null時不做限制。
18、minLines
輸入框最小行數(shù)，和maxLines同時使用，并且不能大于maxLines。
19、expands
是否調(diào)整輸入框高度，以填充父級，maxLines和minLines必須為null。
20、maxLength
文本最大長度，輸入框右下角有長度顯示。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
maxLength: 20
)
)
)
);
}
}
21、maxLengthEnforced
文本長度超過最大長度是否限制輸入，為false時不禁止輸入，但是輸入框會變紅。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
maxLength: 5,
maxLengthEnforced: false
)
)
)
);
}
}
22、onChanged
文本輸入回調(diào)
23、onEditingComplete
文本輸入完成時的回調(diào)，即按回車時的回調(diào)。
24、onSubmitted
文本輸入完成的回調(diào)，當(dāng)前輸入的文本為參數(shù)。
25、inputFormatters
指定輸入文本的格式，需要引入package:flutter/services.dart，值是List類型，可以有多個配置。
BlacklistingTextInputFormatter：黑名單
WhitelistingTextInputFormatter：白名單
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
inputFormatters: [
BlacklistingTextInputFormatter(RegExp("[abc]"))
],
)
)
)
);
}
}
將abc添加黑名單，禁止輸入。
26、enabled
是否可用，為false時不可用，輸入框不能獲得焦點(diǎn)。
27、cursorWidth
光標(biāo)寬度，默認(rèn)是2.0。
28、cursorRadius
光標(biāo)圓角。
29、cursorColor
光標(biāo)顏色
30、keyboardAppearance
鍵盤色調(diào)，Brightness.light為亮色，Brightness.dark為暗，只在ios上有效。
31、scrollPadding
當(dāng)輸入框獲得焦點(diǎn)，并有一部分滾動到可視區(qū)之外時，自動將輸入框滾動到可視區(qū)之內(nèi)。
32、dragStartBehavior
好像和拖動有關(guān)，還沒整明白怎么用。
33、enableInteractiveSelection
輸入的文本屬否允許選中，默認(rèn)為true，為false時不能選中。
34、onTap
點(diǎn)擊的回調(diào)。
35、buildCounter
沒看明白怎么用。
36、scrollController & scrollPhysics
這兩個放一起是因?yàn)椴恢涝趺从茫次臋nscrollController是創(chuàng)建一個滾動控制器，scrollPhysics是對滾動的物理特性做處理，應(yīng)該是可以控制滾動慣性、滾動回彈的東西。
