ElectronicAssistant/lib/module/login/view.dart

import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/resource/assets.gen.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:electronic_assistant/widget/login_code_btn.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'controller.dart';

class LoginPage extends BasePage<LoginController> {
  const LoginPage({super.key});

  @override
  bool immersive() {
    return true;
  }

  // 点击空白处收起键盘
  @override
  void backgroundOnTapEvent() {
    super.backgroundOnTapEvent();
    FocusScope.of(Get.context!).requestFocus(FocusNode());
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        _buildBackgroundImage(),
        Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            leading: IconButton(
              icon: const Icon(Icons.arrow_back_ios),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            backgroundColor: Colors.transparent,
            systemOverlayStyle: SystemUiOverlayStyle.dark,
          ),
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.only(left: 28.w, top: 64.h),
                width: 194.w,
                height: 71.h,
                child: Image(image: Assets.images.iconLoginLogo.provider()),
              ),
              _buildPhoneTextField(),
              _buildCodeTextField(),
              _buildLoginBtn(),
              _buildAgreeText(),
            ],
          ),
        ),
      ],
    );
    // return Scaffold(
    //   body: Column(
    //     children: <Widget>[
    //       TextField(
    //         onChanged: (text) {
    //           controller.setPhone(text);
    //         },
    //         decoration: const InputDecoration(
    //             labelText: "手机号",
    //             hintText: "您的手机号",
    //             prefixIcon: Icon(Icons.person)),
    //       ),
    //       TextField(
    //         onChanged: (text) {
    //           controller.setCode(text);
    //         },
    //         decoration: const InputDecoration(
    //             labelText: "验证码",
    //             hintText: "您的验证码",
    //             prefixIcon: Icon(Icons.lock)),
    //       ),
    //       ElevatedButton(
    //         child: const Text("获取验证码"),
    //         onPressed: () {
    //           controller.getUserCode();
    //         },
    //       ),
    //       ElevatedButton(
    //         child: const Text("登录"),
    //         onPressed: () {
    //           controller.login();
    //         },
    //       )
    //     ],
    //   ),
    // );
  }

  // 背景图片
  Widget _buildBackgroundImage() {
    return Image(image: Assets.images.bgLogin.provider());
  }

  // 电话号码输入框
  Widget _buildPhoneTextField() {
    return Container(
      margin: EdgeInsets.only(top: 44.h, left: 28.w, right: 28.w),
      alignment: Alignment.center,
      height: 44.h,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: 1.0,
            color: "#F0F0F0".toColor(),
          ),
        ),
      ),
      child: TextField(
        maxLines: 1,
        textAlignVertical: TextAlignVertical.center,
        textInputAction: TextInputAction.search,
        decoration: InputDecoration(
          hintText: '输入手机号码',
          hintStyle: TextStyle(fontSize: 16, color: "#AFAFAF".toColor()),
          labelStyle: const TextStyle(
            fontSize: 16,
            color: ColorName.primaryTextColor,
          ),
          contentPadding: const EdgeInsets.all(0),
          border: const OutlineInputBorder(borderSide: BorderSide.none),
          enabled: true,
        ),
        style: TextStyle(fontSize: 14.sp),
        onChanged: (value) {
          controller.setPhone(value);
        },
      ),
    );
  }

  // 验证码输入框
  Widget _buildCodeTextField() {
    return Container(
      margin: EdgeInsets.only(top: 36.h, left: 28.w, right: 28.w),
      alignment: Alignment.center,
      height: 44.h,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: 1.0,
            color: "#F0F0F0".toColor(),
          ),
        ),
      ),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              maxLines: 1,
              textAlignVertical: TextAlignVertical.center,
              textInputAction: TextInputAction.search,
              decoration: InputDecoration(
                hintText: '输入验证码',
                hintStyle: TextStyle(fontSize: 16, color: "#AFAFAF".toColor()),
                labelStyle: const TextStyle(
                  fontSize: 16,
                  color: ColorName.primaryTextColor,
                ),
                contentPadding: const EdgeInsets.all(0),
                border: const OutlineInputBorder(borderSide: BorderSide.none),
                enabled: true,
              ),
              style: TextStyle(fontSize: 14.sp),
              onChanged: (value) {
                controller.setCode(value);
              },
            ),
          ),
          LoginCodeBtn(
            onTapCallback: () {
              controller.getUserCode();
            },
            available: true,
          ),
        ],
      ),
    );
  }

  // 登录按钮
  Widget _buildLoginBtn() {
    return GestureDetector(
      onTap: () {
        controller.login();
      },
      child: Container(
        margin: EdgeInsets.only(
          top: 54.h,
          left: 28.w,
          right: 28.w,
        ),
        height: 48.h,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: ['#6177F2'.toColor(), '#8B9DFF'.toColor()],
            stops: const [0, 1.0],
          ),
          borderRadius: BorderRadius.circular(8),
        ),
        child: const Text(
          "登录",
          style: TextStyle(
            color: ColorName.white,
            fontSize: 16,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }

  Widget _buildAgreeText() {
    return Container(
      margin: EdgeInsets.only(left: 28.w, top: 16.h),
      child: Row(
        children: [
          Obx(
            () {
              return GestureDetector(
                onTap: () {
                  controller.isAgree.value = !controller.isAgree.value;
                },
                child: SizedBox(
                    width: 20.w,
                    height: 20.w,
                    child: controller.isAgree.value
                        ? Assets.images.iconSelectTrue.image()
                        : Assets.images.iconSelectFalse.image()),
              );
            },
          ),
          Text(
            "我已阅读并同意",
            style: TextStyle(
              color: "#AFAFAF".toColor(),
              fontSize: 12,
            ),
          ),
          GestureDetector(
            onTap: () {},
            child: Text(
              "《隐私政策》",
              style: TextStyle(
                color: "#5E8BFF".toColor(),
                fontSize: 12,
              ),
            ),
          ),
          Text(
            "和",
            style: TextStyle(
              color: "#AFAFAF".toColor(),
              fontSize: 12,
            ),
          ),
          GestureDetector(
            onTap: () {},
            child: Text(
              "《用户使用协议》",
              style: TextStyle(
                color: "#5E8BFF".toColor(),
                fontSize: 12,
              ),
            ),
          ),
        ],
      ),
    );
  }
}