如何在颤振中使用文本框输入框组件 - 行业资讯 - 肥雀云

　　介绍

今天就跟大家聊聊有关如何在颤振中使用文本框输入框组件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强> TextField

顾名思义文本输入框,类似于iOS中的UITextField和Android中的EditText和网络中的TextInput。主要是为用户提供输入文本提供方便。相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下颤振中TextField的用法。

以下内容已更新到github

TextField的构造方法:

const 文本框({ 　　Key 键,才能　　this.controller才能,,,,,,,//控制器、控制TextField文字　　this.focusNode才能, 　　,,this.decoration: const InputDecoration(),,,,//输入器装饰　　TextInputType 才能keyboardType: TextInputType.text,,//输入的类型　　this.style才能, 　　,,this.textAlign: TextAlign.start, 　　,,this.autofocus:假的, 　　this.obscureText才能:假的,,//是否隐藏输入　　this.autocorrect才能:,真的, 　　this.maxLines才能:1, 　　this.maxLength才能, 　　this.maxLengthEnforced才能:,真的, 　　this.onChanged才能,,,,,,,//文字改变触发　　this.onSubmitted才能,,,,,,//文字提交触发(键盘按键) 　　this.onEditingComplete才能,,//当用户提交可编辑内容时调用　　this.inputFormatters才能, 　　this.enabled才能, 　　this.cursorWidth 才能=,2.0, 　　this.cursorRadius才能, 　　this.cursorColor才能, 　　this.keyboardAppearance才能, 　　之前,})

先来试试最基本的文本字段:

/* 　　,* Created by 李卓原,提醒2018/9/7。　　*大敌;电子邮件:zhuoyuan93@gmail.com 　　,* 　　,*/, 　　import & # 39;包:颤振/material.dart& # 39;; 　　　　class TextFieldAndCheckPage extends StatefulWidget { 　　,@override 　　,State createState(),=祝辞,TextFieldAndCheckPageState (); 　　} 　　　　class TextFieldAndCheckPageState extends State< TextFieldAndCheckPage>, { 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　return 才能;支架(appBar: appBar ( 　　,,,标题:文本(& # 39;输入和选择& # 39;), 　　),才能身体:文本域(), 　　,,); 　　,} 　　}

如何在颤振中使用文本框输入框组件“> 这是一个默认的输入框,我们什么都没有做的时候的样子。 然后我们试一下它的属性 <pre类= 文本域( 　　,,,keyboardType:, TextInputType.number, 　　,,,装饰:,InputDecoration ( 　　,,,,contentPadding:, EdgeInsets.all (10.0), 　　,,,,:图标,图标(Icons.text_fields), 　　,,,,labelText:, & # 39;请输入你的姓名)& # 39;, 　　,,,,helperText:, & # 39;请输入你的真实姓名& # 39;, 　　,,,), 　　,,,onchange:, _textFieldChanged, 　　,,,自动对焦:,假的, 　　,,), 　　　　　　,void _textFieldChanged (String str), { 　　打印才能(str); 　　以前,}

我们增加一个keyboardType属性,把keyboardType设置为TextInputType。数

可以看到每次我们让TextField获得焦点的时候弹出的键盘就变成了数字优先了。

然后我们为输入框做一些其他的效果,如提示文字,图标,标签文字等。

我们给上面的代码新增装饰属性,设置相关属性,可以发现当我们的TextField获得焦点时,图标会自动变色,提示文字会自动上移。

如何在颤振中使用文本框输入框组件

还可以看到我加了一个<代码> onchange>

<代码> onchange> onsubmit>

每当用户改变输入框内的文字,都会在控制台输出现在的字符串。与<代码> onsubmit>

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

/* 　　,* Created by 李卓原,提醒2018/9/7。　　*大敌;电子邮件:zhuoyuan93@gmail.com 　　,* 　　,*/import & # 39;包:颤振/cupertino.dart& # 39;; 　　import & # 39;包:颤振/material.dart& # 39;; 　　　　class TextFieldAndCheckPage extends StatefulWidget { 　　,@override 　　,State createState(),=祝辞,TextFieldAndCheckPageState (); 　　} 　　　　class TextFieldAndCheckPageState extends State< TextFieldAndCheckPage>, { 　　,//手机号的控制器　　,TextEditingController phoneController =, TextEditingController (); 　　　　,//密码的控制器　　,TextEditingController passController =, TextEditingController (); 　　　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　return 才能;支架( 　　,,,appBar: appBar ( 　　,,,标题:,文本(& # 39;输入和选择& # 39;), 　　,,), 　　,,,身体:列( 　　,,,孩子们:,& lt; Widget> [ 　　,,,,文本域( 　　,,,,,控制器:,phoneController, 　　,,,,,keyboardType:, TextInputType.number, 　　,,,,,装饰:,InputDecoration ( 　　,,,,,,contentPadding:, EdgeInsets.all (10.0), 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null