Flutter 开源鸿蒙实战城市智慧停车管理系统 Day5 超时提醒弹窗深浅色全局主题登录页面记住登录隐私协议全局UI美化鸿蒙打包配置欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net!-- Schema.org 结构化数据 --scripttypeapplication/ldjson{context:https://schema.org,type:BlogPosting,headline:Flutter开源鸿蒙实战 城市智慧停车管理系统Day5 超时提醒深浅色主题登录页记住登录隐私弹窗UI美化鸿蒙打包,author:{type:Person,name:鸿蒙跨端开发者},publisher:{type:Organization,name:开源鸿蒙技术社区},datePublished:2026-05-09,description:商业级非校园实战项目Day5实现停车超时计费提醒弹窗、全局深浅色一键切换主题、完整登录页面、记住登录本地缓存、首次启动隐私协议弹窗、全局UI精细化美化、鸿蒙打包签名配置完成体验层与上架规范收尾适配鸿蒙手机平板毕设可直接真机演示,keywords:Flutter,开源鸿蒙,OpenHarmony,智慧停车,超时提醒,深浅主题,登录页面,隐私协议,UI美化,鸿蒙打包}/script一、前言哈喽小伙伴们我们继续推进城市智慧停车管理系统实战开发全程面向城市商圈、小区、市政停车场真实商用场景无任何校园同质化内容整套项目业务闭环完整、技术栈硬核、交互体验拉满。快速复盘前4天完整开发进度Day1项目初始化、企业级分层架构、高德地图/定位/权限/缓存等全套第三方库集成、GetX全局状态、底部导航与页面骨架Day2高德地图全屏展示、实时定位、车场点位标注、搜索筛选、车场卡片、全局路由配置完成地图查询底座Day3车场详情页、车位预约、阶梯式停车计费、路线导航、停车实时计时实现预约‑停车‑计费‑导航核心业务Day4停车订单生成、多状态管理、在线缴费、我的订单、会员中心、个人中心与退出登录完成订单与支付商业闭环。来到Day5我们不再新增复杂业务逻辑重点打磨用户体验、系统规范、全局视觉、登录体系、隐私合规、打包部署把项目从“功能完整”升级为“商用级可交付产品”也是毕设真机演示、作品集展示的关键优化环节。本文严格沿用固定写作规范口语化叙事、代码精简5–6行、步骤清晰、鸿蒙全端适配、文末配套4张实景配图格式风格和前序完全统一。今日Day5 核心开发任务逐项落地开发停车超时自动提醒弹窗超时后触发额外计费提示封装全局主题控制器实现浅色/深色模式一键切换配置两套主题样式全页面自动跟随切换搭建完整登录页面账号密码登录登录校验实现记住登录本地缓存自动回填账号密码开发首次启动隐私协议弹窗符合鸿蒙上架合规要求全局UI统一美化按钮、输入框、卡片、间距、圆角标准化配置鸿蒙打包签名生成hap安装包整理Day5高频问题与新手避坑方案。二、版块1停车超时提醒弹窗开发文字讲解真实停车业务中超时未缴费会产生滞纳金我们实现自动判断时长超时后弹出提醒弹窗展示超时时长、额外费用、缴费入口完善风控逻辑。// 控制器超时判断方法voidcheckOverTime(int parkHour){if(parkHour24){double extraFee(parkHour-24)*2;showOverTimeDialog(extraFee);}}voidshowOverTimeDialog(double extraFee){Get.dialog(AlertDialog(title:constText(停车超时提醒),content:Text(已停车超过24小时超时额外费用${extraFee.toStringAsFixed(2)}元),actions:[TextButton(onPressed:()Get.back(),child:constText(稍后处理)),TextButton(onPressed:()Get.toNamed(RoutePath.order),child:constText(立即缴费))]));}三、版块2全局主题控制器封装文字讲解使用GetX做全局主题状态管理一键切换深浅色模式所有页面自动响应式刷新不用逐个页面修改样式。classThemeControllerextendsGetxController{staticThemeControllergettoGet.find();finalRxBoolisDarkModefalse.obs;voidtoggleTheme(){isDarkMode.value!isDarkMode.value;}}四、版块3深浅两套全局主题配置文字讲解在main.dart根据主题控制器动态切换ThemeData浅色采用商务蓝灰深色采用暗夜灰黑全局统一配色规范。ThemeDatagetLightTheme(){returnThemeData(primarySwatch:Colors.blueGrey,scaffoldBackgroundColor:Colors.white,);}ThemeDatagetDarkTheme(){returnThemeData(primarySwatch:Colors.grey,scaffoldBackgroundColor:Color(0xFF121212),);}文字讲解在GetMaterialApp中监听主题状态实现全局动态切换。GetMaterialApp(theme:ThemeController.to.isDarkMode.value?getDarkTheme():getLightTheme(),)五、版块4个人中心添加主题切换开关文字讲解在个人中心页面增加Switch开关绑定主题控制器一键切换深浅模式交互直观流畅。Obx(()SwitchListTile(title:constText(深色模式),value:ThemeController.to.isDarkMode.value,onChanged:(val)ThemeController.to.toggleTheme(),))六、版块5完整登录页面搭建文字讲解从零搭建简约商务风登录页面包含logo、账号输入框、密码输入框、记住我复选框、登录按钮键盘自动避让适配鸿蒙小屏手机。classLoginPageextendsStatelessWidget{LoginPage({super.key});finalTextEditingControlleruserCtrlTextEditingController();finalTextEditingControllerpwdCtrlTextEditingController();finalRxBoolrememberMefalse.obs;overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:buildAppBar(用户登录),body:Padding(padding:EdgeInsets.all(AppStyle.padding),child:Column(children:[buildInput(userCtrl,请输入账号),SizedBox(height:15.h),buildInput(pwdCtrl,请输入密码,obscureText:true),Obx(()CheckboxListTile(title:constText(记住登录),value:rememberMe.value,onChanged:(v)rememberMe.valuev!,)),SizedBox(height:20.h),buildPrimaryBtn(立即登录,()doLogin()),],),),);}}七、版块6记住登录本地缓存实现文字讲解勾选记住我后将账号密码存入SharedPreferences下次打开APP自动回填优化用户登录体验。FuturevoidsaveLoginInfo(Stringuser,Stringpwd)async{finalspawaitSharedPreferences.getInstance();awaitsp.setString(login_user,user);awaitsp.setString(login_pwd,pwd);}FuturevoidgetLoginInfo()async{finalspawaitSharedPreferences.getInstance();userCtrl.textsp.getString(login_user)??;pwdCtrl.textsp.getString(login_pwd)??;}八、版块7登录逻辑权限校验文字讲解简单校验账号密码登录成功存入全局AuthController跳转首页未登录用户禁止进入订单、会员页面结合路由守卫实现权限拦截。voiddoLogin(){if(userCtrl.text.isEmpty||pwdCtrl.text.isEmpty){ToastUtil.show(账号密码不能为空);return;}authCtrl.login(UserModel(name:userCtrl.text,isVip:false));Get.offAllNamed(RoutePath.home);}九、版块8首次启动隐私协议弹窗文字讲解符合鸿蒙应用上架规范首次打开APP弹出隐私政策弹窗同意后永久不再弹出拒绝则退出应用。FuturevoidcheckPrivacyAgree()async{finalspawaitSharedPreferences.getInstance();bool agreesp.getBool(privacy_agree)??false;if(!agree){Get.dialog(privacyDialog());}}WidgetprivacyDialog(){returnAlertDialog(title:constText(用户隐私协议),content:constText(本应用将获取定位、网络权限用于查询附近停车场、导航、停车计费。),actions:[TextButton(onPressed:()exit(0),child:constText(拒绝)),TextButton(onPressed:()async{finalspawaitSharedPreferences.getInstance();awaitsp.setBool(privacy_agree,true);Get.back();},child:constText(同意))]);}十、版块9全局UI精细化统一美化文字讲解统一全局样式主色、圆角、阴影、间距、按钮水波纹、卡片样式、输入框样式全部复用全局常量全APP视觉风格一致毕设观感大幅提升。// 统一按钮水波纹WidgetbuildPrimaryBtn(Stringtext,VoidCallbackonTap){returnElevatedButton(onPressed:onTap,style:ElevatedButton.styleFrom(splashFactory:InkRipple.splashFactory,shape:RoundedRectangleBorder(borderRadius:BorderRadius.circular(AppStyle.radius))),child:Text(text,style:TextStyle(fontSize:15.sp)),);}十一、版块10鸿蒙打包签名配置文字讲解配置鸿蒙签名文件生成hap可安装包真机直接运行演示适配鸿蒙4.0系统满足毕设真机答辩需求。# ohos/module.json5 签名配置signingConfig:{path:./signature/debug.p12,keyAlias:debug,storePassword:123456}十二、版块11Day5 新手高频问题详解问题1深浅色切换部分页面不生效解答页面必须用Obx包裹主题变量统一用ThemeController自定义颜色不要写死硬编码。问题2记住登录重启后数据丢失解答保存key名称必须一致异步方法必须加await不要在同步生命周期直接读取。问题3隐私弹窗每次打开都弹出解答同意后必须写入本地缓存初始化时异步读取不要同步直接判断布尔值。问题4登录页面键盘遮挡输入框解答页面外层包裹SingleChildScrollView全部使用.w/.h适配单位。问题5鸿蒙打包签名失败解答签名路径不能含中文包名、别名、密码一一对应SDK版本匹配。十三、Day5 开发总结今天Day5我们完成体验层合规层部署层全维度优化项目正式达到商用级交付标准实现停车超时提醒弹窗完善超时计费风控逻辑封装全局主题控制器完成深浅色模式一键切换搭建完整登录页面实现记住登录、本地缓存开发隐私协议弹窗满足鸿蒙上架合规要求全局UI精细化统一美化视觉专业度大幅提升配置鸿蒙打包签名支持真机直接安装演示完善登录权限校验结合路由守卫实现权限闭环汇总高频问题提供落地解决方案。至此智慧停车系统已具备地图定位‑车场查询‑车位预约‑计时停车‑阶梯计费‑导航‑订单缴费‑会员体系‑登录权限‑主题切换‑隐私合规‑真机部署全链路能力完全对标真实商用停车APP毕设、面试项目极具竞争力。十四、下期Day6预告Day6将进行全局通用组件深度封装、意见反馈系统设置页面开发、清除缓存功能、代码整体重构优化、修复全部遗留bug、最终项目细节调优。