首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter TextField(输入控件)

Flutter TextField(输入控件)

作者头像
毛大姑娘
发布2020-09-10 15:54:53
3.1K0
发布2020-09-10 15:54:53
举报
文章被收录于专栏:向全栈出发向全栈出发

1、常用属性值及含义

TextField常用属性值

含义

maxLength

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

maxLines

最大行数

autocorrect

是否自动更正

autofocus

是否自动对焦

obscureText

是否是密码

textAlign

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

style

输入文本的样式

inputFormatters

允许的输入格式

onChanged

内容改变的回调

onSubmitted

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

enabled

是否禁用

示例

      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不包含提示文本。

          new TextField(
             //最普通的TextField,没有任何提示
              ),

(图二)TextFeild简易示例

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

          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、登录示例

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

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

示例

TextField(
  keyboardType: TextInputType.number,
),
5.2 textCapitalization 字母大写

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

textCapitalization属性值

含义

TextCapitalization.sentences

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

TextCapitalization.characters

大写句子中的所有字符。

TextCapitalization.words

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

TextCapitalization.none

不做转换。

示例

          TextField(
            textCapitalization: TextCapitalization.sentences,
          ),
5.3 更改TextField中的光标

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

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

属性值

含义

cursorColor

光标颜色

cursorRadius

光标圆角

cursorWidth

光标宽度

示例

TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0,
),
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年08月16日,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、常用属性值及含义
  • 2、普通输入文本
  • 3、包含提示文案的输入文本
  • 4、登录示例
  • 5、其他功能
    • 5.1 keyboardType 键盘类型
      • 5.2 textCapitalization 字母大写
        • 5.3 更改TextField中的光标
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档