【maaath】Flutter for OpenHarmony 数据清单搜索与筛选功能集成指南
·
Flutter for OpenHarmony 数据清单搜索与筛选功能集成指南
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
一、背景介绍
在移动应用开发中，数据列表是最常见的UI场景之一。无论是电商商品列表、新闻资讯列表还是订单管理列表，用户都需要快速找到目标数据。搜索与筛选功能作为提升用户体验的关键能力，能够帮助用户从海量数据中快速定位所需内容。
本文将详细介绍如何在Flutter for OpenHarmony跨平台工程中集成搜索与筛选能力，实现数据清单的实时检索与条件过滤，并在开源鸿蒙模拟器上完成运行验证。
二、功能设计
2.1 核心功能模块
本次集成主要包含以下功能模块：
- 实时搜索：支持按名称、描述、ID进行关键词检索
- 多维筛选：支持按分类、状态、价格范围、标签进行条件过滤
- 灵活排序：支持按时间、价格进行升序/降序排列
- 国际化支持：完整支持中英文界面切换
2.2 数据模型设计
首先定义数据项的接口结构，包含唯一标识、名称、分类、状态、价格、描述、标签和创建时间等字段：
export interface DataItem {
id: string;
name: string;
category: string;
status: ItemStatus;
price: number;
description: string;
tags: string[];
createTime: string;
}
export enum ItemStatus {
ACTIVE = 'active',
INACTIVE = 'inactive',
PENDING = 'pending',
ARCHIVED = 'archived'
}
export interface FilterCriteria {
searchText: string;
categories: string[];
statuses: ItemStatus[];
minPrice: number;
maxPrice: number;
tags: string[];
}
三、核心实现
3.1 数据服务层
数据服务层负责数据的初始化、搜索、筛选和排序逻辑。采用单例模式确保全局数据一致性：
export class DataService {
private static instance: DataService;
private dataItems: DataItem[] = [];
private filteredItems: DataItem[] = [];
static getInstance(): DataService {
if (!DataService.instance) {
DataService.instance = new DataService();
}
return DataService.instance;
}
searchAndFilter(criteria: FilterCriteria): DataItem[] {
let result = [...this.dataItems];
if (criteria.searchText && criteria.searchText.trim() !== '') {
const searchLower = criteria.searchText.toLowerCase().trim();
result = result.filter(item =>
item.name.toLowerCase().includes(searchLower) ||
item.description.toLowerCase().includes(searchLower) ||
item.id.toLowerCase().includes(searchLower)
);
}
if (criteria.categories && criteria.categories.length > 0) {
result = result.filter(item =>
criteria.categories.includes(item.category)
);
}
if (criteria.statuses && criteria.statuses.length > 0) {
result = result.filter(item =>
criteria.statuses.includes(item.status)
);
}
if (criteria.minPrice > 0 || criteria.maxPrice < 99999) {
result = result.filter(item =>
item.price >= criteria.minPrice && item.price <= criteria.maxPrice
);
}
if (criteria.tags && criteria.tags.length > 0) {
result = result.filter(item =>
item.tags.some(tag => criteria.tags.includes(tag))
);
}
this.filteredItems = result;
return [...this.filteredItems];
}
sortItems(items: DataItem[], sortOption: SortOption): DataItem[] {
const sorted = [...items];
switch (sortOption) {
case SortOption.PRICE_ASC:
sorted.sort((a, b) => a.price - b.price);
break;
case SortOption.PRICE_DESC:
sorted.sort((a, b) => b.price - a.price);
break;
case SortOption.TIME_DESC:
sorted.sort((a, b) =>
new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
);
break;
}
return sorted;
}
}
3.2 搜索筛选组件
搜索筛选组件采用ArkUI声明式语法构建，包含搜索栏和可展开的筛选面板：
@Component
export struct SearchFilterComponent {
@Link filterCriteria: FilterCriteria;
@Link isFilterExpanded: boolean;
@Prop searchPlaceholder: string = '';
onSearchChange?: (text: string) => void;
onFilterChange?: (criteria: FilterCriteria) => void;
build() {
Column() {
this.SearchBar()
if (this.isFilterExpanded) {
this.FilterPanel()
}
}
.width('100%')
.backgroundColor('#F5F5F5')
}
@Builder
SearchBar() {
Row() {
Search({ placeholder: this.searchPlaceholder, value: this.filterCriteria.searchText })
.width('85%')
.height(40)
.backgroundColor(Color.White)
.onChange((value: string) => {
this.filterCriteria.searchText = value;
if (this.onSearchChange) {
this.onSearchChange(value);
}
})
Button({ type: ButtonType.Circle }) {
Text(this.isFilterExpanded ? '▲' : '▼')
.fontSize(14)
.fontColor(Color.White)
}
.width(40)
.height(40)
.backgroundColor(this.hasActiveFilters() ? '#007DFF' : '#999999')
.onClick(() => {
this.isFilterExpanded = !this.isFilterExpanded;
})
}
.width('100%')
}
}
3.3 数据清单页面
数据清单页面整合搜索筛选组件与数据列表展示：
@Entry
@Component
struct DataListPage {
@State filteredList: DataItem[] = [];
@State filterCriteria: FilterCriteria = createDefaultFilter();
@State isFilterExpanded: boolean = false;
@State currentSort: SortOption = SortOption.TIME_DESC;
aboutToAppear() {
this.loadData();
}
loadData(): void {
this.dataList = dataService.getAllItems();
this.applyFilters();
}
applyFilters(): void {
let result = dataService.searchAndFilter(this.filterCriteria);
result = dataService.sortItems(result, this.currentSort);
this.filteredList = result;
}
build() {
Column() {
this.TitleBar()
this.SortBar()
SearchFilterComponent({
filterCriteria: $filterCriteria,
isFilterExpanded: $isFilterExpanded,
onSearchChange: this.onSearchChange.bind(this),
onFilterChange: this.onFilterChange.bind(this)
})
this.DataList()
}
.width('100%')
.height('100%')
}
}
四、国际化支持
为实现中英文动态切换，我们设计了字符串管理器，统一管理多语言资源：
export class StringManager {
private stringResources: Record<string, Record<string, string>> = {
'zh-CN': {
'data_list': '数据清单',
'search_placeholder': '搜索名称、描述或ID...',
'filter_category': '分类筛选',
'status_active': '活跃',
'apply_filter': '应用筛选',
},
'en-US': {
'data_list': 'Data List',
'search_placeholder': 'Search name, description or ID...',
'filter_category': 'Category Filter',
'status_active': 'Active',
'apply_filter': 'Apply',
}
};
getString(key: string): string {
const currentLang = i18nManager.getLanguage();
const langStrings = this.stringResources[currentLang] || this.stringResources['zh-CN'];
return langStrings[key] || key;
}
}
五、运行验证
在开源鸿蒙模拟器上完成功能验证，测试结果如下：
搜索功能验证：输入关键词"手机"，系统实时过滤出名称或描述包含"手机"的数据项。
筛选功能验证：选择"电子产品"分类和"活跃"状态，列表正确显示符合条件的商品。
排序功能验证：点击"价格升序"按钮，列表按价格从低到高重新排列。
六、总结
本文详细介绍了在Flutter for OpenHarmony跨平台工程中集成搜索与筛选能力的完整流程。通过分层架构设计，将数据服务、UI组件和国际化逻辑解耦，实现了高可维护性的代码结构。
该方案具有以下特点：
- 实时响应：搜索输入即时触发过滤，用户体验流畅
- 多维筛选：支持分类、状态、价格、标签多维度组合筛选
- 灵活排序：提供多种排序方式满足不同场景需求
- 国际化完备：完整支持中英文切换，便于全球化部署
感谢各位阅读！
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
11
0- 0
已为社区贡献52条内容
所有评论(0)