当前位置：首页 > news >正文

MoodSelector 心情组件：@Link 双向绑定实现父子通信

news 2026/7/19 21:53:52

前言

在“海风日记“的写日记功能中，心情选择器是核心交互组件之一。用户可以从 5 种心情和 5 种天气中选择，选择结果会实时反映在 UI 上。

MoodSelector组件通过@Link装饰器实现与父组件的双向绑定，子组件修改选择项后，父组件的状态自动更新。本文将从源码出发，深入讲解 @Link 的完整用法。

一、@Link 双向绑定

1.1 子组件定义

@Component export struct MoodSelector { @Link selectedMood: number // 双向绑定心情 @Link selectedWeather: number // 双向绑定天气 build() { Column() { // 心情选项 ForEach(MOOD_OPTIONS, (item, index) => { Text(item.emoji) .onClick(() => { this.selectedMood = index }) }) // 天气选项 ForEach(WEATHER_OPTIONS, (item, index) => { Text(item.emoji) .onClick(() => { this.selectedWeather = index }) }) } } }

1.2 父组件使用

@Entry @Component struct WriteDiaryPage { @State selectedMood: number = 3 // 默认开心 @State selectedWeather: number = 0 // 默认晴天 build() { MoodSelector({ selectedMood: this.selectedMood, // 传入 @State selectedWeather: this.selectedWeather // 传入 @State }) } }

二、心情选项配置

2.1 数据定义

const MOOD_OPTIONS: MoodOption[] = [ { emoji: '😢', label: '难过' }, { emoji: '😕', label: '低落' }, { emoji: '😐', label: '平静' }, { emoji: '🙂', label: '还不错' }, { emoji: '😊', label: '开心' }, ] const WEATHER_OPTIONS: WeatherOption[] = [ { emoji: '☀️', label: '晴' }, { emoji: '⛅', label: '多云' }, { emoji: '🌧️', label: '雨' }, { emoji: '🌬️', label: '大风' }, { emoji: '❄️', label: '雪' }, ]

2.2 心情选择 UI

Row({ space: 8 }) { ForEach(MOOD_OPTIONS, (item: MoodOption, index: number) => { Column({ space: 4 }) { Text(item.emoji) .fontSize(20) .width(40).height(40).textAlign(TextAlign.Center) .borderRadius(20) .backgroundColor( this.selectedMood === index ? 'rgba(255,255,255,0.90)' : 'rgba(255,255,255,0.55)' ) .border({ width: this.selectedMood === index ? 1.5 : 0, color: 'rgba(245,166,35,0.5)' }) .shadow(this.selectedMood === index ? { radius: 8, color: 'rgba(245,166,35,0.25)' } : { radius: 0, color: 'transparent' } ) Text(item.label) .fontSize(9.5) .fontColor(this.selectedMood === index ? '#D4900A' : COLOR_TEXT_HINT) .fontWeight(this.selectedMood === index ? FontWeight.Bold : FontWeight.Normal) } .onClick(() => { this.selectedMood = index }) }) }

三、@State 与 @Link 的对比

3.1 装饰器对比

装饰器	数据流向	声明位置	修改权限
`@State`	内部状态	组件内部	仅本组件
`@Prop`	父→子（单向）	子组件	不可同步回父组件
`@Link`	双向绑定	子组件	可同步回父组件

3.2 选择指南

子组件需要修改父组件数据 → 使用@Link
子组件只展示父组件数据 → 使用@Prop或普通属性
数据只在组件内部使用→ 使用@State

四、天气选择 UI

Row({ space: 8 }) { ForEach(WEATHER_OPTIONS, (item: WeatherOption, index: number) => { Row({ space: 4 }) { Text(item.emoji).fontSize(12) Text(item.label).fontSize(12) .fontColor(this.selectedWeather === index ? '#C8800A' : COLOR_AMBER) .fontWeight(this.selectedWeather === index ? FontWeight.Bold : FontWeight.Normal) } .padding({ left: 10, right: 10, top: 5, bottom: 5 }) .borderRadius(14) .backgroundColor( this.selectedWeather === index ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.45)' ) .border({ width: 1, color: this.selectedWeather === index ? 'rgba(245,166,35,0.35)' : 'rgba(245,166,35,0.15)' }) .onClick(() => { this.selectedWeather = index }) }) }

五、完整组件布局

Column({ space: 0 }) { // 心情选择 Text('今天的心情') .fontSize(11).fontColor(COLOR_AMBER).fontWeight(FontWeight.Medium) .margin({ bottom: 8 }) // 心情 Row this.moodRow() // 天气 Row this.weatherRow() } .width('100%') .alignItems(HorizontalAlign.Start)