鸿蒙flutter第三方库适配 - 文件搜索工具
运行效果图文件搜索工具是一款高效的本地文件搜索应用，支持快速搜索文件、多种搜索条件、搜索历史管理，以及搜索结果排序。应用以清爽的蓝色为主色调，象征高效与智能。涵盖文件搜索、文件浏览、设置中心三大模块。用户可以快速定位目标文件、按类型筛选、管理搜索历史，大幅提升文件查找效率。序号类型名称图标包含扩展名1全部⊂所有文件2文档📄3图片🖼️4视频🎬5音频🎵6压缩包📦序号排序方式图标描述1名称A-
·
文件搜索工具应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
适配的第三方库地址：
- path_provider: https://pub.dev/packages/path_provider
- shared_preferences: https://pub.dev/packages/shared_preferences
- path: https://pub.dev/packages/path
一、项目概述
运行效果图
1.1 应用简介
文件搜索工具是一款高效的本地文件搜索应用，支持快速搜索文件、多种搜索条件、搜索历史管理，以及搜索结果排序。应用以清爽的蓝色为主色调，象征高效与智能。涵盖文件搜索、文件浏览、设置中心三大模块。用户可以快速定位目标文件、按类型筛选、管理搜索历史，大幅提升文件查找效率。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 文件搜索 | 快速搜索本地文件 | 递归遍历 |
| 类型筛选 | 按文件类型筛选搜索 | 扩展名匹配 |
| 搜索历史 | 记录和管理搜索历史 | shared_preferences |
| 结果排序 | 多种排序方式展示结果 | 排序算法 |
| 文件浏览 | 浏览文件夹结构 | 目录遍历 |
| 快速访问 | 快速访问常用文件类型 | 分类入口 |
| 搜索路径 | 自定义搜索路径范围 | path_provider |
| 文件详情 | 查看文件详细信息 | 文件属性 |
1.3 搜索类型定义
| 序号 | 类型名称 | 图标 | 包含扩展名 |
|---|---|---|---|
| 1 | 全部 | ⊂ | 所有文件 |
| 2 | 文档 | 📄 | pdf, doc, docx, xls, xlsx, ppt, pptx, txt, md |
| 3 | 图片 | 🖼️ | jpg, jpeg, png, gif, bmp, webp, svg |
| 4 | 视频 | 🎬 | mp4, avi, mkv, mov, wmv, flv |
| 5 | 音频 | 🎵 | mp3, wav, flac, aac, ogg, m4a |
| 6 | 压缩包 | 📦 | zip, rar, 7z, tar, gz |
1.4 排序方式定义
| 序号 | 排序方式 | 图标 | 描述 |
|---|---|---|---|
| 1 | 名称 | A-Z | 按文件名排序 |
| 2 | 大小 | 💾 | 按文件大小排序 |
| 3 | 日期 | 🕐 | 按修改时间排序 |
| 4 | 类型 | 📁 | 按文件类型排序 |
1.5 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 文件路径 | path_provider | >= 2.1.0 |
| 历史存储 | shared_preferences | >= 2.0.0 |
| 路径处理 | path | >= 1.8.0 |
| 目标平台 | 鸿蒙OS / Web / Android | API 21+ |
1.6 项目结构
lib/
└── main_file_search.dart
├── FileSearchApp # 应用入口
├── SearchType # 搜索类型枚举
├── SortType # 排序方式枚举
├── FileItem # 文件项模型
├── SearchHistory # 搜索历史模型
├── HomePage # 主页面（底部导航）
├── _buildSearchPage # 搜索页面
├── _buildBrowsePage # 浏览页面
├── _buildSettingsPage # 设置页面
└── 文件搜索相关方法
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 搜索流程
三、核心模块设计
3.1 数据模型设计
3.1.1 搜索类型枚举 (SearchType)
enum SearchType {
all(label: '全部', icon: Icons.all_inclusive),
documents(label: '文档', icon: Icons.description),
images(label: '图片', icon: Icons.image),
videos(label: '视频', icon: Icons.video_file),
audio(label: '音频', icon: Icons.audio_file),
archives(label: '压缩包', icon: Icons.folder_zip);
final String label;
final IconData icon;
List<String> get extensions {
switch (this) {
case SearchType.documents:
return ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.txt', '.md'];
case SearchType.images:
return ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'];
// ...
}
}
}
3.1.2 文件项模型 (FileItem)
class FileItem {
final String path;
final String name;
final int size;
final DateTime modifiedTime;
final bool isDirectory;
final String extension;
String get sizeText {
if (isDirectory) return '--';
if (size < 1024) return '$size B';
if (size < 1024 * 1024) return '${(size / 1024).toStringAsFixed(1)} KB';
if (size < 1024 * 1024 * 1024) {
return '${(size / (1024 * 1024)).toStringAsFixed(1)} MB';
}
return '${(size / (1024 * 1024 * 1024)).toStringAsFixed(1)} GB';
}
IconData get icon {
if (isDirectory) return Icons.folder;
// 根据扩展名返回对应图标
}
Color get iconColor {
// 根据扩展名返回对应颜色
}
}
3.1.3 文件类型分布示例
3.2 搜索逻辑设计
3.2.1 递归搜索算法
Future<void> _searchDirectory(
String path,
String keyword,
List<FileItem> results,
) async {
try {
final dir = Directory(path);
if (!await dir.exists()) return;
await for (final entity in dir.list(recursive: true, followLinks: false)) {
final name = p.basename(entity.path);
final lowerName = name.toLowerCase();
if (!lowerName.contains(keyword)) continue;
final extension = p.extension(entity.path).toLowerCase();
// 类型筛选
if (_searchType != SearchType.all) {
if (!_searchType.extensions.contains(extension)) continue;
}
// 创建文件项并添加到结果
if (entity is File) {
final stat = await entity.stat();
results.add(FileItem(
path: entity.path,
name: name,
size: stat.size,
modifiedTime: stat.modified,
isDirectory: false,
extension: extension,
));
}
}
} catch (e) {
// 忽略权限错误
}
}
3.2.2 排序算法
void _sortResults(List<FileItem> results) {
results.sort((a, b) {
int result;
switch (_sortType) {
case SortType.name:
result = a.name.toLowerCase().compareTo(b.name.toLowerCase());
break;
case SortType.size:
result = a.size.compareTo(b.size);
break;
case SortType.date:
result = a.modifiedTime.compareTo(b.modifiedTime);
break;
case SortType.type:
result = a.extension.compareTo(b.extension);
break;
}
return _sortAscending ? result : -result;
});
}
3.3 页面结构设计
3.3.1 主页面布局
3.3.2 搜索页面结构
3.4 历史管理逻辑
四、UI设计规范
4.1 配色方案
应用以清爽的蓝色为主色调，象征高效与智能：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | #2196F3 (Blue) | 导航、主题元素 |
| 辅助色 | #64B5F6 | 次要按钮 |
| 文件夹色 | #FFC107 | 文件夹图标 |
| PDF色 | #F44336 | PDF文件 |
| 文档色 | #2196F3 | Word/文档 |
| 表格色 | #4CAF50 | Excel文件 |
| 图片色 | #9C27B0 | 图片文件 |
| 视频色 | #3F51B5 | 视频文件 |
| 音频色 | #E91E63 | 音频文件 |
| 压缩色 | #795548 | 压缩文件 |
4.2 文件图标配色
| 文件类型 | 色值 | 图标 |
|---|---|---|
| 文件夹 | #FFC107 | folder |
| #F44336 | picture_as_pdf | |
| Word | #2196F3 | description |
| Excel | #4CAF50 | table_chart |
| PPT | #FF9800 | slideshow |
| 图片 | #9C27B0 | image |
| 视频 | #3F51B5 | video_file |
| 音频 | #E91E63 | audio_file |
| 压缩包 | #795548 | folder_zip |
4.3 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 页面标题 | 24px | Bold | 主色 |
| 文件名 | 15px | Medium | #000000 |
| 文件大小 | 12px | Regular | #666666 |
| 文件路径 | 10px | Regular | #888888 |
| 提示文字 | 14px | Regular | #999999 |
4.4 组件规范
4.4.1 搜索栏
┌─────────────────────────────────────┐
│ 🔍 输入文件名或关键词搜索... ✕ │
└─────────────────────────────────────┘
4.4.2 类型筛选
┌─────────────────────────────────────────────────┐
│ [✓ 全部] [📄 文档] [🖼️ 图片] [🎬 视频] [🎵 音频] [📦 压缩包] │
└─────────────────────────────────────────────────┘
4.4.3 文件卡片
┌─────────────────────────────────────┐
│ ┌──────┐ │
│ │ 📄 │ 项目计划书.pdf │
│ │ │ 2.5 MB · PDF │
│ └──────┘ /Documents/Projects/... │
└─────────────────────────────────────┘
4.4.4 搜索历史
┌─────────────────────────────────────┐
│ 搜索历史 清空 │
│ ┌─────────────────────────────┐ │
│ │ 🕐 项目文档 2天前 ✕ │ │
│ ├─────────────────────────────┤ │
│ │ 🕐 照片 5天前 ✕ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
五、核心功能实现
5.1 文件搜索实现
Future<void> _search(String query) async {
if (query.isEmpty) {
setState(() {
_showHistory = true;
_searchResults.clear();
});
return;
}
setState(() {
_isSearching = true;
_showHistory = false;
_searchProgress = 0;
_filesScanned = 0;
_searchResults.clear();
});
_addToHistory(query);
final results = <FileItem>[];
final keyword = query.toLowerCase();
await _searchDirectory(_currentPath, keyword, results);
_sortResults(results);
setState(() {
_searchResults = results;
_isSearching = false;
});
}
5.2 搜索历史管理
void _addToHistory(String query) {
setState(() {
_searchHistory.removeWhere((h) => h.query == query);
_searchHistory.insert(0, SearchHistory(
query: query,
timestamp: DateTime.now(),
));
});
_saveHistory();
}
Future<void> _saveHistory() async {
final prefs = await SharedPreferences.getInstance();
final history = _searchHistory.take(20).map((h) {
return '${h.query}|${h.timestamp.toIso8601String()}';
}).toList();
await prefs.setStringList('search_history', history);
}
Future<void> _loadData() async {
final prefs = await SharedPreferences.getInstance();
final history = prefs.getStringList('search_history') ?? [];
setState(() {
_searchHistory = history.map((h) {
final parts = h.split('|');
return SearchHistory(
query: parts[0],
timestamp: parts.length > 1
? DateTime.parse(parts[1])
: DateTime.now(),
);
}).toList();
});
}
5.3 文件大小格式化
String get sizeText {
if (isDirectory) return '--';
if (size < 1024) return '$size B';
if (size < 1024 * 1024) return '${(size / 1024).toStringAsFixed(1)} KB';
if (size < 1024 * 1024 * 1024) {
return '${(size / (1024 * 1024)).toStringAsFixed(1)} MB';
}
return '${(size / (1024 * 1024 * 1024)).toStringAsFixed(1)} GB';
}
5.4 搜索动画实现
// 初始化动画控制器
_searchAnimationController = AnimationController(
duration: const Duration(milliseconds: 1500),
vsync: this,
);
_searchAnimation = Tween<double>(begin: 0, end: 1).animate(
CurvedAnimation(
parent: _searchAnimationController,
curve: Curves.easeInOut,
),
);
// 搜索开始时启动动画
_searchAnimationController.repeat();
// 搜索结束时停止动画
_searchAnimationController.stop();
_searchAnimationController.reset();
// 动画构建器
AnimatedBuilder(
animation: _searchAnimation,
builder: (context, child) {
return Transform.rotate(
angle: _searchAnimation.value * 2 * 3.14159,
child: const Icon(Icons.search, size: 48),
);
},
)
六、交互设计
6.1 搜索流程
6.2 历史管理流程
6.3 排序切换流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 高级搜索功能
高级搜索：
- 正则表达式搜索
- 文件内容搜索
- 日期范围筛选
- 大小范围筛选
7.2.2 文件预览功能
文件预览：
- 图片缩略图预览
- 文本文件预览
- PDF文件预览
- 视频缩略图
7.2.3 文件操作功能
文件操作：
- 复制文件
- 移动文件
- 重命名文件
- 删除文件
八、注意事项
8.1 开发注意事项
-
权限处理：正确申请文件读取权限
-
性能优化：大目录搜索使用异步遍历
-
错误处理：处理权限拒绝和文件访问错误
-
内存管理：避免一次性加载过多结果
-
路径处理：使用path包处理跨平台路径
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 搜索无结果 | 权限未授予 | 申请文件读取权限 |
| 搜索卡顿 | 目录过大 | 使用异步遍历 |
| 历史丢失 | 未正确保存 | 确保SharedPreferences保存 |
| 路径错误 | 路径格式问题 | 使用path包处理 |
| 文件图标错误 | 扩展名未识别 | 添加更多扩展名映射 |
8.3 使用技巧
🔍 文件搜索工具使用技巧 🔍
搜索技巧
- 使用关键词精确搜索
- 选择合适的文件类型筛选
- 利用搜索历史快速搜索
- 合理设置搜索路径范围
结果管理技巧
- 使用排序快速定位
- 查看文件详情了解信息
- 定期清理搜索历史
- 善用快速访问入口
效率提升技巧
- 记住常用文件名
- 使用有意义的文件名
- 分类存放文件
- 定期整理文件夹
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
| Android | API 21+ |
| Web浏览器 | Chrome 90+ |
9.2 依赖配置
在 pubspec.yaml 中添加以下依赖：
dependencies:
flutter:
sdk: flutter
shared_preferences: ^2.5.3
path_provider: ^2.1.5
path: ^1.9.0
9.3 运行命令
# 查看可用设备
flutter devices
# 运行到Web服务器
flutter run -d web-server -t lib/main_file_search.dart --web-port 8202
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_file_search.dart
# 代码分析
flutter analyze lib/main_file_search.dart
十、总结
文件搜索工具应用是一款高效的本地文件搜索工具，支持快速搜索文件、多种搜索条件、搜索历史管理，以及搜索结果排序。应用采用 Material Design 3 设计规范，以清爽的蓝色为主色调，象征高效与智能。
核心功能涵盖文件搜索、类型筛选、搜索历史、结果排序、文件浏览、快速访问、搜索路径、文件详情八大模块。用户可以快速定位目标文件、按类型筛选、管理搜索历史，大幅提升文件查找效率。
应用支持6种文件类型筛选（全部、文档、图片、视频、音频、压缩包）和4种排序方式（名称、大小、日期、类型），使用SharedPreferences存储搜索历史，支持搜索动画效果。通过本应用，希望能够帮助用户快速找到所需文件，提升工作效率。
文件搜索工具——快速定位，高效查找
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
6
0- 0
已为社区贡献22条内容
所有评论(0)