HarmonyOS6 RcIcon 组件最佳实践与性能优化 | 极客日志

TypeScript大前端

HarmonyOS6 RcIcon 组件最佳实践与性能优化

本文深入探讨了 HarmonyOS6 中 RcIcon 组件的最佳实践与性能优化。内容涵盖底部导航、工具栏、列表装饰等八大实战场景，演示了如何正确使用图标组件构建界面。重点讲解了避免过度渲染、LazyForEach 列表优化、动画并发控制及内存泄漏预防等关键技术点。此外还包含可访问性支持、跨平台适配（暗黑模式、多语言）、调试技巧及常见错误解决方案。通过类型安全使用和合理的性能策略，开发者可提升应用流畅度与用户体验。

remedios发布于 2026/3/280 浏览

HarmonyOS6 RcIcon 组件最佳实践与性能优化

在 HarmonyOS 应用开发中，图标组件是构建用户界面不可或缺的元素。一个设计良好的图标库不仅能统一视觉语言，还能显著提升开发效率。本文将深入探讨 RcIcon 组件在实际场景中的应用技巧、性能优化策略以及常见问题的解决方案。

核心特性概览

该组件库提供丰富的基础图标资源，涵盖导航、状态、操作等常用场景。遵循统一的色彩体系和设计规范，支持动态颜色填充和主题适配。内置工具方法可简化样式配置，每个模块均配有详细的使用说明。

实战应用场景

底部导航栏

底部导航是移动端最常见的布局之一。使用 RcIcon 时，建议通过激活状态切换图标风格（实心/线型），并配合颜色变化提供清晰的视觉反馈。

import { RcIcon, IconName } from "rchoui"

interface TabItem {
  name: string
  icon: string
  iconOutline: string
}

@Entry
@Component
struct RcIconTab {
  @State activeIndex: number = 0
  private tabItems: TabItem[] = [
    { name: '首页', icon: IconName.HOME, iconOutline: IconName.HOME_OUTLINE },
    { name: '发现', icon: IconName.COMPASS, iconOutline: IconName.COMPASS_OUTLINE },
    { name: '消息', icon: IconName.MESSAGE_CIRCLE, : . },
    { : , : ., : . }
  ]

  () {
    () {
      (.,  {
        ({ :  }) {
          ({
            : . === index ? item. : item.,
            : ,
            : . === index ?  : ,
            :  {
              . = index
            }
          })
          (item.).().(
            . === index ?  : 
          )
        }.().()
      })
    }
    .().().()
  }
}

interface ToolsItem {
  id: string
  name: string
}

@Component
struct ToolbarExample {
  @State selectedTool: string = ''
  private tools: ToolsItem[] = [
    { id: 'edit', name: IconName.EDIT },
    { id: 'copy', name: IconName.COPY },
    { id: 'trash', name: IconName.TRASH },
    { id: 'share', name: IconName.SHARE }
  ]

  build() {
    Row({ space: 16 }) {
      ForEach(this.tools, (tool: ToolsItem) => {
        RcIcon({
          name: tool.name,
          iconSize: 20,
          color: this.selectedTool === tool.id ? '#1890ff' : '#666666',
          onIconClick: () => {
            this.selectedTool = tool.id
            this.handleToolClick(tool.id)
          }
        })
      })
    }
    .padding(12).backgroundColor('#f5f5f5').borderRadius(8)
  }

  handleToolClick(toolId: string) {
    console.log(`工具 ${toolId} 被点击`)
  }
}

interface ListItem {
  id: string
  title: string
  icon: string
  status: 'success' | 'warning' | 'error' | 'info'
}

@Component
struct ListExample {
  private items: ListItem[] = [
    { id: '1', title: '任务已完成', icon: IconName.CHECKMARK_CIRCLE, status: 'success' },
    { id: '2', title: '待处理事项', icon: IconName.ALERT_CIRCLE, status: 'warning' },
    { id: '3', title: '操作失败', icon: IconName.CLOSE_CIRCLE, status: 'error' },
    { id: '4', title: '通知消息', icon: IconName.INFO, status: 'info' }
  ]

  build() {
    List({ space: 12 }) {
      ForEach(this.items, (item: ListItem) => {
        ListItem() {
          Row({ space: 12 }) {
            RcIcon({ name: item.icon, iconSize: 20, color: this.getStatusColor(item.status) })
            Text(item.title).fontSize(16).layoutWeight(1)
            RcIcon({ name: IconName.CHEVRON_RIGHT, iconSize: 16, color: '#cccccc' })
          }
          .width('100%').padding(16).backgroundColor('#ffffff').borderRadius(8)
        }
      })
    }
    .padding(16)
  }

  getStatusColor(status: string): ResourceColor {
    const colorMap = {
      'success': '#52c41a',
      'warning': '#faad14',
      'error': '#ff4d4f',
      'info': '#1890ff'
    }
    return colorMap[status] || '#666666'
  }
}

@Component
struct InputExample {
  @State searchText: string = ''
  @State showClear: boolean = false

  build() {
    Row() {
      // 前缀符号
      RcIcon({ name: IconName.SEARCH, iconSize: 18, color: '#999999' }).margin({ left: 12 })
      
      // 输入框
      TextInput({ placeholder: '搜索内容', text: this.searchText })
        .layoutWeight(1)
        .backgroundColor(Color.Transparent)
        .padding({ left: 8, right: 8 })
        .onChange((value: string) => {
          this.searchText = value
          this.showClear = value.length > 0
        })
      
      // 后缀清除按钮
      if (this.showClear) {
        RcIcon({
          name: IconName.CLOSE_CIRCLE,
          iconSize: 16,
          color: '#cccccc',
          onIconClick: () => {
            this.searchText = ''
            this.showClear = false
          }
        }).margin({ right: 12 })
      }
    }
    .width('100%').height(40).backgroundColor('#f5f5f5').borderRadius(20)
  }
}

@Component
struct LoadingExample {
  @State isLoading: boolean = false
  @State rotationAngle: number = 0

  build() {
    Column({ space: 16 }) {
      if (this.isLoading) {
        RcIcon({
          name: IconName.LOADER_OUTLINE,
          iconSize: 32,
          color: '#1890ff',
          iconAnimation: { duration: 1000, curve: Curve.Linear, iterations: -1 }
        })
        .rotate({ angle: this.rotationAngle })
        .onAppear(() => {
          this.rotationAngle = 360
        })
        Text('加载中...').fontSize(14).fontColor('#666666')
      } else {
        RcIcon({ name: IconName.CHECKMARK_CIRCLE, iconSize: 32, color: '#52c41a' })
        Text('加载完成').fontSize(14).fontColor('#52c41a')
      }
      Button(this.isLoading ? '停止' : '开始加载').onClick(() => {
        this.isLoading = !this.isLoading
        if (!this.isLoading) {
          this.rotationAngle = 0
        }
      })
    }
  }
}

@Component
struct EmptyStateExample {
  @Prop emptyType: 'noData' | 'noNetwork' | 'error' = 'noData'

  build() {
    Column({ space: 20 }) {
      RcIcon({ name: this.getEmptyIcon(), iconSize: 80, color: '#cccccc' })
      Text(this.getEmptyText()).fontSize(16).fontColor('#666666')
      if (this.emptyType === 'error') {
        Button('重新加载').onClick(() => {
          // 重新加载逻辑
        })
      }
    }
    .width('100%').height('100%').justifyContent(FlexAlign.Center).backgroundColor('#f5f5f5')
  }

  getEmptyIcon(): string {
    const iconMap = {
      'noData': IconName.FILE_OUTLINE,
      'noNetwork': IconName.WIFI_OFF_OUTLINE,
      'error': IconName.ALERT_TRIANGLE_OUTLINE
    }
    return iconMap[this.emptyType]
  }

  getEmptyText(): string {
    const textMap = {
      'noData': '暂无数据',
      'noNetwork': '网络连接失败',
      'error': '加载失败'
    }
    return textMap[this.emptyType]
  }
}

@Component
struct RatingExample {
  @State rating: number = 0
  private maxRating: number = 5

  build() {
    Row({ space: 8 }) {
      ForEach(Array.from({ length: this.maxRating }), (_, index) => {
        RcIcon({
          name: index < this.rating ? IconName.STAR : IconName.STAR_OUTLINE,
          iconSize: 24,
          color: index < this.rating ? '#faad14' : '#d9d9d9',
          onIconClick: () => {
            this.rating = index + 1
          }
        })
      })
    }
  }
}

@Component
struct TabsExample {
  @State activeTab: number = 0
  private tabs = [
    { title: '推荐', icon: IconName.HOME },
    { title: '关注', icon: IconName.HEART },
    { title: '热门', icon: IconName.FLASH }
  ]

  build() {
    Column() {
      // 标签页头部
      Row() {
        ForEach(this.tabs, (tab, index) => {
          Column({ space: 4 }) {
            RcIcon({
              name: tab.icon,
              iconSize: 20,
              color: this.activeTab === index ? '#1890ff' : '#666666'
            })
            Text(tab.title).fontSize(14).fontColor(
              this.activeTab === index ? '#1890ff' : '#666666'
            )
          }
          .layoutWeight(1).padding(12).onClick(() => {
            this.activeTab = index
          })
        })
      }
      .width('100%').backgroundColor('#ffffff')
      
      // 标签页内容区
      if (this.activeTab === 0) {
        Text('推荐内容')
      } else if (this.activeTab === 1) {
        Text('关注内容')
      } else {
        Text('热门内容')
      }
    }
  }
}

// ❌ 不推荐：每次都重新创建
@Component
struct BadExample {
  @State count: number = 0
  build() {
    Column() {
      RcIcon({ name: IconName.HOME, iconSize: 20 })
      RcIcon({ name: IconName.SEARCH, iconSize: 20 })
      RcIcon({ name: IconName.PERSON, iconSize: 20 })
      Text(this.count.toString())
    }
  }
}

// ✅ 推荐：使用@Reusable 优化
@Reusable
@Component
struct IconItem {
  @Param iconName: string = ''
  build() {
    RcIcon({ name: this.iconName, iconSize: 20 })
  }
}

@Component
struct GoodExample {
  @State count: number = 0
  build() {
    Column() {
      IconItem({ iconName: IconName.HOME })
      IconItem({ iconName: IconName.SEARCH })
      IconItem({ iconName: IconName.PERSON })
      Text(this.count.toString())
    }
  }
}

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = []
  private data: string[] = []

  getData(index: number): string {
    return this.data[index]
  }

  totalCount(): number {
    return this.data.length
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    this.listeners.push(listener)
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const index = this.listeners.indexOf(listener)
    if (index >= 0) {
      this.listeners.splice(index, 1)
    }
  }
}

@Component
struct OptimizedListExample {
  private dataSource: BasicDataSource = new BasicDataSource()

  build() {
    List() {
      LazyForEach(this.dataSource, (item: string, index: number) => {
        ListItem() {
          Row({ space: 12 }) {
            RcIcon({ name: IconName.FILE, iconSize: 20, color: '#666666' })
            Text(item).fontSize(16)
          }
          .padding(16)
        }
      }, (item: string) => item)
    }
  }
}

@Component
struct AnimationExample {
  @State visibleIcons: number = 5
  private maxIcons: number = 100

  build() {
    Column() {
      // 只为可见的符号添加动画
      ForEach(Array.from({ length: Math.min(this.visibleIcons, this.maxIcons) }), (_, index) => {
        RcIcon({
          name: IconName.STAR,
          iconSize: 20,
          iconAnimation: { duration: 300, delay: index * 50 }
        })
      })
    }
  }
}

@Component
struct LazyLoadExample {
  @State showDetails: boolean = false

  build() {
    Column({ space: 12 }) {
      // 始终显示的关键符号
      RcIcon({ name: IconName.HOME, iconSize: 24 })
      Button('显示详情').onClick(() => {
        this.showDetails = true
      })
      
      // 延迟加载的符号
      if (this.showDetails) {
        Row({ space: 8 }) {
          RcIcon({ name: IconName.EDIT, iconSize: 20 })
          RcIcon({ name: IconName.TRASH, iconSize: 20 })
          RcIcon({ name: IconName.SHARE, iconSize: 20 })
        }
      }
    }
  }
}

@Component
struct MemoryOptimizedExample {
  @State rotationAngle: number = 0
  private animationTimer?: number

  aboutToAppear() {
    this.startAnimation()
  }

  aboutToDisappear() {
    // 清理定时器
    if (this.animationTimer) {
      clearInterval(this.animationTimer)
      this.animationTimer = undefined
    }
  }

  startAnimation() {
    this.animationTimer = setInterval(() => {
      this.rotationAngle = (this.rotationAngle + 10) % 360
    }, 50)
  }

  build() {
    RcIcon({ name: IconName.SYNC, iconSize: 30 }).rotate({ angle: this.rotationAngle })
  }
}

RcIcon({ name: IconName.CLOSE }).accessibilityText('关闭按钮').accessibilityDescription('点击关闭当前窗口')

@State isFocused: boolean = false
RcIcon({ name: IconName.BUTTON, color: this.isFocused ? '#0066cc' : '#0080ff' })
  .focusable(true)
  .onFocus(() => {
    this.isFocused = true
  })
  .onBlur(() => {
    this.isFocused = false
  })

Stack() {
  RcIcon({ name: IconName.SMALL, iconSize: 16 })
}.width(44).height(44).onClick(() => {
  // 点击处理
})

@State screenDensity: number = display.getDefaultDisplaySync().densityDPI / 160
RcIcon({ name: IconName.LOGO, iconSize: 24 * this.screenDensity })

@StorageLink('colorMode') colorMode: ThemeColorMode = ThemeColorMode.LIGHT
RcIcon({ name: IconName.THEME, color: this.colorMode === ThemeColorMode.DARK ? '#ffffff' : '#000000' })

@StorageLink('isRTL') isRTL: boolean = false
RcIcon({ name: this.isRTL ? IconName.ARROW_LEFT : IconName.ARROW_RIGHT, iconSize: 20 })

@State showDebugInfo: boolean = BuildProfile.DEBUG
RcIcon({ name: IconName.TEST }).border({ width: this.showDebugInfo ? 1 : 0, color: '#ff0000' })
if (this.showDebugInfo) {
  Text('IconName.TEST').fontSize(10).fontColor('#ff0000')
}

@Component
struct PerformanceMonitor {
  @State renderCount: number = 0

  aboutToAppear() {
    this.renderCount++
    console.log(`组件渲染次数：${this.renderCount}`)
  }

  build() {
    RcIcon({ name: IconName.MONITOR })
  }
}

// ❌ 错误：拼写错误
RcIcon({ name: 'icon-houi_hom' })

// ✅ 正确：使用常量避免拼写错误
RcIcon({ name: IconName.HOME })

// ❌ PNG 图片不支持 fillColor
RcIcon({ name: 'https://example.com/logo.png', color: '#ff0000' })

// ✅ 使用 SVG 或字体符号
RcIcon({ name: IconName.LOGO, color: '#ff0000' })

// ❌ 100 个符号同时动画
ForEach(Array.from({ length: 100 }), () => {
  RcIcon({ name: IconName.STAR, iconAnimation: {...} })
})

// ✅ 限制同时动画数量
ForEach(Array.from({ length: 100 }), (_, index) => {
  RcIcon({ name: IconName.STAR, iconAnimation: index < 10 ? {...} : undefined })
})

// ❌ 忘记清理定时器
private startRotation() {
  setInterval(() => {
    this.angle += 10
  }, 50)
}

// ✅ 在生命周期中清理
private timer?: number
aboutToAppear() {
  this.timer = setInterval(() => {
    this.angle += 10
  }, 50)
}
aboutToDisappear() {
  if (this.timer) {
    clearInterval(this.timer)
  }
}

import { systemCapability } from '@ohos.ability.ability'
if (systemCapability.querySystemCapability('SystemCapability.ArkUI.ArkUI.Full')) {
  // 使用新 API
  RcIcon({ name: IconName.NEW_FEATURE, iconAnimation: {...} })
} else {
  // 降级处理
  RcIcon({ name: IconName.NEW_FEATURE })
}

@State supportsAnimation: boolean = true
RcIcon({ name: IconName.LOADER, iconAnimation: this.supportsAnimation ? { duration: 1000, iterations: -1 } : undefined })