Flutter × OpenHarmony 文件管家-构建文件管理器主界面与存储设备卡片-平芜编程栈

文章目录

Flutter × OpenHarmony 文件管家-构建文件管理器主界面与存储设备卡片
- - 前言
  - 背景
  - Flutter × OpenHarmony 跨端开发介绍
  - 开发核心代码（详细解析）
  - 心得
  - 总结

Flutter × OpenHarmony 文件管家-构建文件管理器主界面与存储设备卡片

前言

随着移动设备和智能终端的多样化，用户对于文件管理应用的需求日益增加。文件管理器不仅要具备良好的文件浏览、操作体验，还需要提供存储信息可视化，让用户直观了解设备存储使用情况。

在这篇文章中，我们将基于Flutter × OpenHarmony跨端开发框架，实现一个文件管家的主界面，并重点讲解存储设备卡片的构建和使用进度条的实现方法。文章中提供的代码可直接在 Flutter + OpenHarmony 环境下运行。

背景

传统的文件管理应用多依赖于单平台开发，如 Android 或 iOS。但随着OpenHarmony的兴起，开发者希望能够一次开发，快速在多设备端运行，包括手机、平板和 PC。

结合Flutter的跨平台 UI 构建能力，我们可以通过统一的代码实现文件管理器的 UI 布局，同时借助 OpenHarmony 提供的底层能力访问存储信息，实现真正的跨端文件管理解决方案。

Flutter × OpenHarmony 跨端开发介绍

Flutter 是谷歌推出的开源跨平台 UI 框架，特点是：

声明式 UI：使用 Widget 构建界面，布局灵活。
热重载：开发效率高，调试快速。
跨平台：支持 Android、iOS、Web 及桌面平台。

OpenHarmony 是华为开源的分布式操作系统，特点包括：

多设备协同：一套应用在手机、平板、IoT 设备间无缝运行。
统一存储访问接口：提供安全、统一的文件访问 API。

结合 Flutter 与 OpenHarmony，可以实现一套代码同时适配不同设备的文件管家应用。

开发核心代码（详细解析）

核心功能包括：

主界面布局
存储设备卡片构建
存储使用进度可视化

下面是具体实现：

/// 构建存储设备信息区域Widget_buildStorageSection(ThemeDatatheme){returnColumn(crossAxisAlignment:CrossAxisAlignment.start,children:[Text('存储管理',style:theme.textTheme.titleLarge?.copyWith(fontWeight:FontWeight.bold),),constSizedBox(height:16),Column(children:_storageDevices.map((device){return_buildStorageDeviceCard(device,theme);}).toList(),),],);}

解析：

_buildStorageSection方法负责构建整个存储管理模块。
使用Column垂直排列元素，crossAxisAlignment: CrossAxisAlignment.start保证标题靠左。
_storageDevices.map(...)遍历存储设备列表，为每个设备生成卡片。

/// 构建存储设备卡片Widget_buildStorageDeviceCard(StorageDevicedevice,ThemeDatatheme){finalusedGB=(device.usedSize/(1024*1024*1024)).toStringAsFixed(1);finaltotalGB=(device.totalSize/(1024*1024*1024)).toStringAsFixed(1);returnCard(elevation:2,shape:RoundedRectangleBorder(borderRadius:BorderRadius.circular(16),),margin:constEdgeInsets.only(bottom:12),child:Padding(padding:constEdgeInsets.all(16),child:Column(children:[Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:[Row(children:[Icon(device.isInternal?Icons.phone_android:Icons.sd_storage,color:theme.colorScheme.primary,size:24,),constSizedBox(width:12),Text(device.name,style:theme.textTheme.bodyLarge?.copyWith(fontWeight:FontWeight.bold),),],),Text('$usedGBGB /$totalGBGB',style:theme.textTheme.bodyMedium?.copyWith(color:theme.colorScheme.onSurfaceVariant,),),],),constSizedBox(height:12),// 存储使用进度条Container(height:8,decoration:BoxDecoration(borderRadius:BorderRadius.circular(4),color:theme.colorScheme.surfaceVariant,),child:Stack(children:[Container(width:device.usagePercentage/100*MediaQuery.of(context).size.width-64,decoration:BoxDecoration(borderRadius:BorderRadius.circular(4),color:device.usagePercentage>80?theme.colorScheme.error:device.usagePercentage>50?theme.colorScheme.error:theme.colorScheme.primary,),),],),),constSizedBox(height:8),Align(alignment:Alignment.centerRight,child:Text('${device.usagePercentage.toStringAsFixed(1)}% 已使用',style:theme.textTheme.bodySmall?.copyWith(color:theme.colorScheme.onSurfaceVariant,),),),],),),);}

解析：

数据处理
- usedGB与totalGB将字节转换为 GB 并保留一位小数，便于显示。
卡片布局
- Card用于创建有阴影的卡片效果，RoundedRectangleBorder控制圆角。
- Padding提供内边距，使内容不贴边。
顶部信息行
- 左侧显示设备图标和名称，图标根据isInternal判断是内置存储还是外置存储。
- 右侧显示已使用 / 总容量文本。
进度条实现
- 使用Container包裹一个Stack，底层为灰色背景，顶部为实际使用进度条。
- 进度条宽度根据device.usagePercentage动态计算，颜色根据使用率设置：
  - 80% 显示错误色（红色）
  - 50%-80% 显示警告色（橙色/红色）
  - <50% 显示主题主色
底部使用率文本
- Align将文本右对齐，显示百分比已使用容量。