191 lines
6.3 KiB
Dart
191 lines
6.3 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:extended_tabs/extended_tabs.dart';
|
|
|
|
class Login extends StatefulWidget {
|
|
@override
|
|
_Login createState() => _Login();
|
|
}
|
|
|
|
class _Login extends State<Login> with TickerProviderStateMixin{
|
|
TabController tabController;
|
|
|
|
//表单状态
|
|
GlobalKey<FormState> _formKey = GlobalKey<FormState>();
|
|
|
|
//用户名输入框控制器，此控制器可以监听用户名输入框操作
|
|
TextEditingController _userNameController = new TextEditingController();
|
|
|
|
//焦点
|
|
FocusNode _focusNodeUserName = new FocusNode();
|
|
FocusNode _focusNodePassWord = new FocusNode();
|
|
|
|
var _password = '';//用户名
|
|
var _username = '';//密码
|
|
var _isShowPwd = false;//是否显示密码
|
|
var _isShowClear = false;//是否显示输入框尾部的清除按钮
|
|
|
|
@override
|
|
void initState() {
|
|
tabController = TabController(length: 2, vsync: this);
|
|
// TODO: implement initState
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: Flex(
|
|
direction: Axis.vertical,
|
|
children: <Widget>[
|
|
Container(
|
|
width: MediaQuery.of(context).size.width,
|
|
height: 250,
|
|
color: Colors.red[500],
|
|
),
|
|
Container(
|
|
color: Colors.red[500],
|
|
child: TabBar(
|
|
indicator: ColorTabIndicator(Colors.red[500]),
|
|
labelColor: Colors.white,
|
|
tabs: [
|
|
Tab(
|
|
child: Text(
|
|
'登录',
|
|
style: TextStyle(
|
|
fontSize: 18
|
|
)
|
|
),
|
|
),
|
|
Tab(
|
|
child: Text(
|
|
'注册',
|
|
style: TextStyle(
|
|
fontSize: 18
|
|
),
|
|
),
|
|
),
|
|
],
|
|
controller: tabController,
|
|
),
|
|
),
|
|
Expanded(
|
|
child: ExtendedTabBarView(
|
|
controller: tabController,
|
|
children: <Widget>[
|
|
Container(
|
|
margin: EdgeInsets.only(left: 20,right: 20),
|
|
decoration: new BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(8)),
|
|
color: Colors.white
|
|
),
|
|
child: Form(
|
|
key: _formKey,
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: <Widget>[
|
|
new TextFormField(
|
|
controller: _userNameController,
|
|
focusNode: _focusNodeUserName,
|
|
//设置键盘类型
|
|
keyboardType: TextInputType.number,
|
|
decoration: InputDecoration(
|
|
labelText: "手机号",
|
|
hintText: "请输入手机号",
|
|
prefixIcon: Icon(Icons.local_phone),
|
|
//尾部添加清除按钮
|
|
suffixIcon:(_isShowClear)
|
|
? IconButton(
|
|
icon: Icon(Icons.clear),
|
|
onPressed: (){
|
|
// 清空输入框内容
|
|
_userNameController.clear();
|
|
},
|
|
)
|
|
: null ,
|
|
),
|
|
//验证用户名
|
|
validator: validateUserName,
|
|
//保存数据
|
|
onSaved: (String value){
|
|
_username = value;
|
|
},
|
|
),
|
|
new TextFormField(
|
|
controller: _userNameController,
|
|
focusNode: _focusNodeUserName,
|
|
//设置键盘类型
|
|
keyboardType: TextInputType.visiblePassword,
|
|
decoration: InputDecoration(
|
|
labelText: "密码",
|
|
hintText: "请输入密码",
|
|
prefixIcon: Icon(Icons.lock),
|
|
//尾部添加清除按钮
|
|
suffixIcon:(_isShowClear)
|
|
? IconButton(
|
|
icon: Icon(Icons.clear),
|
|
onPressed: (){
|
|
// 清空输入框内容
|
|
_userNameController.clear();
|
|
},
|
|
)
|
|
: null ,
|
|
),
|
|
//验证用户名
|
|
validator: validateUserName,
|
|
//保存数据
|
|
onSaved: (String value){
|
|
_username = value;
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
Container()
|
|
],
|
|
)
|
|
)
|
|
],
|
|
),
|
|
// body: Stack(
|
|
// children: <Widget>[
|
|
// Container(
|
|
// width: MediaQuery.of(context).size.width,
|
|
// height: 250,
|
|
// color: Colors.red[500],
|
|
// ),
|
|
// Positioned(
|
|
//
|
|
// child: Text('测试'),
|
|
// )
|
|
// ],
|
|
// ),
|
|
// body: Container(
|
|
// width: MediaQuery.of(context).size.width,
|
|
// height: 250,
|
|
// color: Colors.red[500],
|
|
// child: Row(
|
|
// children: <Widget>[
|
|
//
|
|
// ],
|
|
// ),
|
|
// ),
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 验证用户名
|
|
*/
|
|
String validateUserName(value){
|
|
// 正则匹配手机号
|
|
RegExp exp = RegExp(r'^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$');
|
|
if (value.isEmpty) {
|
|
return '用户名不能为空!';
|
|
}else if (!exp.hasMatch(value)) {
|
|
return '请输入正确手机号';
|
|
}
|
|
return null;
|
|
}
|
|
|
|
|
|
} |