每天进步一点。
最近有空的时候,学习一下Flutter,偶尔记录一下学习内容,记录下遇到的问题。
下面是一个简单的表单验证。
import 'package:flutter/material.dart';
class FormRoute extends StatefulWidget {
final String _title;
FormRoute(this._title);
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return FormRouteState();
}
}
class FormRouteState extends State<FormRoute> {
FocusNode focusNode = FocusNode();
FocusNode _uNameNode = FocusNode();
FocusNode _pwdNode = FocusNode();
TextEditingController _uNameController = TextEditingController();
TextEditingController _pwdController = TextEditingController();
GlobalKey _formKey = new GlobalKey<FormState>();
FormRouteState();
@override
Widget build(BuildContext context) {
// TODO: implement build
focusNode.addListener(() {
print(focusNode.hasFocus);
setState(() {});
});
return Scaffold(
appBar: AppBar(
title: Text(widget._title),
),
body: Form(
key: _formKey,
autovalidate: false,
// onWillPop: () {}, 这种话似乎是推出新界面的 ,所以在搞表单的时候,不要瞎写,不然返回键可能用不了
onChanged: () {},
child: Column(children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
child: Text("用户登录"),
),
Container(
child: TextFormField(
controller: _uNameController,
validator: (str) {
return str.trim().length > 0 ? null : "用户名不能为空";
},
focusNode: _uNameNode,
autofocus: true,
decoration: InputDecoration(
labelText: "用户名", hintText: "请输入用户名", prefixIcon: Icon(Icons.person), border: InputBorder.none),
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: _uNameNode.hasFocus ? Colors.red[200] : Colors.grey[300], width: 0.5))),
),
Container(
child: TextFormField(
controller: _pwdController,
focusNode: _pwdNode,
autofocus: false,
obscureText: true,
decoration: InputDecoration(
border: InputBorder.none,
labelText: "密码",
hintText: "请输入用户名",
prefixIcon: Icon(Icons.lock),
),
validator: (str) {
return str.trim().length > 5 ? null : "密码不能小于六位";
},
),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: _pwdNode.hasFocus ? Colors.red[200] : Colors.grey[300], width: 0.5))),
),
Padding(
padding: EdgeInsets.only(top: 20, left: 30, right: 30),
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
onPressed: () {
if ((_formKey.currentState as FormState).validate()) {
print("用户名是:" +_uNameController.text +"密码是:"+_pwdController.text);
}
},
child: Text("登录"),
color: Theme.of(context).primaryColor,
textColor: Colors.white,
),
)
],
),
),
Theme(
data: Theme.of(context).copyWith(
hintColor: Colors.grey[200], //定义下划线的颜色
inputDecorationTheme: InputDecorationTheme(
labelStyle: TextStyle(
color: Colors.grey[500],
), //Label的字体样式,
hintStyle: TextStyle(
color: Colors.grey[300],
), //提示文本的字体样式,
border: InputBorder.none)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[],
),
),
])),
);
}
}
遇到的几个问题:
1:写完表单后,在这个界面按返回键报错
原因:在Form这个widget中,有一个的参数,如果给这个参数传入了一个空的函数,就会报错。上文中的代码中有注释。具体这个参数是干啥用的,目前还不知道。
2:_uNameController.text报错,提示为_uNameController为空。
原因:从Java转过来的毛病。
TextEditingController _uNameController,_pwdController = TextEditingController();
这么写的话,_uNameController好像就没被初始化了。