edittext限制输入类型 edittext限制输入长度并且显示

技术刚刚好经历近几年,移动端跨平台开发技术层出不穷,从Facebook家的ReactNative,到阿里家WEEX,前端技术在移动端跨平台开发中大展身手,技术刚刚好作为一名Android开发,经历了从Reactjs到Vuejs的不断学习 。而在2018年,我们的主角变成了Flutter,这是Goolge开源的一个移动端跨平台解决方案,可以快速开发精美的移动App 。希望跟大家一起学习,一起进步!
本文核心要点顾名思义文本输入框,类似于iOS中的UITextField和Android中的EditText和Web中的TextInput 。主要是为用户提供输入文本提供方便 。相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下Flutter中TextField的用法 。

edittext限制输入类型 edittext限制输入长度并且显示


TextField
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,})main.dat文件import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: MyEditText(),));}class MyEditText extends StatefulWidget {@overrideMyEditTextState createState() => MyEditTextState();}class MyEditTextState extends State<MyEditText> {String results = "";final TextEditingController controller = TextEditingController();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Using EditText"),backgroundColor: Colors.red,),body: Container(padding: const EdgeInsets.all(10.0),child: Center(child: Column(crossAxisAlignment: CrossAxisAlignment.stretch,children: <Widget>[TextField(decoration: InputDecoration(hintText: "Enter text here..."),onSubmitted: (String str) {setState(() {results = results + "n" + str;controller.text = "";});},controller: controller,),Text(results)],),),),);}}总结【edittext限制输入类型 edittext限制输入长度并且显示】这篇文章主要介绍了flutter当中TextField控件介绍 。

    推荐阅读