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()),
              ),
              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);
                  },
                ),
              ),
              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,
                    ),
                  ],
                ),
              ),
              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,
                    ),
                  ),
                ),
              ),
              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,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
    // 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 buildBackgroundGradient() {
    return Stack(
      children: [
        Container(
          width: 1.sw,
          height: 1.sh,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                '#FFC0CF'.toColor().withOpacity(0.62),
                '#F6F6F6'.toColor().withOpacity(0)
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: const [0, 1.0],
            ),
          ),
        ),
        Container(
          width: 1.sw,
          height: 1.sh,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                '#CADCFD'.toColor().withOpacity(0.72),
                '#F6F5F8'.toColor().withOpacity(0.72)
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: const [0, 1.0],
            ),
          ),
        ),
        Container(
          width: 1.sw,
          height: 1.sh,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                '#B0BCFF'.toColor(),
                '#FFFFFF'.toColor(),
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: const [0, 1.0],
            ),
          ),
        ),
        Container(
          width: 1.sw,
          height: 1.sh,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                '#7E92FF'.toColor(),
                '#B0BCFF'.toColor(),
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: const [0, 1.0],
            ),
          ),
        ),
      ],
    );
  }
}