一、应用概述

1.1 应用简介

表情选择器（Emoji Picker）是一款全面的Emoji表情选择工具，内置1500+个表情符号，分10个类别展示，支持搜索过滤、最近使用记忆、批量复制和收藏管理。该应用以HarmonyOS NEXT的ArkTS框架为基础，深入展示了大型数据集管理、分类渲染、搜索过滤算法、缓存优化、最近使用管理和网格布局优化等关键技术。

1.2 核心功能

1.3 应用架构

表情选择器应用采用分层架构：

1. UI表现层：分类标签栏、表情网格、搜索栏、最近使用面板、收藏面板。
2. 业务逻辑层：表情数据管理器、搜索引擎、最近使用管理器、收藏管理器。
3. 数据持久层：使用Preferences API存储最近使用和收藏数据。

二、表情数据管理

2.1 表情数据结构

interface Emoji {
  emoji: string;           // Emoji字符
  name: string;            // 英文名称
  chineseName: string;     // 中文名称
  category: string;        // 类别
  subCategory: string;     // 子类别
  keywords: string[];      // 关键词（用于搜索）
  unicode: string;         // Unicode编码
  version: string;         // Unicode版本
  skinToneSupport: boolean; // 是否支持肤色
}

interface EmojiCategory {
  id: string;
  name: string;
  icon: string;
  emojis: Emoji[];
  count: number;
}

class EmojiDatabase {
  private categories: EmojiCategory[] = [];
  
  constructor() {
    this.initDatabase();
  }
  
  private initDatabase(): void {
    // 笑脸与情绪
    const smileys: Emoji[] = [
      { emoji: '😀', name: 'Grinning Face', chineseName: '笑脸', category: 'smileys', subCategory: 'face-positive', keywords: ['笑', '开心', '高兴', 'grin', 'happy'], unicode: 'U+1F600', version: '1.0', skinToneSupport: false },
      { emoji: '😃', name: 'Grinning Face with Big Eyes', chineseName: '大笑', category: 'smileys', subCategory: 'face-positive', keywords: ['大笑', '开心', '哈哈', 'big eyes', 'happy'], unicode: 'U+1F603', version: '1.0', skinToneSupport: false },
      { emoji: '😄', name: 'Grinning Face with Smiling Eyes', chineseName: '眯眯笑', category: 'smileys', subCategory: 'face-positive', keywords: ['笑', '开心', 'smiling eyes'], unicode: 'U+1F604', version: '1.0', skinToneSupport: false },
      { emoji: '😁', name: 'Beaming Face with Smiling Eyes', chineseName: '露齿笑', category: 'smileys', subCategory: 'face-positive', keywords: ['笑', '开心', '露齿', 'beaming'], unicode: 'U+1F601', version: '1.0', skinToneSupport: false },
      { emoji: '😆', name: 'Grinning Squinting Face', chineseName: '眯眼笑', category: 'smileys', subCategory: 'face-positive', keywords: ['笑', '眯眼', 'squinting'], unicode: 'U+1F606', version: '1.0', skinToneSupport: false },
      { emoji: '😅', name: 'Grinning Face with Sweat', chineseName: '汗笑', category: 'smileys', subCategory: 'face-positive', keywords: ['汗', '笑', '尴尬', 'sweat'], unicode: 'U+1F605', version: '1.0', skinToneSupport: false },
      { emoji: '🤣', name: 'Rolling on the Floor Laughing', chineseName: '笑到打滚', category: 'smileys', subCategory: 'face-positive', keywords: ['笑', '打滚', '好笑', 'rofl'], unicode: 'U+1F923', version: '5.0', skinToneSupport: false },
      { emoji: '😂', name: 'Face with Tears of Joy', chineseName: '笑哭', category: 'smileys', subCategory: 'face-positive', keywords: ['笑哭', '哭', '笑', 'tears', 'joy'], unicode: 'U+1F602', version: '1.0', skinToneSupport: false },
      { emoji: '🙂', name: 'Slightly Smiling Face', chineseName: '微笑', category: 'smileys', subCategory: 'face-positive', keywords: ['微笑', '礼貌', 'slightly', 'smiling'], unicode: 'U+1F642', version: '1.0', skinToneSupport: false },
      { emoji: '😊', name: 'Smiling Face with Smiling Eyes', chineseName: '害羞笑', category: 'smileys', subCategory: 'face-positive', keywords: ['笑', '害羞', 'smiling', 'eyes'], unicode: 'U+1F60A', version: '1.0', skinToneSupport: false },
      { emoji: '😇', name: 'Smiling Face with Halo', chineseName: '天使', category: 'smileys', subCategory: 'face-positive', keywords: ['天使', '善良', 'halo', 'innocent'], unicode: 'U+1F607', version: '1.0', skinToneSupport: false },
      { emoji: '🥰', name: 'Smiling Face with Hearts', chineseName: '爱心脸', category: 'smileys', subCategory: 'face-positive', keywords: ['爱', '爱心', 'heart', 'love'], unicode: 'U+1F970', version: '11.0', skinToneSupport: false },
      { emoji: '😍', name: 'Smiling Face with Heart-Eyes', chineseName: '花痴', category: 'smileys', subCategory: 'face-positive', keywords: ['爱', '花痴', 'heart', 'eyes', 'love'], unicode: 'U+1F60D', version: '1.0', skinToneSupport: false },
      { emoji: '🤩', name: 'Star-Struck', chineseName: '星星眼', category: 'smileys', subCategory: 'face-positive', keywords: ['星星', '崇拜', 'star', 'struck'], unicode: 'U+1F929', version: '5.0', skinToneSupport: false },
      { emoji: '😘', name: 'Face Blowing a Kiss', chineseName: '飞吻', category: 'smileys', subCategory: 'face-positive', keywords: ['吻', '飞吻', 'kiss', 'blow'], unicode: 'U+1F618', version: '1.0', skinToneSupport: false },
      { emoji: '😗', name: 'Kissing Face', chineseName: '亲亲', category: 'smileys', subCategory: 'face-positive', keywords: ['亲', '吻', 'kissing'], unicode: 'U+1F617', version: '1.0', skinToneSupport: false },
      { emoji: '😚', name: 'Kissing Face with Closed Eyes', chineseName: '闭眼亲', category: 'smileys', subCategory: 'face-positive', keywords: ['亲', '闭眼', 'kissing', 'closed'], unicode: 'U+1F61A', version: '1.0', skinToneSupport: false },
      { emoji: '😋', name: 'Face Savoring Food', chineseName: '好吃', category: 'smileys', subCategory: 'face-positive', keywords: ['好吃', '美味', 'savoring', 'food'], unicode: 'U+1F60B', version: '1.0', skinToneSupport: false },
      { emoji: '😛', name: 'Face with Tongue', chineseName: '吐舌头', category: 'smileys', subCategory: 'face-positive', keywords: ['舌头', '调皮', 'tongue'], unicode: 'U+1F61B', version: '1.0', skinToneSupport: false },
      { emoji: '😜', name: 'Winking Face with Tongue', chineseName: '眨眼吐舌', category: 'smileys', subCategory: 'face-positive', keywords: ['眨眼', '调皮', 'winking', 'tongue'], unicode: 'U+1F61C', version: '1.0', skinToneSupport: false },
      { emoji: '🤪', name: 'Zany Face', chineseName: '搞怪', category: 'smileys', subCategory: 'face-positive', keywords: ['搞怪', '疯狂', 'zany'], unicode: 'U+1F92A', version: '5.0', skinToneSupport: false },
      { emoji: '😝', name: 'Squinting Face with Tongue', chineseName: '眯眼吐舌', category: 'smileys', subCategory: 'face-positive', keywords: ['眯眼', '调皮', 'squinting', 'tongue'], unicode: 'U+1F61D', version: '1.0', skinToneSupport: false },
      { emoji: '🤑', name: 'Money-Mouth Face', chineseName: '钱眼', category: 'smileys', subCategory: 'face-positive', keywords: ['钱', '发财', 'money', 'mouth'], unicode: 'U+1F911', version: '1.0', skinToneSupport: false },
    ];
    
    // 手势
    const gestures: Emoji[] = [
      { emoji: '👍', name: 'Thumbs Up', chineseName: '点赞', category: 'gestures', subCategory: 'hand', keywords: ['赞', '好', 'thumbs', 'up'], unicode: 'U+1F44D', version: '1.0', skinToneSupport: true },
      { emoji: '👎', name: 'Thumbs Down', chineseName: '倒赞', category: 'gestures', subCategory: 'hand', keywords: ['差', '不好', 'thumbs', 'down'], unicode: 'U+1F44E', version: '1.0', skinToneSupport: true },
      { emoji: '👊', name: 'Oncoming Fist', chineseName: '拳头', category: 'gestures', subCategory: 'hand', keywords: ['拳头', '加油', 'fist'], unicode: 'U+1F44A', version: '1.0', skinToneSupport: true },
      { emoji: '✊', name: 'Raised Fist', chineseName: '举拳', category: 'gestures', subCategory: 'hand', keywords: ['举拳', '力量', 'raised', 'fist'], unicode: 'U+270A', version: '1.0', skinToneSupport: true },
      { emoji: '🤛', name: 'Left-Facing Fist', chineseName: '左拳', category: 'gestures', subCategory: 'hand', keywords: ['左拳', 'left', 'fist'], unicode: 'U+1F91B', version: '3.0', skinToneSupport: true },
      { emoji: '🤜', name: 'Right-Facing Fist', chineseName: '右拳', category: 'gestures', subCategory: 'hand', keywords: ['右拳', 'right', 'fist'], unicode: 'U+1F91C', version: '3.0', skinToneSupport: true },
      { emoji: '👏', name: 'Clapping Hands', chineseName: '鼓掌', category: 'gestures', subCategory: 'hand', keywords: ['鼓掌', '欢迎', 'clapping'], unicode: 'U+1F44F', version: '1.0', skinToneSupport: true },
      { emoji: '🙌', name: 'Raising Hands', chineseName: '举手', category: 'gestures', subCategory: 'hand', keywords: ['举手', '庆祝', 'raising'], unicode: 'U+1F64C', version: '1.0', skinToneSupport: true },
      { emoji: '👐', name: 'Open Hands', chineseName: '张开手', category: 'gestures', subCategory: 'hand', keywords: ['张开', '拥抱', 'open', 'hands'], unicode: 'U+1F450', version: '1.0', skinToneSupport: true },
      { emoji: '🤲', name: 'Palms Up Together', chineseName: '捧手', category: 'gestures', subCategory: 'hand', keywords: ['捧', '祈祷', 'palms', 'up'], unicode: 'U+1F932', version: '5.0', skinToneSupport: true },
      { emoji: '🤝', name: 'Handshake', chineseName: '握手', category: 'gestures', subCategory: 'hand', keywords: ['握手', '合作', 'handshake'], unicode: 'U+1F91D', version: '3.0', skinToneSupport: false },
      { emoji: '🙏', name: 'Folded Hands', chineseName: '双手合十', category: 'gestures', subCategory: 'hand', keywords: ['祈祷', '感谢', 'please', 'folded'], unicode: 'U+1F64F', version: '1.0', skinToneSupport: true },
      { emoji: '✌️', name: 'Victory Hand', chineseName: '胜利', category: 'gestures', subCategory: 'hand', keywords: ['胜利', '耶', 'victory', 'peace'], unicode: 'U+270C', version: '1.0', skinToneSupport: true },
      { emoji: '🤞', name: 'Crossed Fingers', chineseName: '交叉手指', category: 'gestures', subCategory: 'hand', keywords: ['祈祷', '好运', 'crossed', 'fingers'], unicode: 'U+1F91E', version: '3.0', skinToneSupport: true },
      { emoji: '🤟', name: 'Love-You Gesture', chineseName: '爱你手势', category: 'gestures', subCategory: 'hand', keywords: ['爱', '手势', 'love', 'you'], unicode: 'U+1F91F', version: '5.0', skinToneSupport: true },
      { emoji: '🤘', name: 'Sign of the Horns', chineseName: '摇滚', category: 'gestures', subCategory: 'hand', keywords: ['摇滚', '金属', 'horns'], unicode: 'U+1F918', version: '1.0', skinToneSupport: true },
      { emoji: '🤙', name: 'Call Me Hand', chineseName: '打电话', category: 'gestures', subCategory: 'hand', keywords: ['电话', 'call', 'hand'], unicode: 'U+1F919', version: '3.0', skinToneSupport: true },
      { emoji: '👈', name: 'Backhand Index Pointing Left', chineseName: '左指', category: 'gestures', subCategory: 'hand', keywords: ['左', '指', 'backhand', 'left'], unicode: 'U+1F448', version: '1.0', skinToneSupport: true },
      { emoji: '👉', name: 'Backhand Index Pointing Right', chineseName: '右指', category: 'gestures', subCategory: 'hand', keywords: ['右', '指', 'backhand', 'right'], unicode: 'U+1F449', version: '1.0', skinToneSupport: true },
      { emoji: '👆', name: 'Backhand Index Pointing Up', chineseName: '上指', category: 'gestures', subCategory: 'hand', keywords: ['上', '指', 'backhand', 'up'], unicode: 'U+1F446', version: '1.0', skinToneSupport: true },
      { emoji: '👇', name: 'Backhand Index Pointing Down', chineseName: '下指', category: 'gestures', subCategory: 'hand', keywords: ['下', '指', 'backhand', 'down'], unicode: 'U+1F447', version: '1.0', skinToneSupport: true },
      { emoji: '☝️', name: 'Index Pointing Up', chineseName: '食指向上', category: 'gestures', subCategory: 'hand', keywords: ['食指', '上', 'pointing', 'up'], unicode: 'U+261D', version: '1.0', skinToneSupport: true },
      { emoji: '✋', name: 'Raised Hand', chineseName: '举手', category: 'gestures', subCategory: 'hand', keywords: ['举手', '停止', 'raised', 'hand'], unicode: 'U+270B', version: '1.0', skinToneSupport: true },
      { emoji: '🤚', name: 'Raised Back of Hand', chineseName: '手背', category: 'gestures', subCategory: 'hand', keywords: ['手背', 'raised', 'back'], unicode: 'U+1F91A', version: '3.0', skinToneSupport: true },
      { emoji: '🖐️', name: 'Hand with Fingers Splayed', chineseName: '张开五指', category: 'gestures', subCategory: 'hand', keywords: ['五指', '张开', 'splayed'], unicode: 'U+1F590', version: '1.0', skinToneSupport: true },
      { emoji: '🖖', name: 'Vulcan Salute', chineseName: '瓦肯举手礼', category: 'gestures', subCategory: 'hand', keywords: ['瓦肯', '星际迷航', 'vulcan', 'salute'], unicode: 'U+1F596', version: '1.0', skinToneSupport: true },
      { emoji: '👋', name: 'Waving Hand', chineseName: '挥手', category: 'gestures', subCategory: 'hand', keywords: ['挥手', '再见', 'waving'], unicode: 'U+1F44B', version: '1.0', skinToneSupport: true },
      { emoji: '💪', name: 'Flexed Biceps', chineseName: '肱二头肌', category: 'gestures', subCategory: 'body', keywords: ['肌肉', '力量', 'flexed', 'biceps'], unicode: 'U+1F4AA', version: '1.0', skinToneSupport: true },
    ];
    
    // 更多类别...（实际应用中包含1500+表情）
    // 这里为了示例展示部分数据，完整数据库应包含所有类别
    
    this.categories = [
      { id: 'smileys', name: '笑脸', icon: '😊', emojis: smileys, count: smileys.length },
      { id: 'gestures', name: '手势', icon: '👍', emojis: gestures, count: gestures.length },
      { id: 'hearts', name: '爱心', icon: '❤️', emojis: [], count: 0 },
      { id: 'celebrations', name: '庆祝', icon: '🎉', emojis: [], count: 0 },
      { id: 'animals', name: '动物', icon: '🐱', emojis: [], count: 0 },
      { id: 'food', name: '食物', icon: '🍎', emojis: [], count: 0 },
      { id: 'sports', name: '运动', icon: '⚽', emojis: [], count: 0 },
      { id: 'nature', name: '自然', icon: '🌍', emojis: [], count: 0 },
      { id: 'transport', name: '交通', icon: '🚗', emojis: [], count: 0 },
      { id: 'symbols', name: '符号', icon: '🎵', emojis: [], count: 0 },
    ];
  }
  
  getAllEmojis(): Emoji[] {
    const all: Emoji[] = [];
    for (const cat of this.categories) {
      all.push(...cat.emojis);
    }
    return all;
  }
  
  getCategories(): EmojiCategory[] {
    return this.categories;
  }
  
  getCategory(id: string): EmojiCategory | undefined {
    return this.categories.find(c => c.id === id);
  }
  
  search(query: string): Emoji[] {
    const q = query.toLowerCase();
    const results: Emoji[] = [];
    const seen = new Set<string>();
    
    for (const emoji of this.getAllEmojis()) {
      if (seen.has(emoji.emoji)) continue;
      
      if (emoji.name.toLowerCase().includes(q) ||
          emoji.chineseName.includes(q) ||
          emoji.keywords.some(k => k.includes(q))) {
        results.push(emoji);
        seen.add(emoji.emoji);
      }
    }
    
    return results;
  }
}

三、搜索与最近使用

3.1 搜索引擎优化

class EmojiSearchEngine {
  private static readonly MAX_RESULTS = 50;
  private debounceTimer: number | null = null;
  private cache: Map<string, Emoji[]> = new Map();
  
  search(emojis: Emoji[], query: string): Emoji[] {
    if (!query.trim()) return [];
    
    const cached = this.cache.get(query.toLowerCase());
    if (cached) return cached;
    
    const results = this.performSearch(emojis, query);
    this.cache.set(query.toLowerCase(), results);
    return results;
  }
  
  private performSearch(emojis: Emoji[], query: string): Emoji[] {
    const q = query.toLowerCase();
    const scored = emojis.map(emoji => {
      let score = 0;
      
      // 完全匹配名称
      if (emoji.name.toLowerCase() === q) score += 100;
      else if (emoji.name.toLowerCase().includes(q)) score += 50;
      
      // 中文名称匹配
      if (emoji.chineseName === q) score += 80;
      else if (emoji.chineseName.includes(q)) score += 40;
      
      // 关键词匹配
      for (const keyword of emoji.keywords) {
        if (keyword === q) score += 60;
        else if (keyword.includes(q)) score += 20;
      }
      
      return { emoji, score };
    });
    
    return scored
      .filter(s => s.score > 0)
      .sort((a, b) => b.score - a.score)
      .slice(0, EmojiSearchEngine.MAX_RESULTS)
      .map(s => s.emoji);
  }
  
  debouncedSearch(emojis: Emoji[], query: string, callback: (results: Emoji[]) => void): void {
    if (this.debounceTimer !== null) {
      clearTimeout(this.debounceTimer);
    }
    this.debounceTimer = setTimeout(() => {
      callback(this.search(emojis, query));
    }, 200);
  }
}

四、UI交互设计

4.1 表情选择器界面

@Component
struct EmojiPickerView {
  @State selectedCategory: string = 'smileys';
  @State searchText: string = '';
  @State searchResults: Emoji[] = [];
  @State recentEmojis: string[] = [];
  @State selectedEmojis: string[] = [];
  
  private database = new EmojiDatabase();
  private searchEngine = new EmojiSearchEngine();
  
  get currentEmojis(): Emoji[] {
    if (this.searchText) return this.searchResults;
    if (this.selectedCategory === 'recent') return this.getRecentEmojiObjects();
    return this.database.getCategory(this.selectedCategory)?.emojis || [];
  }
  
  build() {
    Column() {
      // 搜索栏
      Row() {
        TextInput({ text: this.searchText, placeholder: '搜索表情...' })
          .layoutWeight(1)
          .height(36)
          .backgroundColor('#F5F5F5')
          .borderRadius(18)
          .padding({ left: 12 })
          .onChange((v) => {
            this.searchText = v;
            if (v) {
              this.searchResults = this.searchEngine.search(this.database.getAllEmojis(), v);
            }
          })
      }
      .padding(8)
      .backgroundColor('#FFFFFF')
      
      // 分类标签
      Scroll({ direction: ScrollDirection.Horizontal }) {
        Row({ space: 4 }) {
          // 最近使用
          this.createCategoryTab('🕐', '最近', 'recent')
          // 其他分类
          ForEach(this.database.getCategories(), (cat: EmojiCategory) => {
            this.createCategoryTab(cat.icon, cat.name, cat.id)
          })
        }
        .padding(4)
      }
      .width('100%')
      .height(44)
      .backgroundColor('#FFFFFF')
      
      // 表情网格
      if (this.selectedEmojis.length > 0) {
        this.renderSelectionBar()
      }
      
      Grid() {
        LazyForEach(this.currentEmojis, (emoji: Emoji) => {
          GridItem() {
            Column() {
              Text(emoji.emoji)
                .fontSize(32)
                .onClick(() => {
                  this.selectEmoji(emoji.emoji);
                })
            }
            .width('100%')
            .aspectRatio(1)
            .backgroundColor(this.selectedEmojis.includes(emoji.emoji) ? '#E3F2FD' : 'transparent')
            .borderRadius(8)
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
          }
        }, (emoji: Emoji) => emoji.unicode)
      }
      .columnsTemplate('repeat(6, 1fr)')
      .width('100%')
      .layoutWeight(1)
      .padding(4)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
  
  @Builder
  private createCategoryTab(icon: string, name: string, id: string) {
    Column() {
      Text(icon)
        .fontSize(20)
      Text(name)
        .fontSize(10)
        .fontColor(this.selectedCategory === id ? '#4CAF50' : '#666')
    }
    .padding(8)
    .backgroundColor(this.selectedCategory === id ? '#E8F5E9' : 'transparent')
    .borderRadius(8)
    .onClick(() => { this.selectedCategory = id; })
  }
  
  private selectEmoji(emoji: string): void {
    // 添加到最近使用
    this.recentEmojis = [emoji, ...this.recentEmojis.filter(e => e !== emoji)].slice(0, 30);
    
    // 选中/取消选中
    if (this.selectedEmojis.includes(emoji)) {
      this.selectedEmojis = this.selectedEmojis.filter(e => e !== emoji);
    } else {
      this.selectedEmojis.push(emoji);
    }
  }
  
  private getRecentEmojiObjects(): Emoji[] {
    const all = this.database.getAllEmojis();
    return this.recentEmojis
      .map(e => all.find(emoji => emoji.emoji === e))
      .filter(Boolean) as Emoji[];
  }
}

五、总结

5.1 核心技术要点

1. 大型数据集管理：1500+表情的完整数据管理，支持多维度分类和元数据查询。
2. 分类系统：10个表情类别，支持快速切换和浏览。
3. 搜索引擎：多维度匹配（英文名、中文名、关键词），带评分排序的搜索算法。
4. 最近使用管理：基于LRU（最近最少使用）策略的最近使用列表，持久化存储。
5. 批量复制：多选表情后一键复制到剪贴板。
6. 网格布局优化：使用LazyForEach实现虚拟列表，优化大型数据集的渲染性能。

5.2 扩展方向

1. 常用表情预测：基于使用频率和场景的智能推荐。
2. 表情含义说明：点击表情显示详细含义和使用场景。
3. 自定义收藏夹：用户创建自定义表情收藏分组。
4. 表情组合推荐：根据上下文推荐表情组合。
5. 动态表情：支持Animated Moji等动态表情格式。

5.3 核心代码量统计