Flutter 文(wén)本輸入

介紹

本頁面介紹如何在Flutter應用(yòng)程序中輸入文(wén)本

選擇一個widget

TextField 是最常用(yòng)的文(wén)本輸入widget.

默認情況下(xià)，TextField有一個下(xià)劃線裝飾（decoration）。您可以通過提供給decoration屬性設置一個InputDecoration來(lái)添加一個标簽、一個圖标、提示文(wén)字和(hé)錯誤文(wén)本。 要完全删除裝飾（包括下(xià)劃線和(hé)爲标簽保留的空(kōng)間），将decoration明(míng)确設置爲空(kōng)即可。

TextFormField包裹一個TextField 并将其集成在Form中。你(nǐ)要提供一個驗證函數來(lái)檢查用(yòng)戶的輸入是否滿足一定的約束（例如，一個電話(huà)号碼）或當你(nǐ)想将TextField與其他(tā)FormField集成時(shí)，使用(yòng)TextFormField。

獲取用(yòng)戶輸入

有兩種獲取用(yòng)戶輸入的主要方法：

處理(lǐ) onChanged回調

提供一個TextEditingController.

onChanged

每當用(yòng)戶輸入時(shí)，TextField會(huì)調用(yòng)它的onChanged回調。 您可以處理(lǐ)此回調以查看(kàn)用(yòng)戶輸入的内容。例如，如果您正在輸入搜索字段，則可能(néng)需要在用(yòng)戶輸入時(shí)更新搜索結果。

TextEditingController

一個更強大(dà)（但(dàn)更精細）的方法是提供一個TextEditingController作(zuò)爲TextField的controller屬性。 在用(yòng)戶輸入時(shí)，controller的text和(hé)selection屬性不斷的更新。要在這(zhè)些(xiē)屬性更改時(shí)得到(dào)通知(zhī)，請(qǐng)使用(yòng)controller的addListener方法監聽控制器 。 （如果你(nǐ)添加了(le)一個監聽器，記得在你(nǐ)的State對(duì)象的dispose方法中删除監聽器 ）。

該TextEditingController還可以讓您控制TextField的内容。如果修改controller的text或selection的屬性，TextField将更新，以顯示修改後的文(wén)本或選中區(qū)間。 例如，您可以使用(yòng)此功能(néng)來(lái)實現(xiàn)推薦内容的自(zì)動補全。

例子

以下(xià)是使用(yòng)一個TextEditingController讀取TextField中用(yòng)戶輸入的值的示例：

/// Opens an [AlertDialog] showing what the user typed.

class ExampleWidget extends StatefulWidget {

ExampleWidget({Key key}) : super(key: key);

@override

_ExampleWidgetState createState() => new _ExampleWidgetState();

}

/// State for [ExampleWidget] widgets.

class _ExampleWidgetState extends State {

final TextEditingController _controller = new TextEditingController();

@override

Widget build(BuildContext context) {

return new Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

new TextField(

controller: _controller,

decoration: new InputDecoration(

hintText: 'Type something',

),

),

new RaisedButton(

onPressed: () {

showDialog(

context: context,

child: new AlertDialog(

title: new Text('What you typed'),

content: new Text(_controller.text),

),

);

},

child: new Text('DONE'),

),

],

);

}

}