farmer_client/lib/pages/login/login.dart

import 'dart:async';

import 'package:farmer_client/components/UI/DefaultButton.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../widgets/Cell.dart';

class MyRouteLogin extends StatefulWidget {
  @override
  State<MyRouteLogin> createState() => _RouteLogin();
}

class _RouteLogin extends State<MyRouteLogin> {
  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: <Widget>[
                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: <Widget>[
                //         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,
                //
                //                 ),
                //               ),
                //             ),
                //           ),
                //         ),
                //       ],
                //     )),

                Cell(
                  margin: EdgeInsets.symmetric(horizontal: 13.w),
                  header: Text(
                    "+86",
                    style: TextStyle(fontSize: 19.sp),
                  ),
                  child: TextField(
                      style: TextStyle(
                        fontSize: 17.sp,
                      ),
                      decoration: const InputDecoration(
                        isCollapsed: true,
                        contentPadding:
                            EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                        labelText: "请输入手机号码",
                        border: InputBorder.none,
                        // border: OutlineInputBorder(
                        //   // borderSide: BorderSide.none,
                        //   // gapPadding: 0,
                        // ),
                        floatingLabelBehavior: FloatingLabelBehavior.never,
                      )),
                  footer: ElevatedButton(
                    onPressed: () => {
                      setState(() {
                        if (isButtonEnable) {
                          _buttonClickListen();
                        } else {
                          return;
                        }
                      })
                    },
                    child: Text(
                      '$buttonText',
                      style: TextStyle(fontSize: 15.sp),
                    ),
                    style: ElevatedButton.styleFrom(
                        primary: const Color(0xFFFF703B),
                        elevation: 0,
                        shape: const RoundedRectangleBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(10)))),
                  ),
                ),

                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();
                        }),
                      );
                    },
                  ),
                )
              ],
            ))));
  }
}