import 'dart:async'; import 'package:farmer_client/components/UI/DefaultButton.dart'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class MyRouteLogin extends StatefulWidget { @override State createState() => _RouteLogin(); } class _RouteLogin extends State { bool isButtonEnable = true; //按钮状态 是否可点击 String buttonText = '发送验证码'; //初始文本 int count = 5; //初始倒计时时间 var timer; //倒计时的计时器 TextEditingController mController = TextEditingController(); void _buttonClickListen() { print('获取验证码按钮'); setState(() { if (isButtonEnable) { //当按钮可点击时 isButtonEnable = false; //按钮状态标记 _initTimer(); return null; //返回null按钮禁止点击 } else { //当按钮不可点击时 // debugPrint('false'); return null; //返回null按钮禁止点击 } }); } void _initTimer() { timer = new Timer.periodic(Duration(seconds: 1), (Timer timer) { count--; setState(() { if (count == 0) { timer.cancel(); //倒计时结束取消定时器 isButtonEnable = true; //按钮可点击 count = 5; //重置时间 buttonText = '发送验证码'; //重置按钮文本 } else { buttonText = '重新发送($count)'; //更新文本内容 } }); }); } @override void dispose() { timer?.cancel(); //销毁计时器 timer = null; mController.dispose(); super.dispose(); } // -------------逻辑分割------------------------------------------- var handlePhones = ''; var handleCodes = ''; void _handlePhone(e) => { setState(() => {handlePhones = e}) }; void _handleCode(e) => { setState(() => {handleCodes = e}) }; var userContent = {'phones': '', 'code': ''}; void phoneUser() => { setState(() { userContent['phones'] = handlePhones; userContent['code'] = handleCodes; }), print('我输入的信息:${userContent},手机号:${userContent['phones']}') }; @override Widget build(BuildContext context) { return Container( width: 12.w, decoration: const BoxDecoration( image: DecorationImage( image: AssetImage("images/icon_login.png"), fit: BoxFit.cover, ), ), child: Scaffold( backgroundColor: Colors.transparent, //把scaffold的背景色改成透明 appBar: AppBar( backgroundColor: Colors.transparent, //把appbar的背景色改成透明 // elevation: 0,//appbar的阴影 title: const Text('登陆'), ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( '您好!', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 50, ), ), Text( '欢迎进入农户端应用!', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 35, ), ), Container( // margin: EdgeInsets.fromLTRB(5,0,0,0), decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 1, color: Color(0xffe5e5e5)))), child: Flex( direction: Axis.horizontal, children: [ Expanded( child: TextField( autofocus: true, maxLength: 11, keyboardType: TextInputType.number, cursorColor: Color(0xD4D4D4FF), decoration: const InputDecoration( contentPadding:EdgeInsets.fromLTRB(30.0, 0, 0, 0), hintText: "请输入手机号", prefixIcon: Icon(Icons.phone_iphone_outlined), counterText: '', border: OutlineInputBorder( borderSide: BorderSide.none), ), onChanged: (e) { _handlePhone(e); // phoneUser(e); }, ), ), Container( width: 100.0, child: SizedBox( child: FlatButton( disabledColor: Colors.grey.withOpacity(0.1), //按钮禁用时的颜色 disabledTextColor: Colors.white, //按钮禁用时的文本颜色 textColor: isButtonEnable ? Colors.white : Colors.black.withOpacity(0.2), //文本颜色 color: isButtonEnable ? Color(0xffff703b) : Colors.grey.withOpacity(0.1), //按钮的颜色 splashColor: isButtonEnable ? Colors.white.withOpacity(0.1) : Colors.transparent, shape: StadiumBorder(side: BorderSide.none), onPressed: () { setState(() { if (isButtonEnable) { _buttonClickListen(); } else { return; } }); }, child: Text( '$buttonText', style: TextStyle( fontSize: 13, ), ), ), ), ), ], )), TextField( keyboardType: TextInputType.number, cursorColor: Color(0xD4D4D4FF), decoration: const InputDecoration( hintText: "请输入验证码", prefixIcon: Icon(Icons.beenhere)), onChanged: (e) { _handleCode(e); }, ), // 登录按钮 Container( child: DefaultButton( margin: EdgeInsets.fromLTRB(0, 30.0, 0, 0), //可选配置,自定义控件中有默认配置 text: "登陆", width: 200.0, height: 50.0, fontSize: 20.0, backColor: Color(0xffff703b), color: Colors.white, onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) { return MyRouteLogin(); }), ); }, ), ) ], )))); } }