flutter 输入框组件TextField的实现代码

程序员文章站 2022-07-06 14:42:46

textfield 顾名思义文本输入框，类似于ios中的uitextfield和android中的edittext和web中的textinput。主要是为用户提供输入文本...

textfield

顾名思义文本输入框，类似于ios中的uitextfield和android中的edittext和web中的textinput。主要是为用户提供输入文本提供方便。相信大家在原生客户端上都用过这个功能，就不在做具体介绍了，接下来还是具体介绍下flutter中textfield的用法。

以下内容已更新到 github

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.oneditingcomplete, //当用户提交可编辑内容时调用
  this.inputformatters,
  this.enabled,
  this.cursorwidth = 2.0,
  this.cursorradius,
  this.cursorcolor,
  this.keyboardappearance,
 })

先来试试最基本的textfield:

/*
 * created by 李卓原 on 2018/9/7.
 * email: zhuoyuan93@gmail.com
 *
 */
 
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(),
  );
 }
}

flutter 输入框组件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获得焦点时，图标会自动变色，提示文字会自动上移。

flutter 输入框组件TextField的实现代码

还可以看到我加了一个onchanged。

onchanged是每次输入框内每次文字变更触发的回调，onsubmitted是用户提交而触发的回调。

每当用户改变输入框内的文字，都会在控制台输出现在的字符串.与onsubmitted用法相同.

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

/*
 * created by 李卓原 on 2018/9/7.
 * email: zhuoyuan93@gmail.com
 *
 */

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

flutter 输入框组件TextField的实现代码

在布局上，我们使用一个column包含了两个textfield和一个raisedbutton。

在逻辑上，每当我们点击下面的按钮都会判断用户名密码是否符合要求，并且使用控制器清空已经输入的用户名和密码。

当用户输入的手机号码不是11位的时候提示手机号码格式错误，

当用户没有输入密码时，提示填写密码，

用户名和密码符合要求时提示登录成功。

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

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

使用decoration美化输入框

先看一下效果：

flutter 输入框组件TextField的实现代码

代码：

textfield(
      controller: accountcontroller,
      decoration: inputdecoration(
       border: outlineinputborder(),
       hinttext: '请输入账号',
       labeltext: '左上角',
       prefixicon: icon(icons.person),
      ),
     )

flutter 输入框组件TextField的实现代码

可以看到，我先添加了一个decoration属性.

decoration属性介绍:

border：增加一个边框，
hinttext：未输入文字时，输入框中的提示文字，
prefixicon：输入框内侧左面的控件，
labeltext：一个提示文字。输入框获取焦点/输入框有内容会移动到左上角，否则在输入框内，labeltex的位置.
suffixicon: 输入框内侧右面的图标.
icon : 输入框左侧添加个图标

在多个输入框内切换焦点

介绍一下oneditingcomplete这个方法:

当用户提交可编辑内容时调用(例如，用户按下键盘上的“done”按钮)。

oneditingcomplete的默认实现根据情况执行2种不同的行为:

当完成操作被按下时，例如“done”、“go”、“send”或“search”，用户的内容被提交给[controller]，然后焦点被放弃。
当按下一个未完成操作(如“next”或“previous”)时，用户的内容被提交给[controller]，但不会放弃焦点，因为开发人员可能希望立即将焦点转移到[onsubmit]中的另一个输入小部件。

flutter 输入框组件TextField的实现代码

我们有时候会需要这样的情况, 比如一个登录页面, 需要输入账号和密码 , 自然输入完账号就要输入密码了 , 我们在输入账号结束的时候 , 让密码输入框获取到焦点 .

看一下代码:

...
 focusnode secondtextfieldnode = focusnode();
...
column(
    children: <widget>[
     textfield(
      /* onchanged: (text) {
     value = text;
     print(value);
    },*/
      autofocus: false, //是否自动获取焦点
      controller: _textcontroller,
      decoration: inputdecoration(
       suffixicon: icon(icons.chevron_right), //输入框内右侧图标
       icon: icon(icons.person), //输入框左侧图标
       prefixicon: icon(icons.skip_previous), //输入框内左侧图标
       labeltext: 'labeltext',
       hinttext: 'hinttext',
       helpertext: 'helpertext',
      ),
      oneditingcomplete: () =>
        focusscope.of(context).requestfocus(secondtextfieldnode),
     ),
     textfield(
      focusnode: secondtextfieldnode,
      decoration: inputdecoration(
        contentpadding: edgeinsets.symmetric(horizontal: 15.0)),
     ),
    ],
   ),

我在顶层创建了一个交电接点并附加给第二个输入框,

在第一个输入框的oneditingcomplete方法中是用

focusscope.of(context).requestfocus(secondtextfieldnode),

方法来让第二个输入框请求获取焦点,

当然你也可以添加个按钮 , 点击按钮执行这个方法来实现切换焦点的功能.

keyboardtype

textfield成为焦点时显示的键盘类型。

textfield(
 keyboardtype: textinputtype.number,
),

类型是：

textinputtype.text（普通完整键盘）
textinputtype.number（数字键盘）
textinputtype.emailaddress（带有“@”的普通键盘）
textinputtype.datetime（带有“/”和“：”的数字键盘）
textinputtype.multiline（带有选项以启用有符号和十进制模式的数字键盘）

textinputaction

更改textfield的textinputaction可以更改键盘本身的操作按钮。

textfield(
 textinputaction: textinputaction.search,
),

这会导致“完成”按钮被“搜索”按钮替换：

flutter 输入框组件TextField的实现代码

textcapitalization

textfield提供了一些有关如何使用户输入中的字母大写的选项。

textcapitalization.sentences : 这是我们期望的正常类型的大写，每个句子的首字母大写。

flutter 输入框组件TextField的实现代码

textcapitalization.characters:大写句子中的所有字符。

textcapitalization.words : 将每个单词的首字母大写。

flutter 输入框组件TextField的实现代码

更改textfield中的光标

可以直接从textfield小部件自定义游标。

可以更改角落的光标颜色，宽度和半径。

例如，这里我没有明显的原因制作一个圆形的红色光标。

textfield(
 cursorcolor: colors.red,
 cursorradius: radius.circular(16.0),
 cursorwidth: 16.0,
),

flutter 输入框组件TextField的实现代码

控制textfield中的大小和最大长度

textfields可以控制在其中写入的最大字符数，最大行数并在键入文本时展开。

textfield(
 maxlength: 4,
),

flutter 输入框组件TextField的实现代码

通过设置maxlength属性，将强制执行最大长度，并且默认情况下会将计数器添加到textfield。

github源码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： idea远程debug调试部署在tomcat上项目

下一篇： flutter RotationTransition实现旋转动画

flutter 输入框组件TextField的实现代码

React组件内事件传参实现tab切换的示例代码

vue中子组件向父组件传递数据的实例代码(实现加减功能)

vue select组件的使用与禁用实现代码

Vue全局分页组件的实现代码

Flutter 系统是如何实现ExpansionPanelList的示例代码

使用Flutter实现一个走马灯布局的示例代码

Angular 实现输入框中显示文章标签的实例代码

Flutter自定义实现神奇动效的卡片切换视图的示例代码

微信小程序6位或多位验证码密码输入框功能的实现代码

基于elementUI实现图片预览组件的示例代码