Flutter学习笔记（三）：文本输入框TextField

2019-04-26 本文已影响0人睿丶清

TextField用于文本输入，它提供了很多属性，通过源码查看一下主要属性的作用：

const TextField({
    Key key,
    this.controller,
    this.focusNode,
    this.decoration = const InputDecoration(),
    TextInputType keyboardType,
    this.textInputAction,
    this.textCapitalization = TextCapitalization.none,
    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.onEditingComplete,
    this.onSubmitted,
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
  }) : assert(textAlign != null),
       assert(autofocus != null),
       assert(obscureText != null),
       assert(autocorrect != null),
       assert(maxLengthEnforced != null),
       assert(scrollPadding != null),
       assert(maxLines == null || maxLines > 0),
       assert(maxLength == null || maxLength > 0),
       keyboardType = keyboardType ?? (maxLines == 1 ? TextInputType.text : TextInputType.multiline),
       super(key: key);

controller：编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。大多数情况下我们都需要显式提供一个controller来与文本框交互。如果没有提供controller，则TextField内部会自动创建一个;
focusNode：用于控制TextField是否占有当前键盘的输入焦点;
InputDecoration：用于控制TextField的外观显示，如提示文本、背景颜色、边框等;
autofocus: 是否自动获取焦点;
keyboardType：用于设置该输入框默认的键盘输入类型，可取值范围：
1. text ：文本输入键盘
2. multiline ：多行文本
3. number ：数字
4. phone :优化后的电话号码输入键盘
5. datetime :优化后的日期输入键盘
textInputAction：键盘动作按钮图标(即回车键位图标)，它是一个枚举值，有多个可选值，全部的取值列表读者可以查看API文档;
style：正在编辑的文本样式;
textAlign: 输入框内编辑文本在水平方向的对齐方式;
obscureText：是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换。
maxLines：输入框的最大行数，默认为1；如果为null，则无行数限制;
maxLength和maxLengthEnforced ：maxLength代表输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数。maxLengthEnforced决定当输入文本长度超过maxLength时是否阻止输入，为true时会阻止输入，为false时不会阻止输入但输入框会变红;
onChange：输入框内容改变时的回调函数；注：内容改变事件也可以通过controller来监听;
onEditingComplete和onSubmitted：这两个回调都是在输入框输入完成时触发，比如按了键盘的完成键（对号图标）或搜索键（🔍图标）。不同的是两个回调签名不同，onSubmitted回调是ValueChanged<String>类型，它接收当前输入内容做为参数，而onEditingComplete不接收参数;
inputFormatters：用于指定输入格式；当用户输入内容改变时，会根据指定的格式来校验;
enable：如果为false，则输入框会被禁用，禁用状态不接收输入和事件，同时显示禁用态样式（在其decoration中定义）;
cursorWidth、cursorRadius和cursorColor：这三个属性是用于自定义输入框光标宽度、圆角和颜色的。
属性介绍完，编写一个输入用户名和密码，并且可以控制输入框焦点状态，监听输入内容的事例：

import 'package:flutter/material.dart';

class InputPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _InputState();
  }
}

class _InputState extends State<InputPage> {

  //输入框监听器
  TextEditingController _unameController = new TextEditingController();
  TextEditingController _passwordController = new TextEditingController();

  //输入框焦点管理对象
  FocusNode unFocusNode = new FocusNode();
  FocusNode pwdFocusNode = new FocusNode();

  //管理输入框焦点对象的对象
  FocusScopeNode focusScopeNode;

  @override
  void initState() {

    //输入框件添加（注册）监听器，用于检测输入框内内容的变化
    _unameController.addListener(() {
      print("username:" + _unameController.text);
    });

    _passwordController.addListener(() {
      print("password:" + _passwordController.text);
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    //页面绘制
    return Scaffold(
      appBar: AppBar(
        title: Text("输入框，表单"),
      ),
      body: Container(
        //竖直排列布局
        child: Column(
          children: <Widget>[
            TextField(
              autofocus: true,
              decoration: InputDecoration(
                  labelText: "用户名",
                  hintText: "输入用户名称",
                  prefixIcon: Icon(Icons.person)),
//              controller: _unameController,
              onChanged: (v) {
                print("username:" + v);
              },
              focusNode: unFocusNode,
            ),
            TextField(
              autofocus: true,
//              controller: _passwordController,
              decoration: InputDecoration(
                  labelText: "密码",
                  hintText: "输入密码",
                  prefixIcon: Icon(Icons.lock)),
              onChanged: (v) {
                print("password:" + v);
              },
              focusNode: pwdFocusNode,
            ),
            //绘制按钮布局
            Builder(builder: (ctx) {
              return Column(
                children: <Widget>[
                  RaisedButton(
                    onPressed: () {
                      //焦点对象管理对象初始化
                      if (focusScopeNode == null) {
                        focusScopeNode = FocusScope.of(ctx);
                      }

                      //进行输入框焦点的转移
                      if (unFocusNode.hasFocus && !pwdFocusNode.hasFocus) {
                        focusScopeNode.requestFocus(pwdFocusNode);
                      } else if (pwdFocusNode.hasFocus &&
                          !unFocusNode.hasFocus) {
                        focusScopeNode.requestFocus(unFocusNode);
                      }else if (!unFocusNode.hasFocus&&!pwdFocusNode.hasFocus){
                        focusScopeNode.requestFocus(unFocusNode);
                      }
                    },
                    child: Text("移动焦点"),
                  ),
                  RaisedButton(
                    onPressed: (){
                      //输入框失去焦点
                      unFocusNode.unfocus();
                      pwdFocusNode.unfocus();
                    },
                    child: Text("关闭软键盘"),
                  ),
                ],
              );
            }),
          ],
        ),
      ),
    );
  }
}

运行程序可以实现上述描述的效果，具体api详情可查看源码或者官方文档,输入框学习暂时到此为止！希望能够对看官们有所帮助！

Flutter学习笔记（三）：文本输入框TextField

猜你喜欢

热点阅读