Flutter组件-Input-TextField-文本输入框
2019-01-28 12:54
519 查看
防采集标记:亢少军老师的课程和资料
示例代码
//文档地址:https://docs.flutter.io/flutter/material/TextField-class.html import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: '', home: new Scaffold( appBar: new AppBar( title: new Text(''), ), body:LoginPage(), ), ); } } //登录组件 class LoginPage extends StatefulWidget{ @override State<StatefulWidget> createState() => LoginPageState(); } class LoginPageState extends State<LoginPage>{ //文本编辑控制器 TextEditingController usernameController = TextEditingController(); TextEditingController passwordController = TextEditingController(); @override Widget build(BuildContext context) { return Column( children: <Widget>[ TextField( controller: usernameController, //TextCapitalization.words 将每个单词的首字母大写 //TextCapitalization.sentences 将首字母大写 //TextCapitalization.characters 将所有字母大写 textCapitalization: TextCapitalization.characters, //键盘类型 keyboardType: TextInputType.number, decoration: InputDecoration( //内容的内边距 contentPadding: EdgeInsets.all(10.0), icon: Icon(Icons.person), //提示文本 labelText: '请输入你的用户名', helperText: '请输入注册的用户名', ), //键盘插件按钮样式 textInputAction: TextInputAction.go, //设置光标样式 // cursorColor: Colors.green, // cursorRadius: Radius.circular(16.0), // cursorWidth: 16.0, ), TextField( controller: passwordController, keyboardType: TextInputType.number, decoration: InputDecoration( contentPadding: EdgeInsets.all(10.0), icon: Icon(Icons.lock), labelText: '请输入密码', ), obscureText: true, ), RaisedButton( onPressed: (){ loginCheck(); }, child: Text('登录'), ), //decoration示例 // TextField( // //带外边框的样式 // decoration: InputDecoration( // border: OutlineInputBorder(), // hintText: '请输入你的用户名', // labelText: '用户名', // prefixIcon: Icon(Icons.person), // suffixIcon: Icon(Icons.print), // ), // ), ], ); } loginCheck(){ if(usernameController.text.length != 11){ print('请输入正确的手机号'); } if(passwordController.text.length != 6){ print('请输入6位以上的密码'); } } }
Flutter技术入门与实战: http://product.dangdang.com/26485813.html
Flutter交流学习群:894109159
Flutter开源项目请关注: https://github.com/kangshaojun
Flutter视频教程:https://edu.csdn.net/lecturer/2436
相关文章推荐
- JS 仿支付宝input文本输入框放大组件的实例
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- NGUI输入文本Input
- 混合开发的大趋势之一React Native TextInput (文本输入)
- Android Design新控件之TextInputLayout(文本输入布局)
- textfield输入文本长度限制(超出后不能输入)
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- Angular.js组件之input mask对input输入进行格式化详解
- adb input 命令输入文本功能介绍
- 混合开发的大趋势之一React Native TextInput (文本输入)
- EditText 文本输入组件
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- 多个文本输入控件关联ErrorProvider组件的问题
- React(0.13) 定义一个input组件,使其输入的值转为大写
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
- 在html的input文本输入框中,无法正确显示单引号和双引号的问题
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现