美文网首页
Flutter学习笔记(三):文本输入框TextField

Flutter学习笔记(三):文本输入框TextField

作者: 睿丶清 | 来源:发表于2019-04-26 10:20 被阅读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

          本文链接:https://www.haomeiwen.com/subject/ijaxnqtx.html