@Link 父子组件双向绑定：MoodSelector 实战

前言在 ArkUI 中Link装饰器实现了父子组件之间的双向绑定子组件修改数据后父组件自动更新。“海风日记“的 MoodSelector 组件是 Link 最典型的应用场景。本文将从源码出发深入讲解 Link 的机制和使用。一、颜色模块化设计// Colors.ets — 颜色令牌体系 export const COLOR_PRIMARY #F5A623 export const COLOR_PRIMARY_LIGHT #FFBE45 export const COLOR_PRIMARY_DEEP #D4900A export const COLOR_BG_PAGE #FAFAF7 export const COLOR_CARD_BG #FFFEF9 export const COLOR_PAPER_BG #FFF9F0 export const COLOR_TEXT_MAIN #2D2926 export const COLOR_TEXT_SECONDARY #9B8F84 export const COLOR_TEXT_HINT #BEB8B2 export const COLOR_AMBER #C8956A export const COLOR_DIVIDER #F0EAE0 export const COLOR_TAB_ACTIVE #F5A623 export const COLOR_TAB_INACTIVE #C0BAB4 export const COLOR_HEADER_TOP #FFD4A0 export const COLOR_HEADER_BOTTOM #FAFAF7二、Dimension 尺寸规范// Dimensions.ets — 尺寸间距令牌 export const PAGE_PADDING 16 export const CARD_RADIUS 16 export const CARD_RADIUS_SM 12 export const BTN_RADIUS_FULL 999 export const TAG_RADIUS 10 export const INPUT_RADIUS 12 export const CARD_MOOD_STRIP 3.5 export const CARD_PADDING 12 export const TAB_BAR_HEIGHT 83 export const NAV_BAR_HEIGHT 44 export const HEADER_BAND_HEIGHT 100 export const WAVE_HEIGHT 24 export const FONT_DATE_HERO 80 export const FONT_DATE_MD 52 export const FONT_BODY 16 export const FONT_CARD_BODY 13 export const FONT_TAG 11 export const FONT_TAB 10三、hilog 日志系统import { hilog } from kit.PerformanceAnalysisKit const TAG EntryAbility const DOMAIN 0xFF00 hilog.info(DOMAIN, TAG, 海风日记 onCreate) hilog.error(DOMAIN, TAG, loadContent failed: ${JSON.stringify(err)})四、ohos.router 深度使用// pushUrl 跳转 router.pushUrl({ url: pages/diary/DiaryDetailPage, params: { diaryId: item.id } }) // replaceUrl 替换 router.replaceUrl({ url: pages/Index }) // back 返回 router.back() // 获取参数 const params router.getParams() as Recordstring, string五、总结本文通过“海风日记“的实战代码深入讲解了鸿蒙开发中的核心知识点Link 双向绑定MoodSelector 实战颜色模块化Color Tokens 设计尺寸规范Dimension 令牌hilog 日志PerformanceAnalysisKitrouter 路由深度使用指南下一篇文章将深入讲解ArkTS 严格模式敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Link 装饰器文档ohos.router APIhilog 日志文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区