Flutter——Widget(4)、TextField

输入框控件TextField

  • 获取输入内容controller
    TextEditingController userNameController = TextEditingController();,userNameController.text获取对应的TextField控件输入的内容。
  • keyboardType
    指定输入类型。取值自TextInputType中的text,, number, phone, datetime, emailAddress, url等。
  • textInputAction
    指定回车键类型更改。取值自TextInputAction中的done、go、search、send、next等。还需要设置onEditingComplete来指定点击改过类型的回车键的响应事件。如指定为next,方法指定跳转到密码输入框onEditingComplete: () => FocusScope.of(context).requestFocus(pwdNode),其中FocusNode pwdNode = FocusNode();在密码的输入控件中指定focusNode: pwdNode
  • obscureText
    输入内容是否隐藏。密码输入框设置为true。
  • maxLines
    最大行数,默认为1。
  • maxLength
    最大输入字符长度。
  • InputDecoration。
    • icon
      设置输入框的图标。如icon: Icon(Icons.account_box)表示在输入框左边显示系统自带的账号图标。输入框激活状态下图标也会颜色变更。
    • prefixIcon
      类似于icon,但是图标显示在输入框下划线线内。
    • prefix
      类似于prefixIcon,可以自定义控件如显示文本。prefix: Text("用户名")
    • prefixText
      prefix指定为Text,设置固定显示在前面的字符串前缀。如手机号码输入前面固定+86:prefixText: "+86"
    • suffixIcon、suffix、suffixText
      类似于prefixIcon、prefix、prefixText,但是是显示在后面。suffixText能用于设定单位等固定显示在尾部。
    • labelText
      提示文案,类似于安卓的Hint,在输入框激活时会动画上移到上方。
    • helperText
      显示在输入框下方的帮助文案。一般不设置。
    • hintText
      激活输入框但是未输入内容时的提示文案。如果labelText存在,则未激活状态下显示的是labelText,否则未激活状态下也显示hintText。

过程中解决的bug:

1、有输入框,用SingleChildScrollView嵌套Column。否则弹出输入键盘时有溢出bug:bottom overflowed by X PIXELS。

2、运行安卓报错:Flutter SocketException: Failed to create server socket (OS Error: Permission denied, errno = 13), address = 127.0.0.1, port = 0。在android工程AndroidManifest.xml配置



3、AppBar中标题默认靠左显示,设置属性让标题水平居中。

centerTitle: true, //文字title居中

实现登录界面的代码如下:

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

class Login extends StatefulWidget {
  @override
  State createState() => LoginState();
}

class LoginState extends State {
  // 用户名的控制器
  final TextEditingController userNameCtrl = TextEditingController();

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

  // 光标跳转的密码输入框对象
  FocusNode pwdNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
            title: Text("登录"),
            centerTitle: true, //文字title居中
            leading: new BackButton()),
        // 有输入框,用SingleChildScrollView嵌套Column。否则弹出输入键盘时有溢出bug。bottom overflowed by X PIXELS
        body: SingleChildScrollView(
            child: Column(
          children: [
            new Padding(
              padding: EdgeInsets.fromLTRB(40, 24, 40, 0),
              child: TextField(
                controller: userNameCtrl,
                // 指定该输入框是输入手机号码的
                keyboardType: TextInputType.phone,
                // 回车键用途,输入下一项。还需要具体实现。
                textInputAction: TextInputAction.next,
                // 键盘动作按钮点击之后执行的代码:光标切换到指定的输入框
                onEditingComplete: () =>
                    FocusScope.of(context).requestFocus(pwdNode),
                maxLength: 11,
                decoration: InputDecoration(
                  icon: Icon(Icons.account_circle),
                  labelText: "请输入用户名",
//                  helperText: "一般为手机号码", // 一般不设置
                  hintText: "11位手机号码",
//                  prefixIcon: Icon(Icons.account_circle), // 输入框线内
//                  prefix: Text("用户名"),
//                  prefixText: "+86",
                ),
              ),
            ),
            new Padding(
              padding: EdgeInsets.fromLTRB(40, 4, 40, 0),
              child: TextField(
                controller: passwordCtrl,
                focusNode: pwdNode,
                keyboardType: TextInputType.text,
                // 回车键用途,完成输入
                textInputAction: TextInputAction.done,
                maxLength: 11,
                obscureText: true,
                // 密码输入,隐藏
                decoration: InputDecoration(
                  icon: Icon(Icons.lock_outline),
                  labelText: "请输入密码",
//                  suffixIcon: Icon(Icons.visibility_off),
//                  suffixText: "(元)",
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(40, 36, 40, 0),
              child: Row(children: [
                new Expanded(
                    child: RaisedButton(
                  color: Colors.blue,
                  onPressed: () {
                    doLogin();
                  },
                  child: new Text(
                    "登录",
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ))
              ]),
            ),
          ],
        )));
  }

  void doLogin() {
    if (userNameCtrl.text.isEmpty || passwordCtrl.text.isEmpty) {
      Fluttertoast.showToast(msg: "请输入用户名和密码");
    } else {
      Fluttertoast.showToast(
          msg: "用户名: ${userNameCtrl.text},密码: ${passwordCtrl.text}");
    }
  }
}

实现效果:

本文源码:TAG,下载源码需指定tag。

你可能感兴趣的:(Flutter,Flutter笔记)