HarmonyOS NEXT Development Case: Randomized 9-Cell Grid

This article demonstrates a lottery system implementation using HarmonyOS NEXT's reactive programming capabilities and component-based architecture. The solution features a dynamic 9-cell grid with configurable prizes and smooth animation effects.

Implementation Highlights

1. Reactive Data Model

// Observable Prize class with traceable properties
@ObservedV2
class Prize {
  @Trace title: string    // Prize title with reactive tracking
  @Trace color: string    // Color property for UI styling
  @Trace description: string // Prize description

  constructor(title: string, color: string, description: string = "") {
    this.title = title
    this.color = color
    this.description = description
  }
}

2. State Management Components

// Prize editor component with shared state
@Component
struct MyPrizeUpdate {
  @Consume selectedIndex: number      // Currently selected index
  @Consume private selectionOrder: number[] // Lottery sequence
  @Consume private prizeArray: Prize[]     // Prize collection

  build() {
    Column({ space: 20 }) {
      // UI elements for editing prize properties
    }
  }
}

3. Core Lottery Logic

@Entry
@Component
struct LotteryPage {
  @Provide private selectedIndex: number = 0
  private isAnimating: boolean = false
  @Provide private selectionOrder: number[] = [0, 1, 2, 5, 8, 7, 6, 3]
  // ...other properties

  // Multi-stage animation control
  startLottery(speed: number = 500) {
    // Acceleration phase
  }

  runAtConstantSpeed() {
    // Constant-speed phase with random duration
  }

  slowDown(speed = 50) {
    // Deceleration phase with result display
  }
}

Key Features

Dynamic Grid Layout

Flex({ wrap: FlexWrap.Wrap }) {
  ForEach(this.prizeArray, (item: Prize, index: number) => {
    // Responsive cell rendering with click effects
  })
}

Three-Phase Animation
Acceleration: Gradual speed increase (500ms → 50ms)
Constant Speed: Random duration (40ms + n×50ms)
Deceleration: Progressive slowdown until stop
Interactive Configuration

TextInput({ text: this.prizeArray[...].title })
  .onChange((value) => {
    // Directly update reactive properties
  })

Visual Feedback
Dynamic color schemes
Click effects with scaling
Real-time selection highlighting
Shadow effects for depth perception

Complete Implementation

View full translated code with English comments on GitHub

Conclusion

This implementation showcases HarmonyOS NEXT's powerful capabilities in:

Reactive state management (@ObservedV2/@trace)
Component-based architecture
Smooth animation control
Responsive UI updates

The solution can be extended with additional features like network synchronization or prize probability configurations, demonstrating the flexibility of HarmonyOS application development.

zhongcx @zhongcx