Flutter与OpenHarmony青花瓷搜索功能实现

文章摘要本文介绍了青花瓷App搜索功能的实现方案，包含Flutter和OpenHarmony双平台实现。搜索功能包括：1) 搜索页面结构设计，包含输入框、建议列表和结果展示；2) 搜索输入框实现，支持实时输入响应和内容清除；3) 跨平台组件适配，Flutter使用TextField，OpenHarmony使用Search组件；4) 实时搜索建议功能，根据输入内容过滤显示相关建议；5) 搜索历史管

2501_94669463

263人浏览 · 2025-12-20 17:06:36

2501_94669463 · 2025-12-20 17:06:36 发布

在这里插入图片描述

前言

搜索功能是帮助用户快速找到感兴趣内容的重要工具。在青花瓷App中，用户可以通过关键词搜索藏品、知识文章和博物馆信息。我们将实现一个支持实时搜索建议、历史记录和分类筛选的搜索功能。

良好的搜索体验能够显著提升用户满意度，特别是当应用内容丰富时，搜索成为用户获取信息的主要途径。我们的搜索功能将结合青花瓷领域的特点，提供智能的搜索建议。

搜索页面结构

搜索页面包含搜索输入框、搜索建议列表和搜索结果展示三个主要区域。

// lib/screens/search/search_screen.dart
import 'package:flutter/material.dart';

class SearchScreen extends StatefulWidget {
  const SearchScreen({super.key});

  @override
  State<SearchScreen> createState() => _SearchScreenState();
}

class _SearchScreenState extends State<SearchScreen> {
  final TextEditingController _searchController = TextEditingController();
  List<String> _suggestions = [];
  List<String> _searchHistory = [];
  bool _isSearching = false;
}


搜索页面使用多个状态变量管理搜索功能：`_searchController`控制输入框，`_suggestions`存储搜索建议，`_searchHistory`保存历史记录，`_isSearching`标记是否正在搜索。这种状态设计支持了搜索功能的各种交互场景。

## 搜索输入框

搜索输入框是搜索功能的核心交互元素，支持实时输入和清除功能。

```dart
// lib/screens/search/search_screen.dart (续)
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: TextField(
        controller: _searchController,
        autofocus: true,
        decoration: InputDecoration(
          hintText: '搜索藏品、知识...',
          border: InputBorder.none,
          suffixIcon: _searchController.text.isNotEmpty
              ? IconButton(
                  icon: const Icon(Icons.clear),
                  onPressed: () {
                    _searchController.clear();
                    setState(() => _suggestions = []);
                  },
                )
              : null,
        ),
        onChanged: _onSearchChanged,
      ),
    ),
    body: _buildSearchBody(),
  );
}

输入框放置在AppBar中，autofocus: true使页面打开时自动获取焦点。suffixIcon在有输入内容时显示清除按钮，方便用户快速清空输入。onChanged回调在输入变化时触发搜索建议的更新。

OpenHarmony搜索组件

在OpenHarmony端实现搜索输入组件，使用Search组件提供原生搜索体验。

// ohos/entry/src/main/ets/pages/SearchPage.ets
@Entry
@Component
struct SearchPage {
  @State searchText: string = '';
  @State suggestions: string[] = [];

  build() {
    Column() {
      Search({ value: this.searchText, placeholder: '搜索藏品、知识...' })
        .width('100%')
        .height(48)
        .backgroundColor('#FFFFFF')
        .onChange((value: string) => {
          this.searchText = value;
          this.updateSuggestions(value);
        })
        .onSubmit((value: string) => {
          this.performSearch(value);
        })
      
      SearchSuggestionList({ suggestions: this.suggestions })
    }
    .padding(16)
    .backgroundColor('#F8F6F0')
  }

  updateSuggestions(keyword: string) {
    // 更新搜索建议逻辑
  }
}

ArkTS的Search组件提供了原生的搜索输入体验，包括搜索图标和清除按钮。onChange回调实时响应输入变化，onSubmit回调处理用户提交搜索。这种实现与Flutter端的功能保持一致，确保跨平台体验的统一。

搜索建议功能

实现实时搜索建议，根据用户输入显示相关的搜索词。

// lib/screens/search/search_screen.dart (续)
void _onSearchChanged(String query) {
  if (query.isEmpty) {
    setState(() => _suggestions = []);
    return;
  }
  
  // 模拟搜索建议
  final suggestions = [
    '青花缠枝莲',
    '青花龙纹',
    '青花山水',
  ].where((s) => s.contains(query)).toList();
  
  setState(() => _suggestions = suggestions);
}

Widget _buildSuggestions() {
  return ListView.builder(
    itemCount: _suggestions.length,
    itemBuilder: (context, index) {
      return ListTile(
        leading: const Icon(Icons.search),
        title: Text(_suggestions[index]),
        onTap: () => _performSearch(_suggestions[index]),
      );
    },
  );
}

搜索建议根据用户输入实时过滤，显示包含关键词的建议项。每个建议项点击后执行搜索。实际应用中，搜索建议可以来自服务器的热门搜索词或用户的历史搜索记录。

搜索历史管理

保存和展示用户的搜索历史，方便快速重复搜索。

// lib/screens/search/widgets/search_history.dart
class SearchHistory extends StatelessWidget {
  final List<String> history;
  final ValueChanged<String> onTap;
  final VoidCallback onClear;

  const SearchHistory({
    super.key,
    required this.history,
    required this.onTap,
    required this.onClear,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text('搜索历史',
              style: TextStyle(fontWeight: FontWeight.bold)),
            TextButton(
              onPressed: onClear,
              child: const Text('清空'),
            ),
          ],
        ),
        Wrap(
          spacing: 8,
          runSpacing: 8,
          children: history.map((item) {
            return ActionChip(
              label: Text(item),
              onPressed: () => onTap(item),
            );
          }).toList(),
        ),
      ],
    );
  }
}

搜索历史使用Wrap组件实现流式布局，历史词条自动换行排列。每个词条使用ActionChip组件，点击可快速执行搜索。顶部提供清空按钮，让用户可以一键清除所有历史记录。

搜索结果展示

搜索结果页面展示匹配的藏品和知识文章，支持分类切换。

// lib/screens/search/widgets/search_results.dart
class SearchResults extends StatelessWidget {
  final String query;
  
  const SearchResults({super.key, required this.query});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Column(
        children: [
          const TabBar(
            tabs: [
              Tab(text: '藏品'),
              Tab(text: '知识'),
            ],
          ),
          Expanded(
            child: TabBarView(
              children: [
                PorcelainResultList(query: query),
                ArticleResultList(query: query),
              ],
            ),
          ),
        ],
      ),
    );
  }
}