Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter TextField(输入控件)

Flutter TextField(输入控件)

作者头像
毛大姑娘
发布于 2020-09-10 07:54:53
发布于 2020-09-10 07:54:53
3.6K00
代码可运行
举报
文章被收录于专栏:向全栈出发向全栈出发
运行总次数: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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)
用户1155943
2018/01/04
2.6K0
Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)
Art of Android Development Reading Notes 6
《Android开发艺术探索》读书笔记 (6) 第6章 Android的Drawable
宅男潇涧
2018/08/01
5030
Android利用selector(选择器)实现图片动态点击效果
在Android中如果是给图片设置点击事件,为了用户的体验有必要添加动态点击效果 效果图如下:
计蒙不吃鱼
2025/06/12
1230
Android利用selector(选择器)实现图片动态点击效果
自定义 Drawable 你还只会 <shape> 吗?
其中每一个卡片的背景都是从上到下渐变,仔细看其中的边框也是渐变的,这个要怎么实现呢?第一个能想到的最简单的办法就是让设计师导出包含边框的完整的背景切图。但是作为一个优(ban)秀(zhuan)的开发工程师,当然要想办法自己实现啦,用切图你就输啦!(开玩笑);更重要的是,对比直接使用一张图,使用自定义 Drawable 来实现可以减少包大小(还能炫技)
Rouse
2024/05/28
1770
自定义 Drawable 你还只会 <shape> 吗?
Android开发笔记(八)神奇的shape
shape意即形状,是Android中描述规则几何图形的定义,ShapeDrawable其实就是Drawable的一个子类。用好shape,可以让APP页面不再呆板;用好shape,可以节省不小的美工工作量。 shape的定义文件是xml,以shape元素为根节点。根节点下定义了六个节点:corners(圆角)、gradien(渐变)、padding(间隔)、size(尺寸)、solid(填充)、stroke(描边),各节点的属性值主要是各种长宽、半径、角度,以及颜色。这些定义很简单,多用几遍就记住了,不过网上的介绍大多不全,所以博主在下面就详细介绍各节点的属性用法。   shape(根节点) android:shape: 字符串类型,图形的形状。为rectangle表示矩形(默认),为oval表示椭圆(此时corners节点将失效),为line表示直线(此时必须设置stroke节点,不然会报错),为ring表示圆环。 下面的属性只有在android:shape="ring"时可用: android:innerRadius: 像素类型,内圆的半径。 android:innerRadiusRatio: 浮点型,以环的宽度比率来表示内圆的半径。例如,如果android:innerRadiusRatio="3",表示内圆半径等于环的宽度(即外圆直径)除以3。如已设置android:innerRadius则不需设置本属性 android:thickness: 像素类型,环的厚度 android:thicknessRatio: 浮点型,以环的宽度比率来表示环的厚度。例如,如果android:thicknessRatio="2",那么环的厚度就等于环的宽度除以2。如已设置android:thickness则不需设置本属性 android:useLevel: 布尔类型,如果当做是LevelListDrawable使用时值为true,否则为false(一般情况必须设置为false,不然ring无法显示)。   corners(圆角) android:bottomLeftRadius: 像素类型,左下圆角的半径 android:bottomRightRadius: 像素类型,右下圆角的半径 android:topLeftRadius: 像素类型,左上圆角的半径 android:topRightRadius: 像素类型,右上圆角的半径 android:radius: 像素类型,圆角半径(若有上面四个圆角半径的定义,则不需要radius定义)   无corners节点表示没有圆角   gradien(渐变) android:angle: 整型,渐变的起始角度。0值时表示时钟的九点位置,其值增大表示往逆时针方向旋转。例如值为90表示时钟六点位置,值为180表示时钟三点位置,值为270表示时钟零点/十二点位置 android:centerX: 浮点型,圆心的X坐标。当android:type="linear"时不可用 android:centerY: 浮点型,圆心的Y坐标。当android:type="linear"时不可用 android:gradientRadius: 整型,渐变的半径。当android:type="radial"时才需要设置该属性 android:centerColor: 颜色类型,渐变的中间颜色 android:startColor: 颜色类型,渐变的起始颜色 android:endColor: 颜色类型,渐变的终止颜色 android:type: 字符串类型,渐变类型。为linear表示线性渐变(默认值),为radial表示放射渐变(起始颜色就是圆心颜色),为sweep表示滚动渐变(即一个线段以某个端点为圆心做360度旋转) android:useLevel: 布尔类型,设置为true无渐变,false有渐变色。如果要使用LevelListDrawable对象,就要设置为true   无gradien节点表示没有渐变效果   padding(间隔) android:bottom: 像素类型,与下边的间隔 android:left: 像素类型,与左边的间隔 android:right: 像素类型,与右边的间隔 android:top: 像素类型,与上边的间隔   无padding节点表示四周不设间隔   size(尺寸) android:height: 像素类型,图形高度 android:width: 像素类型,图形宽度   无size节点表示长宽自适应   solid(填充) android:color: 颜色类型,内部填充的颜色   无solid节点表示无填充颜色   
aqi00
2019/01/18
1.6K0
Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角,渐变实现)
本文介绍了如何在Android中创建一个可绘制对象,该对象可以呈现复杂的几何形状、可自定义颜色和样式、支持动态调整大小和位置。同时,还介绍了如何使用GradientDrawable来设置自定义颜色和形状,以及如何使用ShapeDrawable来创建圆角、渐变等效果。同时,还介绍了如何动态创建和修改GradientDrawable的属性,以满足不同的需求。
用户1155943
2018/01/04
3.8K0
Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角,渐变实现)
实习杂记(20)---Android里面shape定义图形相关属性
xmlns:android String. Required. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android". 这个是必须的,申明Android的命名空间 android:shape Keyword. Defines the type of shape. Valid values are:(定义这个类型的形状,变量值是:) 这个也是必须的,表示你定义的图形是什么类型,圆,环,直线,长方形
wust小吴
2019/07/08
4160
android之自定义渐变颜色(一)
你是否已经厌恶了纯色的背景呢?那好,android提供给程序员自定义渐变颜色的接口,让我们的界面炫起来吧。 首先,你在drawable目录下写一个xml,代码如下 <?xml version="1.0
forrestlin
2018/05/23
9120
Android学习第一弹:Android通过用代码画虚线椭圆边框背景来学习一下shape的用法
学习Shape的用法 非著名程序员 在Android程序开发中,我们经常会去用到Shape这个东西去定义各种各样的形状,shape可以绘制矩形环形以及椭圆,所以只需要用椭圆即可,在使用的时候将控件
非著名程序员
2018/02/01
2.3K0
Android学习第一弹:Android通过用代码画虚线椭圆边框背景来学习一下shape的用法
Android各种各样的Drawable-更新中
通常情况下,我们很少直接使用Drawable的实现类,大部分的情况下还是使用xml的方式进行开发。只有在程序中需要动态的修改drawable的属性时,才需要使用具体的drawable类型提供的方法。
小小工匠
2021/08/16
1.2K0
Android – Drawable 详解
很早看过这篇文章,并做了笔记,后来看到群里的小伙伴有问相关Drawable的问题,就把这篇翻译过来的文章给放出来了。大家一起学习,一起进步。想看原文的小伙伴可以点击下面的链接。 原文地址 前言 Drawable是可以绘制到屏幕上的图形。 Drawable用于定义形状,颜色,边界,渐变等,然后将其应用于Activity中的View。 这通常用于自定义显示在特定View。 Drawable倾向于在XML中定义,然后可以通过XML或Java代码应用于View。 有关Android的每个版本的默认Drawab
code_horse
2018/07/02
5.7K0
相关推荐
Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验