6. 四色太阳画板（对应：「4」 四个太阳）

功能介绍：
基于《四个太阳》的创意绘画工具。Canvas画布上默认画着一个太阳。学生可以通过调色盘选择“绿”（画春天的太阳）、“金黄”（画夏天的太阳）、“红”（画冬天的太阳）等颜色，为太阳填色。通过绘画操作，培养学生的想象力，理解文中“我画了个…的太阳”的句式含义。
应用功能：

1. 四色太阳画板：
   主题：《四个太阳》创意绘画工具
   教育价值：培养学生的想象力，理解文中"我画了个…的太阳"的句式含义
2. 绘画功能：
   Canvas画布：300x300像素的画布
   太阳绘制：包含太阳主体和8条光芒
   实时更新：选择颜色后太阳立即更新颜色
3. 颜色选择器：
   绿色：春天的太阳，对应"我画了个绿绿的太阳，挂在春天的天空。"
   金黄：夏天的太阳，对应"我画了个金黄的太阳，挂在夏天的天空。"
   红色：冬天的太阳，对应"我画了个红红的太阳，挂在冬天的天空。"
   蓝色：秋天的太阳，对应"我画了个蓝蓝的太阳，挂在秋天的天空。"
4. 交互功能：
   颜色选择：点击颜色圆形按钮选择不同颜色
   视觉反馈：选中的颜色会有黑色边框高亮
   实时预览：太阳颜色实时更新
   季节描述：显示对应的季节和课文句子
5. 技术实现：
   Canvas组件：使用Canvas API绘制太阳
   状态管理：使用@State管理选中的颜色
   ForEach：动态生成颜色选择按钮
   事件处理：点击事件更新颜色状态
6. 教育意义：
   帮助学生理解《四个太阳》课文内容
   通过互动绘画培养创造力
   让学生感受不同颜色与季节的联系
   强化"我画了个…的太阳"的句式学习
   

interface ColorOption {
  name: string;
  color: string;
  season: string;
  description: string;
}

@Entry
@Component
struct FourSun画板 {
  @State selectedColor: string = '#FFEB3B'; // 默认黄色
  @State sunSize: number = 150;
  
  private colorOptions: ColorOption[] = [
    {
      name: '绿色',
      color: '#4CAF50',
      season: '春天',
      description: '我画了个绿绿的太阳，挂在春天的天空。'
    },
    {
      name: '金黄',
      color: '#FFC107',
      season: '夏天',
      description: '我画了个金黄的太阳，挂在夏天的天空。'
    },
    {
      name: '红色',
      color: '#F44336',
      season: '冬天',
      description: '我画了个红红的太阳，挂在冬天的天空。'
    },
    {
      name: '蓝色',
      color: '#2196F3',
      season: '秋天',
      description: '我画了个蓝蓝的太阳，挂在秋天的天空。'
    }
  ];

  build() {
    Column({ space: 20 }) {
      Text('四色太阳画板')
        .fontSize(36)
        .fontWeight(FontWeight.Bold)
        .fontColor('#333333')
        .margin({ top: 30 })

      // 太阳展示
      Column() {
        Stack() {
          // 太阳主体
          Column()
            .width(100)
            .height(100)
            .borderRadius(50)
            .backgroundColor(this.selectedColor)
          
          // 太阳光芒 - 直接使用硬编码的位置
          Column()
            .width(3)
            .height(20)
            .backgroundColor(this.selectedColor)
            .position({ x: 110, y: 50 })
          
          Column()
            .width(3)
            .height(20)
            .backgroundColor(this.selectedColor)
            .position({ x: 87, y: 27 })
          
          Column()
            .width(3)
            .height(20)
            .backgroundColor(this.selectedColor)
            .position({ x: 50, y: 10 })
          
          Column()
            .width(3)
            .height(20)
            .backgroundColor(this.selectedColor)
            .position({ x: 13, y: 27 })
          
          Column()
            .width(3)
            .height(20)
            .backgroundColor(this.selectedColor)
            .position({ x: -10, y: 50 })
          
          Column()
            .width(3)
            .height(20)
            .backgroundColor(this.selectedColor)
            .position({ x: 13, y: 73 })
          
          Column()
            .width(3)
            .height(20)
            .backgroundColor(this.selectedColor)
            .position({ x: 50, y: 90 })
          
          Column()
            .width(3)
            .height(20)
            .backgroundColor(this.selectedColor)
            .position({ x: 87, y: 73 })
        }
        .width(150)
        .height(150)
      }
      .width('90%')
      .height(300)
      .alignItems(HorizontalAlign.Center)

      // 颜色选择器
      Text('选择颜色：')
        .fontSize(18)
        .fontColor('#333333')
        .margin({ top: 10 })

      Row({ space: 20 }) {
        ForEach(this.colorOptions, (option: ColorOption, index: number) => {
          Column() {
            Column()
              .width(60)
              .height(60)
              .backgroundColor(option.color)
              .borderRadius(30)
              .borderWidth(2)
              .borderColor(this.selectedColor === option.color ? '#333333' : 'transparent')
              .onClick(() => {
                this.selectedColor = option.color;
              })
            Text(option.name)
              .fontSize(14)
              .fontColor('#666666')
              .margin({ top: 5 })
          }
        }, (option: ColorOption) => option.color)
      }
      .width('90%')
      .justifyContent(FlexAlign.Center)

      // 季节描述
      Text('对应的季节：')
        .fontSize(18)
        .fontColor('#333333')
        .margin({ top: 20 })

      Text(this.colorOptions.find(option => option.color === this.selectedColor)?.description || '')
        .fontSize(16)
        .fontColor('#666666')
        .width('90%')
        .textAlign(TextAlign.Center)
        .margin({ top: 10 })

      // 提示信息
      Text('选择不同的颜色，为太阳填色，感受四季的变化')
        .fontSize(16)
        .fontColor('#999999')
        .margin({ top: 20, bottom: 30 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}