flutter 输入框组件TextField

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011272795/article/details/82528432

TextField

顾名思义文本输入框,类似于Ios中的UITextField和Android中的EditText和Web中的TextInput。主要是为用户提供输入文本提供方便。相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下Flutter中TextField的用法。

TextField的构造方法:

  const TextField({
    Key key,
    this.controller,            //控制器,控制TextField文字
    this.focusNode,
    this.decoration: const InputDecoration(),      //输入器装饰
    TextInputType keyboardType: TextInputType.text, //输入的类型
    this.style,
    this.textAlign: TextAlign.start,
    this.autofocus: false,
    this.obscureText: false,  //是否隐藏输入
    this.autocorrect: true,
    this.maxLines: 1,
    this.maxLength,
    this.maxLengthEnforced: true,
    this.onChanged,            //文字改变触发
    this.onSubmitted,          //文字提交触发(键盘按键)
    this.inputFormatters,
    this.enabled,
  })

先来试试最基本的TextField:

/*
 * Created by 李卓原 on 2018/9/7.
 * email: [email protected]
 *
 */

import 'package:flutter/material.dart';

class TextFieldAndCheckPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(
      title: Text('输入和选择'),
    ),body:TextField(),
    );
  }
}

输入框
这是一个默认的输入框,我们什么都没有做的时候的样子.
然后我们试一下它的属性

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);
  }

我们增加一个keyboardType属性,把keyboardType设置为TextInputType.number
可以看到每次我们让TextField获得焦点的时候弹出的键盘就变成了数字优先了。
然后我们为输入框做一些其他的效果,如提示文字,icon、标签文字等。
我们给上面的代码新增decoration属性,设置相关属性,可以发现当我们的TextField获得焦点时,图标会自动变色,提示文字会自动上移。

这里写图片描述

还可以看到 我加了一个onChanged
onChanged是每次输入框内每次文字变更触发的回调,onSubmitted是用户提交而触发的回调。
每当用户改变输入框内的文字,都会在控制台输出现在的字符串.与onSubmitted用法相同.

接下来,我们实现一个简单的登录页面:

/*
 * Created by 李卓原 on 2018/9/7.
 * email: [email protected]
 *
 */

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TextFieldAndCheckPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('输入和选择'),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            controller: phoneController,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.phone),
              labelText: '请输入你的用户名)',
              helperText: '请输入注册的手机号',
            ),
            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 onTextClear() {
    setState(() {
      phoneController.clear();
      passController.clear();
    });
  }
}

这里写图片描述

在布局上,我们使用一个Column包含了两个TextField和一个RaisedButton。
在逻辑上,每当我们点击下面的按钮都会判断用户名密码是否符合要求,并且使用控制器清空已经输入的用户名和密码。

当用户输入的手机号码不是11位的时候提示手机号码格式错误,
当用户没有输入密码时,提示填写密码,
用户名和密码符合要求时提示登录成功。

我这里登录成功之后还调了一个方法:phoneController.clear() 清空了用户名输入框中的内容。

代码的逻辑很简单。关于TextField的其他用法就不在一一介绍了,有兴趣的小伙伴可以自己尝试下

猜你喜欢

转载自blog.csdn.net/u011272795/article/details/82528432
今日推荐