应用实例一：分数乘法可视化模型

知识点：理解分数乘法的意义（求一个数的几分之几是多少）。
功能：学生通过滑块设定一个总数（如6个苹果）和一个分数（如2/3）。应用动态演示将总数平均分并在其中标记出对应份数的过程，直观展示“总数 × 分数 = 部分量”的含义。

// FractionMultiplicationModel.ets
@Entry
@Component
struct FractionMultiplicationModel {
  @State total: number = 6;
  @State numerator: number = 2;
  @State denominator: number = 3;
  @State result: number = 4;

  build() {
    Column({ space: 20 }) {
      Text('分数乘法意义演示')
        .fontSize(26)
        .fontWeight(FontWeight.Bold)

      // 控制区
      Row({ space: 10 }) {
        Text('总数:')
        Slider({ value: this.total, min: 1, max: 12, step: 1 })
          .width(100)
          .onChange((value: number) => {
            this.total = value;
            this.calculate();
          })
        Text(`${this.total}`)
      }
      Row({ space: 10 }) {
        Text('分数:')
        Slider({ value: this.numerator, min: 1, max: 5, step: 1 })
          .width(60)
          .onChange((value: number) => {
            this.numerator = value;
            this.calculate();
          })
        Text(`${this.numerator}/${this.denominator}`)
        Slider({ value: this.denominator, min: 2, max: 6, step: 1 })
          .width(60)
          .onChange((value: number) => {
            this.denominator = value;
            this.calculate();
          })
      }

      // 可视化区域
      Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center }) {
        ForEach(new Array(this.total).fill(0), (item: number, index: number) => {
          Stack() {
            Circle().width(50).height(50).fill('#BBDEFB') // 背景
            if (index < this.result) {
              Circle().width(50).height(50).fill('#1976D2') // 填充部分
              Text('🍎').fontSize(24)
            } else {
              Text('⚪').fontSize(24)
            }
          }.margin(5)
        })
      }
      .width('90%')
      .height(200)

      Text(`${this.total} × ${this.numerator}/${this.denominator} = ${this.result}`)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .fontColor('#E91E63')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding(20)
  }

  calculate() {
    // 简单整数运算演示
    this.result = Math.floor(this.total * this.numerator / this.denominator);
  }
}