project_telephony/lib/ui/login/login_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:project_telephony/ui/widget/plone_back_button.dart';
import 'package:project_telephony/utils/headers.dart';

import '../../base/base_style.dart';
import '../tab_navigator.dart';
import '../widget/image_scaffold.dart';
import '../widget/plone_bottom.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // String _operator="";
  // String _phone="";
  // bool _chooseAgreement = false;
  // bool _getCodeEnable = true;
  // late Timer _timer;
  //
  // ///时钟
  // String _countDownStr = "发送验证码";
  //
  // ///初始化文本
  // int _countDownNum = 59;

  ///时间倒计数值
  late final TextEditingController _phoneController =
      TextEditingController(text: "");
  late final TextEditingController _smsCodeController =
      TextEditingController(text: "");

  // // late FocusNode _smsCodeFocusNode=FocusNode (canRequestFocus: );
  // bool _cantSelected = false;
  @override
  void initState() {
    super.initState();
    // _operator = '中国移动认证';
    // _phone = '12345678909';
  }

  String ploneText = "";
  @override
  Widget build(BuildContext context) {
    return CloudScaffold(
      systemStyle: const SystemUiOverlayStyle(
        statusBarIconBrightness: Brightness.dark,
      ),
      path: Assets.images.bg.path,
      appbar: Row(
        children: [
          Padding(
            padding: EdgeInsets.only(top: 88.w, left: 8.w),
            child: const CloudBackButton(isSpecial: true),
          ),
          Padding(
              padding: EdgeInsets.only(left: 186.w, top: 88.w),
              child: Text(
                "登录/注册",
                style: TextStyle(
                    fontSize: BaseStyle.fontSize34,
                    color: BaseStyle.color333333,
                    fontWeight: FontWeight.bold),
              ))
        ],
      ),
      extendBody: true,
      body: Container(
        padding: EdgeInsets.only(left: 64.w, right: 64.w, top: 124.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "短信帮手",
              style: TextStyle(
                  fontSize: 64.sp,
                  fontWeight: FontWeight.bold,
                  color: Colors.black),
            ),
            32.hb,
            Text(
              "希望能成为您的短信小助手",
              style: TextStyle(fontSize: 32.sp, color: const Color(0xFF999999)),
            ),
            80.hb,
            _getBox('+86', 36, "请输入手机号", 11),
            _getBox('验证码', 32, "请输入验证码", 6),
            112.hb,
            PloneBottom(
              blM: false,
              border: ploneText.length != 11,
              opacity: ploneText.length == 11 ? 1 : 0.4,
              onTap: () {
                Get.to(() => const TabNavigator());
              },
              text: "立即登录",
            ),
            32.hb,
            _getText()
          ],
        ),
      ),
    );
  }

  _getBox(String text, int fontSize, String hit, int num) {
    return Container(
      height: 144.w,
      width: double.infinity,
      padding: EdgeInsets.symmetric(vertical: 48.w),
      decoration: BoxDecoration(
        // color: Colors.black12,
        border: Border(
          bottom: BorderSide(color: const Color(0xFFE8E8E8), width: 1.w),
        ),
      ),
      child: Row(children: [
        SizedBox(
          width: 112.w,
          child: Text(
            text,
            style: TextStyle(
                fontSize: fontSize.sp,
                color: BaseStyle.color333333,
                fontWeight: FontWeight.bold),
          ),
        ),
        Container(
          width: 2.w,
          height: 48.w,
          margin: EdgeInsets.symmetric(horizontal: 32.w),
          color: const Color(0xFFE8E8E8),
        ),
        _phoneTFWidget(hit, num),
      ]),
    );
  }
//  输入手机号

  _phoneTFWidget(String hit, int num) {
    return SizedBox(
      // alignment: Alignment.centerLeft,
      // padding: EdgeInsets.symmetric(horizontal: 72.w),
      width: 300.w,
      height: 50.w,
      child: TextField(
        maxLength: num,
        inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'[0-9]'))],
        textCapitalization: TextCapitalization.none,
        onChanged: (text) {
          ploneText = text;
          setState(() {});
        },
        decoration: InputDecoration(
          contentPadding: EdgeInsets.only(bottom: 20.w),
          border: InputBorder.none,
          counterText: "",
          //textfield占位语，类似于iOS中的placeholder
          hintText: hit,
          //占位语颜色
          hintStyle: TextStyle(color: Colors.black12),
        ),
      ),
    );
  }

//  输入验证码
  _codeWidget() {
    return SizedBox(
      width: 300.w,
      height: 50.w,
      child: TextField(
          onChanged: (String phone) {
            setState(() {});
          },
          controller: _smsCodeController,
          // focusNode: _smsCodeFocusNode,
          keyboardType: TextInputType.number,
          style: TextStyle(fontSize: 36.sp, color: BaseStyle.color999999),
          inputFormatters: [
            LengthLimitingTextInputFormatter(4),
          ],
          cursorColor: Colors.black,
          decoration: InputDecoration(
            // prefixIcon: Container(
            //   width: 10.w,
            //   alignment: Alignment.centerLeft,
            //   child: Text(
            //     "验证码",
            //     style: TextStyle(
            //         fontSize: 32.sp,
            //         color: const Color(0xFF000000)),
            //   ),
            // ),
            prefixText: "验证码",
            prefixStyle: const TextStyle(
              color: Colors.black,
            ),
            enabledBorder: const UnderlineInputBorder(
              // 不是焦点的时候颜色
              borderSide: BorderSide(
                color: BaseStyle.color999999,
              ),
            ),
            hintText: "请输入验证码",
            hintStyle: TextStyle(color: BaseStyle.colorcccccc, fontSize: 36.sp),
          )),
    );
  }

// //  倒计时
//   _beginCountDown() {
//     ///开始倒计时
//     setState(() {
//       _getCodeEnable = false;
//       _countDownStr = "重新获取($_countDownNum)";
//     });
//     _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
//       if (!mounted) {
//         return;
//       }
//       setState(() {
//         if (_countDownNum == 0) {
//           _countDownNum = 59;
//           _countDownStr = "获取验证码";
//           _getCodeEnable = true;
//           _timer.cancel();
//           return;
//         }
//         _countDownStr = "重新获取(${_countDownNum--})";
//       });
//     });
//   }

//  协议
  _recognizer(context, int type) {
    final TapGestureRecognizer recognizer = TapGestureRecognizer();
    recognizer.onTap = () {
      if (kDebugMode) {
        print("点击协议了");
      }

      ///跳转到用户协议页面
    };
    return recognizer;
  }

  _getText() {
    return GestureDetector(
      onTap: () {
        // _chooseAgreement = !_chooseAgreement;
        setState(() {});
      },
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
              width: 50.w,
              height: 50.w,
              padding: EdgeInsets.only(top: 6.w, right: 5.w),
              child: const Icon(CupertinoIcons.circle,
                  size: 18, color: Color(0xFFdddddd))),
          // !_chooseAgreement
          //     ? const Icon(CupertinoIcons.circle,
          //         size: 18, color: Color(0xFFdddddd))
          //     : const Icon(CupertinoIcons.checkmark_circle,
          //         size: 18, color: Colors.red)),
          RichText(
              text: TextSpan(
                  text: "我已阅读并同意",
                  style: TextStyle(
                      color: BaseStyle.colorcccccc, fontSize: 12 * 2.sp),
                  children: [
                TextSpan(
                    text: '《用户服务协议》',
                    style: TextStyle(color: kPrimaryColor, fontSize: 12 * 2.sp),
                    recognizer: _recognizer(context, 2)),
                TextSpan(
                  text: "和",
                  style: TextStyle(
                      color: BaseStyle.colorcccccc, fontSize: 12 * 2.sp),
                ),
                TextSpan(
                    text: '《隐私协议》',
                    style: TextStyle(color: kPrimaryColor, fontSize: 12 * 2.sp),
                    recognizer: _recognizer(context, 1)),
              ])),
        ],
      ),
    );
  }
}