news 2026/5/5 10:35:04

Flutter for OpenHarmony移动数据使用监管助手App实战 - 套餐管理实现

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Flutter for OpenHarmony移动数据使用监管助手App实战 - 套餐管理实现

套餐管理是流量监控App的核心功能之一，用户在这里设置自己的流量套餐信息，App才能准确计算剩余流量和使用进度。这个页面需要展示套餐使用情况，并提供编辑套餐的入口。

页面结构规划

套餐管理页面分为几个部分：

  • 套餐进度卡片：大号环形进度条展示使用百分比
  • 详情信息卡片：剩余流量、剩余天数、日均可用
  • 提醒状态卡片：根据使用情况显示正常或警告

空状态处理

如果用户还没设置套餐，需要显示引导界面：

Widget_buildNoPlan(){returnCenter(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(Icons.sim_card_outlined,size:80.sp,color:AppTheme.textSecondary),

Center让内容居中显示。
Column垂直排列图标和文字。
sim_card_outlined图标表示套餐。

SizedBox(height:16.h),Text('暂无套餐',style:TextStyle(fontSize:16.sp,color:AppTheme.textSecondary)),SizedBox(height:16.h),ElevatedButton(onPressed:(){},child:constText('添加套餐')),

间距16.h后显示提示文字。
ElevatedButton引导用户添加套餐。
简洁的空状态引导用户操作。

],),);}

闭合Column和Center完成空状态。
空状态页面简洁明了。
一个图标、一句提示、一个按钮。

套餐进度卡片

用大号环形进度条作为页面的视觉中心：

Widget_buildPlanCard(){finalplan=controller.plan.value!;returnContainer(padding:EdgeInsets.all(20.w),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(16.r),),

获取当前套餐数据。
Container作为进度卡片的容器。
白色背景与页面灰色背景对比。

child:Column(children:[CircularPercentIndicator(radius:80.r,lineWidth:12.w,percent:plan.usagePercentage/100,

Column垂直排列进度条和信息。
CircularPercentIndicator是环形进度条组件。
radius设置进度条半径。

center:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Text('${plan.usagePercentage.toStringAsFixed(0)}%',style:TextStyle(fontSize:24.sp,fontWeight:FontWeight.bold),),

center放置进度条中间的内容。
显示使用百分比，不保留小数。
24.sp大字号突出显示。

Text('已使用',style:TextStyle(fontSize:12.sp,color:AppTheme.textSecondary)),],),progressColor:plan.isOverThreshold?AppTheme.warningColor:AppTheme.primaryColor,backgroundColor:Colors.grey.shade200,),

"已使用"标签用12.sp小字号。
超过阈值时进度条变成警告色。
灰色背景作为进度条底色。

SizedBox(height:20.h),Text(plan.name,style:TextStyle(fontSize:18.sp,fontWeight:FontWeight.w600)),SizedBox(height:8.h),Text('${plan.formattedUsed}/${plan.formattedTotal}',style:TextStyle(fontSize:14.sp,color:AppTheme.textSecondary),),

间距20.h后显示套餐名称。
18.sp字号，w600加粗突出名称。
显示已用/总量的格式化字符串。

],),);}

闭合Column和Container完成进度卡片。
环形进度条是页面的视觉焦点。
整体设计直观清晰。

详情信息卡片

展示更多套餐相关的数据：

Widget_buildDetailsCard(){finalplan=controller.plan.value!;returnContainer(padding:EdgeInsets.all(16.w),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(12.r),),

获取当前套餐数据。
Container作为详情卡片的容器。
白色背景与页面灰色背景对比。

child:Column(children:[_buildDetailRow('剩余流量',plan.formattedRemaining),constDivider(),_buildDetailRow('剩余天数','${plan.daysRemaining}天'),

Column垂直排列各详情项。
_buildDetailRow构建单行详情。
Divider分隔各行。

constDivider(),_buildDetailRow('日均可用','${(plan.remainingData/plan.daysRemaining/(1024*1024)).toStringAsFixed(0)}MB',),],),);}

日均可用=剩余流量/剩余天数。
转换为MB单位显示。
帮助用户控制每日流量使用。

详情行组件

单行详情的显示：

Widget_buildDetailRow(Stringlabel,Stringvalue){returnPadding(padding:EdgeInsets.symmetric(vertical:8.h),child:Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,

Padding添加垂直内边距。
Row两端对齐标签和数值。
spaceBetween让两端对齐。

children:[Text(label,style:TextStyle(fontSize:14.sp,color:AppTheme.textSecondary)),Text(value,style:TextStyle(fontSize:14.sp,fontWeight:FontWeight.w600)),],),);}

标签用次要颜色作为说明。
数值用w600加粗突出显示。
整体设计简洁直观。

提醒状态卡片

根据套餐使用情况显示不同的提示：

Widget_buildAlertCard(){finalplan=controller.plan.value!;returnContainer(padding:EdgeInsets.all(16.w),decoration:BoxDecoration(

获取当前套餐数据。
Container作为提醒卡片的容器。
16.w内边距让内容不贴边。

color:plan.isOverThreshold?AppTheme.warningColor.withOpacity(0.1):AppTheme.wifiColor.withOpacity(0.1),borderRadius:BorderRadius.circular(12.r),),

超过阈值用警告色浅色背景。
正常状态用绿色浅色背景。
12.r圆角保持视觉一致。

child:Row(children:[Icon(plan.isOverThreshold?Icons.warning_outlined:Icons.check_circle_outline,color:plan.isOverThreshold?AppTheme.warningColor:AppTheme.wifiColor,size:24.sp,),

Row横向排列图标和文字。
超过阈值显示警告图标。
正常状态显示勾选图标。

SizedBox(width:12.w),Expanded(child:Text(plan.isOverThreshold?'流量使用已超过${plan.alertThreshold}%，请注意控制':'流量使用正常',

间距12.w让图标和文字不挤。
Expanded让文字占据剩余空间。
根据状态显示不同提示文字。

style:TextStyle(fontSize:13.sp,color:plan.isOverThreshold?AppTheme.warningColor:AppTheme.wifiColor,),),),],),);}

文字颜色与图标颜色一致。
13.sp字号适合提示信息。
整体设计让用户一眼看出状态。

DataPlan数据模型

套餐数据的模型定义：

classDataPlan{finalStringid;finalStringname;finalint totalData;finalint usedData;finalDateTimestartDate;

id是套餐的唯一标识。
name是套餐名称。
totalData和usedData是总流量和已用流量。

finalDateTimeendDate;finalint alertThreshold;finalbool isActive;intgetremainingData=>totalData-usedData;

startDate和endDate是套餐有效期。
alertThreshold是提醒阈值百分比。
remainingData计算剩余流量。

doublegetusagePercentage=>totalData>0?(usedData/totalData)*100:0;intgetdaysRemaining=>endDate.difference(DateTime.now()).inDays;boolgetisOverThreshold=>usagePercentage>=alertThreshold;

usagePercentage计算使用百分比。
daysRemaining计算剩余天数。
isOverThreshold判断是否超过阈值。

StringgetformattedTotal=>_formatBytes(totalData);StringgetformattedUsed=>_formatBytes(usedData);StringgetformattedRemaining=>_formatBytes(remainingData);}

格式化方法将字节数转为可读字符串。
formattedTotal、formattedUsed、formattedRemaining。
计算属性让数据访问更方便。

Controller层实现

控制器管理套餐相关的状态：

classDataPlanControllerextendsGetxController{finalplan=Rx<DataPlan?>(null);finalisEditing=false.obs;@overridevoidonInit(){

plan存储当前套餐，可为null。
isEditing控制编辑状态。
onInit在控制器初始化时调用。

super.onInit();loadPlan();}voidloadPlan(){plan.value=DataPlan(id:'1',name:'月度套餐',

loadPlan加载套餐数据。
创建DataPlan对象。
模拟数据用于演示。

totalData:1024*1024*1024*10,usedData:1024*1024*1024*6,startDate:DateTime.now().subtract(constDuration(days:15)),endDate:DateTime.now().add(constDuration(days:15)),alertThreshold:80,

总流量10GB，已用6GB。
套餐从15天前开始，还有15天结束。
alertThreshold设为80%。

);}}

闭合loadPlan方法和控制器类。
实际项目中从本地存储加载数据。
套餐数据应该持久化保存。

写在最后

套餐管理页面的核心是数据展示，把DataPlan模型设计好，UI层就很简单了。环形进度条直观展示使用进度，详情卡片提供更多数据，提醒卡片根据状态给出提示。

可以继续优化的方向：

  • 支持多套餐管理
  • 添加套餐编辑功能
  • 支持套餐到期提醒
  • 添加流量预测功能

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/5/3 3:49:52

RAG精度提升300%？BGE-Reranker-v2-m3实战数据揭秘

RAG精度提升300%&#xff1f;BGE-Reranker-v2-m3实战数据揭秘 1. 引言&#xff1a;RAG系统中的“精准排序”难题 在当前的检索增强生成&#xff08;RAG&#xff09;架构中&#xff0c;向量数据库通过语义嵌入实现初步文档召回&#xff0c;但其基于余弦相似度的匹配机制存在明…

作者头像 李华
网站建设 2026/5/1 14:24:01

微信小程序图表开发终极指南：5分钟搞定ECharts数据可视化

微信小程序图表开发终极指南&#xff1a;5分钟搞定ECharts数据可视化 【免费下载链接】echarts-for-weixin Apache ECharts 的微信小程序版本 项目地址: https://gitcode.com/gh_mirrors/ec/echarts-for-weixin 还在为微信小程序的数据展示烦恼吗&#xff1f;想要让枯燥…

作者头像 李华
网站建设 2026/5/4 0:38:16

一键切换多模型：OpenCode打造个性化AI编程环境

一键切换多模型&#xff1a;OpenCode打造个性化AI编程环境 1. 引言&#xff1a;AI编程助手的演进与挑战 随着大语言模型在软件开发领域的深入应用&#xff0c;AI编程助手已成为提升编码效率的重要工具。然而&#xff0c;当前多数解决方案存在明显局限&#xff1a;依赖特定厂商…

作者头像 李华
网站建设 2026/5/3 6:26:06

ComfyUI IPAdapter视觉控制实战：从特征编码到风格迁移的深度解析

ComfyUI IPAdapter视觉控制实战&#xff1a;从特征编码到风格迁移的深度解析 【免费下载链接】ComfyUI_IPAdapter_plus 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI_IPAdapter_plus ComfyUI IPAdapter作为图像生成领域的革命性工具&#xff0c;通过先进的视觉…

作者头像 李华
网站建设 2026/5/1 17:31:43

黑苹果网络驱动一键配置终极指南：从零到完美连接

黑苹果网络驱动一键配置终极指南&#xff1a;从零到完美连接 【免费下载链接】Hackintosh Hackintosh long-term maintenance model EFI and installation tutorial 项目地址: https://gitcode.com/gh_mirrors/ha/Hackintosh 还在为黑苹果的Wi-Fi和蓝牙驱动烦恼吗&#…

作者头像 李华
网站建设 2026/5/3 6:40:57

基于SpringAI的在线考试系统软件系统验收案例

考试系统验收流程说明 一、验收整体流程 考试系统的验收应按照以下整体流程进行&#xff1a; 验收前准备 → 按顺序执行模块验收 → 记录测试结果 → 判断验收结果 → 编写验收报告 → 验收后续工作二、模块验收顺序与重点 根据系统模块的依赖关系和业务流程&#xff0c;验收测…

作者头像 李华