edittext限制输入长度并且显示（edittext限制输入类型）
技术刚刚好经历
近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！
本文核心要点
顾名思义文本输入框，类似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是为用户提供输入文本提供方便。相信大家在原生客户端上都用过这个功能，就不在做具体介绍了，接下来还是具体介绍下Flutter中TextField的用法。
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 {
@override
MyEditTextState createState() => MyEditTextState();
}
class MyEditTextState extends State<MyEditText> {
String results = "";
final TextEditingController controller = TextEditingController();
@override
Widget 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)
],
),
),
),
);
}
}
总结
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyEditText(),
));
}
class MyEditText extends StatefulWidget {
@override
MyEditTextState createState() => MyEditTextState();
}
class MyEditTextState extends State<MyEditText> {
String results = "";
final TextEditingController controller = TextEditingController();
@override
Widget 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)
],
),
),
),
);
}
}这篇文章主要介绍了flutter当中TextField控件介绍。
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 203304862@qq.com
本文链接：https://jinnalai.com/fenxiang/51654.html
