举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > flutter文本输入框 Flutter 文本输入

flutter文本输入框 Flutter 文本输入

2023-03-20 05:31 Flutter中文文档

flutter文本输入框 Flutter 文本输入

flutter文本输入框

Flutter文本输入框是Flutter开发中常用的一种控件,它可以帮助开发者快速实现文本输入功能。Flutter文本输入框主要由TextField和TextFormField两种控件组成,它们都是Material Design风格的文本输入框,可以在Android和iOS上使用。

TextField是Flutter中最常用的文本输入框,它可以用来让用户输入单行文本。TextField可以通过传递不同的参数来定制外观和行为,例如字体大小、颜色、背景颜色、hint文字、是否显示光标等。

TextField(
  decoration: InputDecoration(
    hintText: '请输入内容', // 提示文字
    labelText: '标题', // 标题
    border: OutlineInputBorder(), // 边框样式 
  ), 
) 

TextFormField是一个特殊的TextField,它可以在表单中使用,并且还可以验证表单数据。 TextFormField也可以传递不同的参数来定制外观和行为;此外,还可以传递validator函数来验证表单数据。

 
 TextFormField(  
   validator: (value) {   // 验证函数  
     if (value.isEmpty) {   // 判断是否为空  
       return '请输入内容';   // 返回错误信息  
     }  
     return null;   // 验证成功返回null  
   },    )  

总之,Flutter中的文本输入框包含了很多功能强大的特性;使用者只要根据不同场景选择正确的文本输入方式就能快速实现所需要的功能。

Flutter 文本输入

介绍

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

选择一个widget

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

默认情况下,TextField有一个下划线装饰(decoration)。您可以通过提供给decoration属性设置一个InputDecoration来添加一个标签、一个图标、提示文字和错误文本。 要完全删除装饰(包括下划线和为标签保留的空间),将decoration明确设置为空即可。

TextFormField包裹一个TextField 并将其集成在Form中。你要提供一个验证函数来检查用户的输入是否满足一定的约束(例如,一个电话号码)或当你想将TextField与其他FormField集成时,使用TextFormField。


获取用户输入

有两种获取用户输入的主要方法:

  • 处理 onChanged回调
  • 提供一个TextEditingController.

onChanged

每当用户输入时,TextField会调用它的onChanged回调。 您可以处理此回调以查看用户输入的内容。例如,如果您正在输入搜索字段,则可能需要在用户输入时更新搜索结果。

TextEditingController

一个更强大(但更精细)的方法是提供一个TextEditingController作为TextField的controller属性。 在用户输入时,controller的text和selection属性不断的更新。要在这些属性更改时得到通知,请使用controller的addListener方法监听控制器 。 (如果你添加了一个监听器,记得在你的State对象的dispose方法中删除监听器 )。

该TextEditingController还可以让您控制TextField的内容。如果修改controller的text或selection的属性,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'),
        ),
      ],
    );
  }
}
阅读全文
以上是鳄鱼CMS为你收集整理的flutter文本输入框 Flutter 文本输入全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们