處理文本輸入

介紹

本頁面介紹如何在Flutter應用程序中輸入文本

選擇一個widget

TextField 是最常用的文本輸入widget.

默認情況下,TextField有一個下劃線裝飾(decoration)。您可以通過提供給decoration屬性設置一個InputDecoration來添加一個標簽、一個圖標、提示文字和錯誤文本。 要完全刪除裝飾(包括下劃線和為標簽保留的空間),將decoration明確設置為空即可。

TextFormField包裹一個TextField 并將其集成在Form中。你要提供一個驗證函數來檢查用戶的輸入是否滿足一定的約束(例如,一個電話號碼)或當你想將TextField與其他FormField集成時,使用TextFormField

獲取用戶輸入

有兩種獲取用戶輸入的主要方法::

onChanged

每當用戶輸入時,TextField會調用它的onChanged回調。 您可以處理此回調以查看用戶輸入的內容。例如,如果您正在輸入搜索字段,則可能需要在用戶輸入時更新搜索結果。

TextEditingController

一個更強大(但更精細)的方法是提供一個TextEditingController作為TextFieldcontroller屬性。 在用戶輸入時,controller的textselection屬性不斷的更新。要在這些屬性更改時得到通知,請使用controller的addListener方法監聽控制器 。 (如果你添加了一個監聽器,記得在你的State對象的dispose方法中刪除監聽器 )。

TextEditingController還可以讓您控制TextField的內容。如果修改controller的textselection的屬性,TextField將更新,以顯示修改后的文本或選中區間。 例如,您可以使用此功能來實現推薦內容的自動補全。

例子

以下是使用一個TextEditingController讀取TextField中用戶輸入的值的示例:

/// 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<ExampleWidget> {
  final TextEditingController _controller = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        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'),
        ),
      ],
    );
  }
}

所屬標簽

無標簽

官方入門指南

Flutter官方發布的入門指導,包括了如何在不同的平臺(Windows, Mac, Linux)上搭建開發環境,以及一些入門級的指導,以便您從零開始進入Flutter的世界,同時,一些Flutter的框架API,也是您開發時必不可少的工具書。

從這里進入


25选5玩法中奖