Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter TextField(输入控件)

Flutter TextField(输入控件)

作者头像
毛大姑娘
发布于 2020-09-10 07:54:53
发布于 2020-09-10 07:54:53
3.5K00
代码可运行
举报
文章被收录于专栏:向全栈出发向全栈出发
运行总次数:0
代码可运行

1、常用属性值及含义

TextField常用属性值

含义

maxLength

最大长度,设置此项会让TextField右下角有一个输入数量的统计字符串

maxLines

最大行数

autocorrect

是否自动更正

autofocus

是否自动对焦

obscureText

是否是密码

textAlign

文本对齐方式,与Text的textAlign属性含义一致

style

输入文本的样式

inputFormatters

允许的输入格式

onChanged

内容改变的回调

onSubmitted

内容提交(按回车)的回调

enabled

是否禁用

示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
      TextField(
        maxLength: 30,//最大长度,设置此项会让TextField右下角有一个输入数量的统计字符串
        maxLines: 1,//最大行数
        autocorrect: true,//是否自动更正
        autofocus: true,//是否自动对焦
        obscureText: true,//是否是密码
        textAlign: TextAlign.center,//文本对齐方式
        style: TextStyle(fontSize: 30.0, color: Colors.blue),//输入文本的样式
        inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],//允许的输入格式
        onChanged: (text) {//内容改变的回调
          print('change $text');
        },
        onSubmitted: (text) {//内容提交(按回车)的回调
          print('submit $text');
        },
        enabled: true,//是否禁用
      ),

(图一)TextFeild常用属性赋值示例

2、普通输入文本

最简易的TextFeild不包含提示文本。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
          new TextField(
             //最普通的TextField,没有任何提示
              ),

(图二)TextFeild简易示例

3、包含提示文案的输入文本

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
          new TextField(
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.text_fields),
              labelText: '这里是提示文案',
              helperText: '这是文本框内提示文案',
            ),
            onChanged: _textFieldChanged,
            autofocus: false,
          ),


void _textFieldChanged(String str) {
  print(str);
}

(图三)TextFeild包含提示文案示例

4、登录示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class TextFieldDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextFieldDemoState();
  }
}

class TextFieldDemoState extends State<TextFieldDemo> {
  //手机号的控制器
  TextEditingController phoneController = TextEditingController();

  //密码的控制器
  TextEditingController passController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("文本输入控件"),
      ),
      body: new Column(
        children: <Widget>[
          new Text(
            "下面是登录演示",
            style: new TextStyle(
                color: const Color(0xffff9900),
                decoration: TextDecoration.underline,
                decorationColor: const Color(0xffff9900),
                fontSize: 21.0),
          ),
          TextField(
            controller: phoneController,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.phone),
              labelText: '请输入用户名)',
              helperText: '请输入11位手机号',
            ),
            autofocus: false,
          ),
          TextField(
              controller: passController,
//              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10.0),
                icon: Icon(Icons.lock),
                labelText: '请输入密码)',
              ),
              obscureText: true),
          RaisedButton(
            onPressed: _login,
            child: Text('登录'),
          ),
    );
  }

  void _login() {
    print({'phone': phoneController.text, 'password': passController.text});
    if (phoneController.text.length != 11) {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                title: Text('手机号码格式不对'),
              ));
    } else if (passController.text.length == 0) {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                title: Text('请填写密码'),
              ));
    } else {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                title: Text('登录成功'),
              ));
      phoneController.clear();
    }
  }
}


void main() {
  runApp(new MaterialApp(
    title: "输入控件案例",
    theme: new ThemeData(primaryColor: Colors.deepOrangeAccent),
    home: new TextFieldDemo(),
  ));
}

(图四)TextFeild登录示例

5、其他功能

5.1 keyboardType 键盘类型

控制输入的键盘类型。

keyboardType属性值

含义

TextInputType.text

普通完整键盘。

TextInputType.number

数字键盘。

TextInputType.emailAddress

带有“@”的普通键盘。

TextInputType.datetime

带有“/”和“:”的数字键盘。

TextInputType.multiline

带有选项以启用有符号和十进制模式的数字键盘。

示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
TextField(
  keyboardType: TextInputType.number,
),
5.2 textCapitalization 字母大写

TextField提供了一些有关如何使用户输入中的字母大写的选项。

textCapitalization属性值

含义

TextCapitalization.sentences

这是我们期望的正常类型的大写,每个句子的首字母大写。

TextCapitalization.characters

大写句子中的所有字符。

TextCapitalization.words

将每个单词的首字母大写。

TextCapitalization.none

不做转换。

示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
          TextField(
            textCapitalization: TextCapitalization.sentences,
          ),
5.3 更改TextField中的光标

可以直接从TextField小部件自定义游标。

可以更改角落的光标颜色,宽度和半径。 例如,这里我没有明显的原因制作一个圆形的红色光标。

属性值

含义

cursorColor

光标颜色

cursorRadius

光标圆角

cursorWidth

光标宽度

示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0,
),
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年08月16日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Flutter 专题】64 图解基本 TextField 文本输入框 (一)
和尚最近在学习基础的 Flutter Widget,原因在于很多基础的组件有很多容易忽视的注意事项,了解并熟悉后对整体的开发认知会有所提升;今天和尚学习一下 TextField 文本输入框;
阿策小和尚
2019/10/22
4.8K0
Flutter TextField详解
TextField是一个material design风格的输入框,本身有多种属性,除此之外装饰器InputDecoration也有多种属性,但都比较简单,所以不必担心,且听我娓娓道来。
yechaoa
2022/06/10
4.4K0
Flutter TextField详解
Flutter基础widgets教程-TextField篇
1 TextField TextField 是一个文本输入组件,类似 Web 上的 Input。 2 构造函数 TextField({ Key key, this.controller, this.focusNode, this.decoration = const InputDecoration(), TextInputType keyboardType, this.textInputAction, this.textCapitalization =
青年码农
2020/10/10
7860
Flutter基础widgets教程-TextField篇
Flutter组件学习(三)—— 输入框TextFiled
Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框架的魅力还是很吸引人的哈,所以我们更要抓紧学习了;之前我写了两篇文章来介绍 Flutter中的Text组件 和 Flutter中的Image组件,今天我们继续学习输入框 TextFiled 组件,话不多说,先上图:
用户2802329
2018/12/26
2.6K0
Flutter lesson 8:输入框,时间日期选择
Flutter自带的 showDatePicker 和 showTimePicker 两个方法可以进行时间和日期的选择。
踏浪
2019/07/31
4.9K0
Flutter lesson 8:输入框,时间日期选择
输入和选择
在前面的文章中我们学习了Flutter中事件的处理,包括组件的单击、双击、长按、滑动等。想必大家多其已经有了一定的认识。
flyou
2019/08/06
2.5K0
输入和选择
Flutter | 常用组件
​ textAlign:文本的对齐方式;可以选择左对齐、右对齐还是居中。注意,对齐的参考系是Text widget本身
345
2022/02/11
11.6K0
Flutter | 常用组件
Flutter跨平台移动端开发丨Text、Button、Image、Switch、Checkbox、TextField
Material 库中的按钮点击时默认带有“水波动画”,点击事件监听通过 onPressed 属性设置,若不设置 onPressed 则按钮处于禁用状态,无点击动效也不响应点击事件
码脑
2019/05/25
2.6K0
Flutter 入门指北之输入处理(登录界面实战)
这边需要提下的是 setState 方法,该方法只有 StatefulWidget 才有,当需要修改某个值的内容的时候,通过该方法进行修改,最后的效果图如下,当输入框文字发生变化的时候,监听的 Text 内容会随之改变,获取内容的 Text 当点击按钮了才发生变化
陈宇明
2020/12/16
2K1
【Flutter实战】文本组件及五大案例
老孟导读:大家好,这是【Flutter实战】系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握。
老孟Flutter
2020/09/11
7.4K0
【Flutter实战】文本组件及五大案例
Flutter中的文本输入框组件TextField
1. maxLines 最大输入行。默认为单行输入框,配置此参数后则为多行输入框;
越陌度阡
2021/01/05
5.3K0
Flutter中的文本输入框组件TextField
【Flutter 专题】08 小小优化【登录】页面
和尚前两天花了很久才搭建了一个最简单的【登录】页面,但依然还有很多需要优化的地方,和尚又花了很久的时间尝试做了一点点的优化,仅针对优化的部分简单整理一下。
阿策小和尚
2019/08/12
1.5K0
【Flutter 专题】08 小小优化【登录】页面
Flutter 全栈式——基础控件
当输入框的默认线框无法满足时,可以使用Container容器自定义边框。这时候可以将装饰器设置为InputDecoration.collapsed(hintText: 'hint')表示禁用装饰线
arcticfox
2020/06/12
3.9K0
『Flutter』警告修复 & 常用组件 TextField
在上一篇文章中,给大家介绍有无状态组件的时候代码中出现了一些警告,那么这些警告是什么意思呢?我们该如何修复呢?
杨不易呀
2024/01/18
6140
『Flutter』警告修复 & 常用组件 TextField
17.Flutter学习之路常用表单TextField、CheckBox等组件
TextField常见属性: 属性 描述 maxLines 将文本框改为多行文本框,默认是单行 onChanged 文本框改变的时候触发的时间 decoration hintText类似于EditText中hint属性。border 边框线,配合OutlineInputBorder使用、labelText:label的名称、labelStyle,配置label使用 obscureText j将文本框改为密码框 controller controller结合TextEditingController ()可以
易帜
2022/02/09
8820
17.Flutter学习之路常用表单TextField、CheckBox等组件
[- Flutter 数据&状态篇 -] setState
0.1:对我而言,一个产品有四层境界 1.造都造不出来 2.它又不是不能用 <---- 3.用的时候大家都不说话 4.如丝般顺滑,易拓展,易修改,易复用 0.2:要说的话 注意:本篇是对状态
张风捷特烈
2020/04/30
1.4K0
[- Flutter 数据&状态篇 -] setState
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
Image 组件有多个命名构造函数 , 可以从 文件 / 内存 / 网络 / Assets 中加载文件 , 分别对应不同的构造函数 ;
韩曙亮
2023/03/28
10.6K0
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
使用 Flutter 制作地图应用
在本文中,我将向您展示如何使用 Flutter 向您的应用程序添加映射功能。对于本教程,您将不需要 google maps API,因此您无需支付任何费用,因为我们将使用另一个免费 API,所以不用多说,让我们深入研究它。
徐建国
2021/08/08
2.8K0
Flutter中的常见表单组件
在Flutter中,常见的表单组件有TextField单行文本框、TextField多行文本框、CheckBox、Radio、Switch、CheckBoxListTile、RadioListTile、SwitchListTile、Slide等。
拉维
2019/08/29
5K0
Flutter中的常见表单组件
《《在Flutter和androidStudio中制作登录表单》》
《在Flutter和androidStudio中制作登录表单》 在本教程中,我将向您展示如何在 Flutter 和 Android studio 中制作漂亮的登录表单, 您将学习如何制作背景图像、如何在 Flutter中制作圆形按钮、如何添加一些不透明度以及如何添加图标到您的文本字段。 import 'dart:ffi'; import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( home: LoginApp
徐建国
2021/08/03
2.1K0
推荐阅读
相关推荐
【Flutter 专题】64 图解基本 TextField 文本输入框 (一)
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验