Flutter仿Boss-3.登录页

news/2024/6/15 16:25:07/文章来源:https://blog.csdn.net/u014741977/article/details/137271681

效果

介绍

在Flutter应用程序中创建登录页面对于用户认证和参与至关重要。登录页面作为用户访问应用程序功能的入口。它应该提供无缝的体验,同时确保安全和隐私。这里仿Boss应用设计的登录页面,我们将创建一个登录页面,允许用户使用手机号码登录或注册。

小插曲

首先,让我们设置Flutter项目并创建一个登录页面组件。我们将使用GetX进行状态管理和UI更新。确保您在开发环境中安装了Flutter和GetX。

实现

1. 依赖项

确保您在pubspec.yaml文件中具有必要的依赖项:

dependencies:flutter:sdk: flutterget: ^4.6.2
2. 登录页小部件

创建一个名为login_page.dart的新文件,并定义LoginPage小部件。此小部件将包含登录页面的UI元素:

// login_page.dart
class LoginPage extends StatelessWidget {const LoginPage({Key? key}) : super(key: key);Widget build(BuildContext context) {final logic = Get.find<LoginLogic>();return Scaffold(body: Container(padding: EdgeInsets.fromLTRB(24.w, 60.w, 24.w, 24.w),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Text("手机号登录/注册",style: TextStyle(fontWeight: FontWeight.w500,fontSize: 30.sp,color: RC.text1Color,),),SizedBox(height: 6.w),Text("首次验证通过即注册BOSS直聘账号",style: TextStyle(fontWeight: FontWeight.w500,fontSize: 14.sp,color: RC.text2Color,),),SizedBox(height: 10.w),Row(children: [Text("+86",style: TextStyle(fontSize: 16.sp,color: Colors.black,),),Icon(Icons.keyboard_arrow_down,size: 25.w,color: Colors.black.withAlpha(70),),Expanded(child: TextField(controller: logic.controller,keyboardType: TextInputType.phone,inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),],style: TextStyle(color: Colors.black, fontSize: 18.sp),onChanged: (value) {logic.state.phoneNum.value = value;},decoration: InputDecoration(hintText: '请输入您的手机号码',// 设置 hintTexthintStyle: TextStyle(color: Colors.grey, fontSize: 18.sp),// 设置 hintText 的颜色border: InputBorder.none,// 取消底部下划线enabledBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent), // 取消输入框选中时的边框颜色),focusedBorder: const OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent), // 取消输入框获取焦点时的边框颜色),),),),],),Divider(height: 1.w,color: Colors.grey,),SizedBox(height: 16.w),Obx(() => InkWell(onTap: () {logic.state.isAgree.value = !logic.state.isAgree.value;},child: Row(crossAxisAlignment: CrossAxisAlignment.start,children: [Padding(padding: const EdgeInsets.only(top: 5),child: Icon(logic.state.isAgree.value? Icons.check_circle: Icons.circle_outlined,size: 18.r,color: logic.state.isAgree.value? RC.themeColor: Colors.grey,),),SizedBox(width: 5.w),Expanded(child:RichText(text: TextSpan(text: '已阅读并同意',style: const TextStyle(color: Colors.black, fontSize: 16),children: [TextSpan(text: '《BOSS直聘用户协议》',style: const TextStyle(color: RC.themeColor),recognizer: TapGestureRecognizer()..onTap = () {ToastUtil.show(msg: "跳转到BOSS直聘用户协议");},),const TextSpan(text: ' 和 ',style:TextStyle(color: Colors.black, fontSize: 16),),TextSpan(text: '《隐私政策》',style: const TextStyle(color: RC.themeColor),recognizer: TapGestureRecognizer()..onTap = () {ToastUtil.show(msg: "跳转到隐私政策");},),const TextSpan(text: ',允许BOSS直聘统一管理本人账号信息',style:TextStyle(color: Colors.black, fontSize: 16),),],),),),],),),),Obx(() => InkWell(onTap: () {logic.next(context);},child: Container(height: 50.w,alignment: Alignment.center,margin: EdgeInsets.only(top: 20.w, bottom: 30.w),decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(8.r)),color: logic.state.phoneNum.isNotEmpty? RC.themeColor: RC.themeColor.withAlpha(50)),child: Text("下一步",style: TextStyle(fontSize: 20.sp,fontWeight: FontWeight.w600,color: Colors.white,),),),),),Text("接受不到短信",style: TextStyle(fontSize: 14.sp,color: Colors.grey,),),Expanded(child: Align(alignment: Alignment.bottomCenter,child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.end,children: [Text("或通过以下方式登录",style: TextStyle(fontSize: 14.sp,color: Colors.grey,),),SizedBox(height: 20.w),InkWell(onTap: () {logic.wxLogin();},child: Image.asset(R.login_wx_png,width: 50.w,height: 50.w,),),SizedBox(height: 35.w),Text("服务热线 举报监督电话 资质证照",style: TextStyle(fontSize: 14.sp,color: Colors.grey,),),],),),),],),),);}
}
3. 登录页逻辑

为登录页面创建一个逻辑类,用于处理业务逻辑和状态管理。定义处理用户输入和交互的方法:

// logic.dartimport 'package:flutter/material.dart';
import 'package:get/get.dart';import 'util/toast_util.dart';class LoginLogic extends GetxController {final LoginState state = LoginState();final TextEditingController controller = TextEditingController();void wxLogin() {ToastUtil.show(msg: '微信登录');}void next(BuildContext context) {if (!state.isAgree.value) {showDialog(context: context,builder: (BuildContext context) {return AlertDialog(content: RichText(text: TextSpan(text: '请阅读并同意',style: const TextStyle(color: Colors.black, fontSize: 16),children: [TextSpan(text: '《BOSS直聘用户协议》',style: const TextStyle(color: RC.themeColor),recognizer: TapGestureRecognizer()..onTap = () {ToastUtil.show(msg: "跳转到BOSS直聘用户协议");},),const TextSpan(text: ' 和 ',style: TextStyle(color: Colors.black, fontSize: 16),),TextSpan(text: '《隐私政策》',style: const TextStyle(color: RC.themeColor),recognizer: TapGestureRecognizer()..onTap = () {ToastUtil.show(msg: "跳转到隐私政策");},),const TextSpan(text: ',允许BOSS直聘统一管理本人账号信息',style: TextStyle(color: Colors.black, fontSize: 16),),],),),actions: <Widget>[TextButton(onPressed: () {Navigator.of(context).pop();},child: const Text('拒绝',style: TextStyle(fontSize: 16,color: RC.themeColor,),),),TextButton(onPressed: () {state.isAgree.value = true;Navigator.of(context).pop();},child: const Text('同意',style: TextStyle(fontSize: 16,color: RC.themeColor,),),),],);},);return;}ToastUtil.show(msg: '下一步');}
}class LoginState {RxString phoneNum = "".obs;RxBool isAgree = false.obs;
}
4. 主程序入口

在您的主文件中,将登录页面添加到应用程序的路由中:

// main.dartimport 'package:flutter/material.dart';
import 'package:get/get.dart';import 'login_page.dart';
import 'logic.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return GetMaterialApp(home: LoginPage(),initialBinding: BindingsBuilder(() {Get.lazyPut<LoginLogic>(() => LoginLogic());}),);}
}

结论

通过以上步骤,我们已经完成了Boss登录页面的UI效果。
详情可见:https://github.com/yixiaolunhui/flutter_project

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1034509.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第21章-直连路由和静态路由

1. 直连路由 1)定义:指路由器接口直接相连的网段的路由; 2)特点: ① 不需要特别的配置,双UP(物理层+数据链路层); ② 在路由器的接口上配置IP地址即可; ③ 开机自动产生; 2. VLAN间路由 1)需求: 交换机划vlan隔离广播域,在二层无法通信,但三层要实现不同vlan之前…

吴恩达机器学习笔记:第 6 周-11机器学习系统的设计(Machine Learning System Design)11.1-11.2

目录 第 6 周 11、 机器学习系统的设计(Machine Learning System Design)11.1 首先要做什么11.2 误差分析11.3 类偏斜的误差度量 第 6 周 11、 机器学习系统的设计(Machine Learning System Design) 11.1 首先要做什么 在接下来的视频中&#xff0c;我将谈到机器学习系统的设…

【Algorithms 4】算法(第4版)学习笔记 23 - 5.4 正则表达式

文章目录 前言参考目录学习笔记1&#xff1a;正则表达式1.1&#xff1a;表示1.2&#xff1a;快捷表示2&#xff1a;正则表达式与非确定有限状态自动机 REs and NFAs2.1&#xff1a;二元性2.2&#xff1a;模式匹配实现2.3&#xff1a;非确定有限状态自动机 Nondeterministic fin…

python课后习题二

题目&#xff1a; 1. 2. 解题过程&#xff1a; 1. # 有序吗&#xff1f; ls input("请输入一个列表&#xff08;空格隔开&#xff09;&#xff1a;").split() ls_list list(ls) ls_listnew sorted(ls_list) if ls_listnew ls_list:print("列表已排序&quo…

Autodesk Maya 2025---智能建模与动画创新,重塑创意工作流程

Autodesk Maya 2025是一款顶尖的三维动画软件&#xff0c;广泛应用于影视广告、角色动画、电影特技等领域。新版本在功能上进行了全面升级&#xff0c;新增了对Apple芯片的支持&#xff0c;建模、绑定和角色动画等方面的功能也更加出色。 在功能特色方面&#xff0c;Maya 2025…

【AI数字人】根据音频生成带动画的数字人

这是一个从音频和蒙面手势生成全身人体手势的框架,包括面部、局部身体、手和整体动作。为了实现这一目标,我们首先引入 BEATX (BEAT-SMPLXFLAME),一个新的网格级整体协同语音数据集。 BEATX 将 MoShed SMPLX 身体与 FLAME 头部参数相结合,进一步细化头部、颈部和手指运动的…

DolphinScheduler on k8s 云原生部署实践

文章目录 前言利用Kubernetes技术云原生平台初始化迁移基于Argo CD添加GitOpsDolphinScheduler 在 k8s 上的服务自愈可观测性集成服务网格云原生工作流调度从HDFS升级到S3文件技术总结 前言 DolphinScheduler 的高效云原生部署模式&#xff0c;比原始部署模式节省了95%以上的人…

谷粒商城实战(008 缓存)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第151p-第p157的内容 简介 数据库承担落盘&#xff08;持久化&#xff09;工作 拿map做缓存 这种是本地缓存&#xff0c;会有一些问题 分布…

VMware虚拟机共享主机v2rayN

目录 &#x1f33c;前言 &#x1f33c;解释 &#x1f6a9;操作 1&#xff09;VMware -- 虚拟网络编辑器 2&#xff09;VMware -- 网络适配器 3&#xff09;主机 IP 地址 4&#xff09;v2rayN 代理端口 5&#xff09;VMware -- 网络代理(Network proxy) &#x1f382;结…

【面试八股总结】传输控制协议TCP(三)

参考资料 &#xff1a;小林Coding、阿秀、代码随想录 一、TCP拥塞控制⭐ 1. 慢启动 – Slow Start 慢启动是指TCP连接刚建立&#xff0c;一点一点地提速&#xff0c;试探一下网络的承受能力&#xff0c;以免直接扰乱了网络通道的秩序。 慢启动算法&#xff1a; 初始拥塞窗口…

探索设计模式的魅力:AI大模型如何赋能C/S模式,开创服务新纪元

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 AI大模型如何赋能C/S模式&#xff0c;开创服务新纪元 数字化飞速发展的时代&#xff0c;AI大模型…

提升常州小程序软件开发的搜索排名:关键步骤解析

在移动互联网的浪潮中&#xff0c;小程序作为连接用户与服务的桥梁&#xff0c;其重要性日益凸显。对于常州的小程序软件开发企业来说&#xff0c;如何让自己的产品在浩如烟海的互联网信息中脱颖而出&#xff0c;提升搜索排名&#xff0c;成为了亟待解决的问题。本文将为您解析…

C++面向对象程序设计 - 访问对象中成员的3种方法

在C程序中访问对象的成员变量和成员函数&#xff0c;有三种方法&#xff1a; 通过对象名和成员运算符访问对象中的成员&#xff1b;通过指向对象的指针访问对象中的成员&#xff1b;通过对象的引用变量访问对象中的成员 在了解访问对象中成员的3种方法前&#xff0c;先了解下C…

稀碎从零算法笔记Day37-LeetCode:所有可能的真二叉树

今天的每日一题&#xff0c;感觉理解的还不够深&#xff0c;有待加深理解 题型&#xff1a;树、分治、递归 链接&#xff1a;894. 所有可能的真二叉树 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 给你一个整数 n &#xff0c;请你找出所有…

第五篇:3.4 用户归因和受众(User attribution and audience) - IAB/MRC及《增强现实广告效果测量指南1.0》

翻译计划 第一篇概述—IAB与MRC及《增强现实广告效果测量指南》之目录、适用范围及术语第二篇广告效果测量定义和其他矩阵之- 3.1 广告印象&#xff08;AD Impression&#xff09;第三篇广告效果测量定义和其他矩阵之- 3.2 可见性 &#xff08;Viewability&#xff09;第四篇广…

解析Flutter应用在iOS环境中的性能优化技巧

本文探讨了使用Flutter开发的iOS应用能否上架&#xff0c;以及上架的具体流程。苹果提供了App Store作为正式上架渠道&#xff0c;同时也有TestFlight供开发者进行内测。合规并通过审核后&#xff0c;Flutter应用可以顺利上架。但上架过程可能存在一些挑战&#xff0c;因此可能…

STM32-03基于HAL库(CubeMX+MDK+Proteus)输入检测案例(按键控制LED)

文章目录 一、功能需求分析二、Proteus绘制电路原理图三、STMCubeMX 配置引脚及模式&#xff0c;生成代码四、MDK打开生成项目&#xff0c;编写HAL库的按键检测代码五、运行仿真程序&#xff0c;调试代码 一、功能需求分析 搭建完成开发STM32开发环境之后&#xff0c;开始GPIO…

【嵌入式硬件】光耦

1.光耦作用 光耦一般用于信号的隔离。当两个电路的电源参考点不相关时,使用光耦可以保证在两边不共地的情况下,完成信号的传输。 2.光耦原理 光耦的原理图如下所示,其内部可以看做一个特殊的“三极管”; 一般的三极管是通过基极B和发射极E间的电流,去控制集电极C和发射极…

01 Python进阶:正则表达式

re.match函数 使用 Python 中的 re 模块时&#xff0c;可以通过 re.match() 函数来尝试从字符串的开头匹配一个模式。以下是一个简单的详解和举例&#xff1a; import re# 定义一个正则表达式模式 pattern r^[a-z] # 匹配开头的小写字母序列# 要匹配的字符串 text "h…

牛客2024年愚人节比赛(A-K)

比赛链接 毕竟是娱乐场&#xff0c;放平心态打吧。。。 只有A一个考了数学期望&#xff0c;其他的基本都是acmer特有的脑筋急转弯&#xff0c;看个乐呵即可。 A 我是欧皇&#xff0c;赚到盆满钵满&#xff01; 思路&#xff1a; 我们有 p 1 p_1 p1​ 的概率直接拿到一件实…