Flutter文本框TextField

目录

参数详解

代码示例

 效果图

完整代码


参数详解

TextField同时也使用Text 的部分属性:

属性作用
controller控制器,如同 Android View id
decoration输入器装饰
keyboardType

输入的类型

- TextInputType.text(普通完整键盘)

- TextInputType.number(数字键盘)

- TextInputType.emailAddress(带有“@”的普通键盘)

- TextInputType.datetime(带有“/”和“:”的数字键盘)

- TextInputType.multiline(带有选项以启用有符号和十进制模式的数字键盘)

- TextInputType.url

obscureText是否隐藏输入(密码设置为true)
onChanged监听  文字改变触发
onSubmitted监听  键盘提交
cursorWidth光标显示宽度
cursorRadius光标显示圆角
cursorColor光标显示颜色
autofocus是否自动聚焦,默认是 false。
textCapitalization

用户输入的类型

- TextCapitalization.none 无
- TextCapitalization.sentences 首句大写
- TextCapitalization.characters 所有字符大写
- TextCapitalization.word 每个单词首字母大写

enabled是否禁用。如果是 false 不聚焦
inputFormatters官方提供了三种校验方法,分别是
WhitelistingTextInputFormatter(RegExp("[a-z]")) 白名单校验,也就是只允许输入符合规则的字符
BlacklistingTextInputFormatter(RegExp("[a-z]")) 黑名单校验,除了规定的字符其他的都可以输入
LengthLimitingTextInputFormatter(number) 长度限制,跟 maxLength 作用类似

 

代码示例

body: new ListView(
          children: <Widget>[
            TextField(
              decoration: new InputDecoration(hintText: "This is a hint",helperText: '官方表单Demo'),
            ),
            TextField(
              keyboardType: TextInputType.number,
              decoration: new InputDecoration(
                labelText: '数字优先的文本框',
              ),
            ),
            TextField(
              decoration: new InputDecoration(
                icon: Icon(Icons.phone),//添加一个图标
                labelText: '请输入你的用户名',
                helperText: '带图标和Label的文本输入框',
              ),
            ),
            TextField(
              decoration: new InputDecoration(
                icon: Icon(Icons.lock),//添加一个图标
                labelText: '请输入密码',
                helperText: '带图标和Label的密码输入框',
              ),
              obscureText: true, //是否隐藏输入
            ),


            //--------------------------------模拟登陆---------------------------
            Text('模拟登陆',style: TextStyle(fontSize: 20,height: 3,fontWeight: FontWeight.bold),textAlign: TextAlign.center,),
            TextField(
              controller: userController, //控制器,控制TextField文字   同 Android View id
              decoration: new InputDecoration(
                icon: Icon(Icons.phone),//添加一个图标
                labelText: '请输入你的用户名',
              ),
              autofocus: false,
            ),
            TextField(
              controller: passController,
              decoration: new InputDecoration(
                icon: Icon(Icons.lock),//添加一个图标
                labelText: '请输入密码',
              ),
              obscureText: true, //
            ),
            new Container(
                width: 340.0,
                padding: new EdgeInsets.all(20),
                child: new Card(
                    color: Colors.blue,
                    elevation: 16.0,
                    child: new FlatButton(
                        child: new Padding(
                          padding: new EdgeInsets.all(10.0),
                          child: new Text(
                            '登  录',
                            style: new TextStyle(
                                color: Colors.white, fontSize: 16.0),
                          ),
                        ),
                  onPressed: _login
                    )
                )
            ),

          ],
        )




//登陆校验
  void _login() {
    print({'用户名': userController.text, '密码': passController.text});
    if(userController.text.isEmpty){
      myDialog('请输入用户名!');
    }else if(passController.text.isEmpty){
      myDialog('请输入密码!');
    }else if(userController.text == 'mzw' && passController.text == '123'){
      myDialog('登陆成功!');
      userController.clear();
      passController.clear();
    }else {
      myDialog('用户密码错误!');
    }
  }

  //对话框
  void myDialog(String msg){
    print(myContext);
    showDialog(
      context: myContext,
      barrierDismissible: false,
      child: new AlertDialog(
        title: new Text(
          '温馨提示',
          style: new TextStyle(
            color: Colors.black54,
            fontSize: 18.0,
          ),
        ),
        content: new Text(msg),
        actions: <Widget>[
          new FlatButton(
              onPressed: () {
                Navigator.pop(myContext);
              },
              child: new Text('确定')),
        ],
      ),
    );
  }

 

TextField(
  decoration: new InputDecoration(
    labelText: '带边框的文本输入眶',
    border: OutlineInputBorder(),
  ),
),
TextField(
  maxLines: 10,
  minLines: 5,
  decoration: new InputDecoration(
    labelText: '多行文本输入框',
    border: OutlineInputBorder(),
  ),
),

 

 效果图

             

完整代码

查看完整代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

马志武

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值