Flutter——WidgetTextField

Posted 2022-11-09 Jason Zhang~

输入框控件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配置

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

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

centerTitle: true, //文字title居中

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

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

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


class LoginState extends State<Login> 
  // 用户名的控制器
  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: <Widget>[
            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: <Widget>[
                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。