Flutter - TextField

Flutter - TextField 首页 / Flutter入门教程 / Flutter - TextField

TextField或TextBox是包含字母数字数据(例如名称，密码，地址等)的输入元素。它是GUI控制元素，使用户能够使用可编程代码输入文本信息。

Flutter中的TextField是最常用的文本输入小部件，允许用户从键盘将输入收集到应用程序中。默认情况下，Flutter用下划线(underline)修饰TextField。无涯教程还可以使用TextField添加几个属性，例如使用InputDecoration作为修饰的标签(label)，图标(icon)，行内提示文本(hint text)和错误文本(error text)。如果不需要装饰属性，则设置为null。

TextField构造函数

以下代码说明了Flutter中TextFiled小部件的演示示例:

复制代码
TextField (
  decoration: InputDecoration(
    border: InputBorder.none,
    labelText: 'Enter Name',
    hintText: 'Enter Your Name'
  ),
);

与TextField窗口小部件一起使用的一些最常见的属性如下:

  • decoration      -   它用于显示TextField周围的装饰。
  • border              -   它用于在TextField周围创建默认的圆角矩形边框。
  • labelText         -  它用于在选择TextField时显示标签文本。
  • hintText          -  它用于在TextField中显示提示文本。
  • icon                  -  用于将图标直接添加到TextField。

无涯教程将通过以下步骤来了解如何在Flutter应用程序中使用TextField小部件:

步骤1:在您使用的IDE中创建一个Flutter项目。在这里，无涯教程将使用Android Studio。

步骤2:在Android Studio中打开项目并导航到 lib 文件夹。在此文件夹中，打开 main.dart 文件并导入 material.dart 包，如下所述:

import 'package:flutter/material.dart';

步骤3:接下来，使用void main run app函数调用MyApp主类，然后创建名为MyApp的主窗口小部件类，并使用StatefulWidget进行扩展:

void main() => runApp( MyApp() );

class MyApp extends StatefulWidget { }

步骤4:接下来，无涯教程需要在类小部件构建区域中创建Scaffold widget-> Column widget，如下所示:

复制代码
class MyApp extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter TextField Example'),
        ),
        body: Padding(
            padding: EdgeInsets.all(15),
            child: Column(
              children:  [
            
              ]
              )
            )
              )
         );
  }
}

步骤5:最后，创建TextField小部件，如下所示。

复制代码
child: TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Password',
                      hintText: 'Enter Password',
                    ),
                  ),

让无涯教程看一下包含TextField小部件的完整源代码。这个Flutter应用程序需要两个TextField和一个RaisedButton。填写详细信息后，用户单击按钮。由于无涯教程尚未在按钮的onPressed()属性中指定任何值，因此它无法将其打印到控制台。

在main.dart文件中替换以下代码，然后查看输出。

复制代码
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp( home: MyApp(),));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter TextField Example'),
        ),
        body: Padding(
            padding: EdgeInsets.all(15),
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.all(15),
                  child: TextField(
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'User Name',
                      hintText: 'Enter Your Name',
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(15),
                  child: TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Password',
                      hintText: 'Enter Password',
                    ),
                  ),
                ),
                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.blue,
                  child: Text('Sign In'),
                  onPressed: (){},
                )
              ],
            )
        )
    );
  }
}

当无涯教程在Android仿真器中运行应用程序时，无涯教程应该类似于以下屏幕截图的UI:

Flutter TextField

如果在文本框中单击，则可以看到屏幕底部出现了一个键盘，标签进入了边框的左上角，提示文本显示在了该字段中。

Flutter TextField

获取TextField值

无涯教程知道Flutter在Android中没有TextField小部件的ID。 Flutter允许用户主要通过两种方式检索文本:一种是onChanged方法，另一种是控制器方法。两者都在下面讨论:

1. onChanged方法   -  它是检索文本字段值的最简单方法。此方法将当前值存储在一个简单变量中，然后在TextField窗口小部件中使用它。

复制代码
String value = "";
TextField(
  onChanged: (text) {
    value = text;
  },
)

2. Controller方法       -  这是使用TextEditingController检索文本字段值的。它将附加到TextField小部件，然后侦听更改并控制小部件的文本值。

复制代码
TextEditingController mycontroller = TextEditingController();
TextField(
  controller: mycontroller,
)

用于监听更改的示例代码。

复制代码
controller.addListener(() {
 //Do something here
});

获取或设置值的示例代码。

复制代码
print(controller.text);//Print current value
controller.text = "Demo Text";//Set new value

让无涯教程详细了解通过以下步骤在Flutter应用程序中检索文本字段值的第二种方法:

  1. 创建TextEditionController。
  2. 使用控制器属性将TextEditingController附加到TextField。
  3. 通过使用TextEditingController提供的text()方法来检索TextField的值。

现在，在您的IDE中创建一个新的Flutter项目并打开 main.dart 文件。将以下代码替换为main.dart文件。在此示例中，当用户点击按钮时，无涯教程将显示带有文本字段当前值的警报对话框。

复制代码
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp( home: MyApp(),));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State {
  TextEditingController nameController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter TextField Example'),
        ),
        body: Padding(
            padding: EdgeInsets.all(15),
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.all(15),
                  child: TextField(
                    controller: nameController,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'User Name',
                      hintText: 'Enter Your Name',
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(15),
                  child: TextField(
                    controller: passwordController,
                    obscureText: true,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: 'Password',
                      hintText: 'Enter Password',
                    ),
                  ),
                ),
                RaisedButton(
                  textColor: Colors.white,
                  color: Colors.blue,
                  child: Text('Sign In'),
                  onPressed: (){
                    return showDialog(
                      context: context,
                      builder: (context) {
                        return AlertDialog(
                          title: Text("Alert Message"),
                         //检索用户输入的文本
                         //使用文本编辑控制器。
                          content: Text(nameController.text),
                          actions: [
                            new FlatButton(
                              child: new Text('OK'),
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                            )
                          ],
                        );
                      },
                    );
                  },
                )
              ],
            )
        )
    );
  }
}

当无涯教程在Android仿真器中运行应用程序时，无涯教程应该类似于以下屏幕截图的UI:

Flutter TextField

在文本框内单击并添加值，如该字段所示。当无涯教程按下登录按钮时，将出现一个警告对话框，其中包含用户已输入该字段的文本。如果单击“ok”按钮，警报对话框将消失。

扩展TextField

有时，无涯教程想扩展一个TextField，这意味着它可以有多行。 Flutter可以通过添加属性maxLines并将其设置为null(这是默认情况下为null)来非常容易地做到这一点。无涯教程还可以指定确切的值以默认扩展行数。

复制代码
TextField(
  maxLines: 4,
)

限制TextField大小

TextField小部件还允许无涯教程限制文本字段内的最大字符数。无涯教程可以通过添加maxLength属性来做到这一点，如下所示:

复制代码
TextField(
  maxLength: 10,
),

TextFeild 密码框

模糊的意思是使字段不可读或不容易理解。在Flutter中，它主要用于包含密码的文本字段。无涯教程可以通过将obscureText设置为true来实现。

复制代码
TextField(
  obscureText: true,
),

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

推荐系统三十六式 -〔刑无刀〕

TypeScript开发实战 -〔梁宵〕

Node.js开发实战 -〔杨浩〕

Java业务开发常见错误100例 -〔朱晔〕

乔新亮的CTO成长复盘 -〔乔新亮〕

陶辉的网络协议集训班02期 -〔陶辉〕

说透5G -〔杨四昌〕

Serverless进阶实战课 -〔静远〕

结构执行力 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630