扣丁书屋

处理文本输入

本页面介绍如何在Flutter应用程序中输入文本

介绍

本页面介绍如何在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的手势GestureDetector分析详解 1年以前  |  4627次阅读
Flutter插件详解及其发布插件 1年以前  |  3920次阅读
在Flutter中添加资源和图片 2年以前  |  3643次阅读
发布Flutter开发的iOS程序 2年以前  |  2862次阅读
Flutter 状态管理指南之 Provider 1年以前  |  2599次阅读
在Flutter中发起HTTP网络请求 2年以前  |  2537次阅读
Flutter for Web详细介绍 1年以前  |  2461次阅读
使用Inspector检查用户界面 2年以前  |  2443次阅读
Flutter Widget框架概述 2年以前  |  2260次阅读
Flutter框架概览 2年以前  |  2109次阅读
JSON和序列化 2年以前  |  2100次阅读
为Flutter应用程序添加交互 2年以前  |  2085次阅读
Flutter路由详解 1年以前  |  2048次阅读
使用自定义字体 2年以前  |  1949次阅读
处理文本输入 2年以前  |  1945次阅读
编写国际化Flutter App 2年以前  |  1890次阅读
使用包来开发Flutter应用 2年以前  |  1873次阅读
发布Flutter开发的Android程序 2年以前  |  1870次阅读