fix api9

entry/src/main/ets/pages/Index.ets

@@ -8,7 +8,7 @@ struct Index {
 
   aboutToAppear() {
     // this.controller.likeComponentSize = 150;
-    // this.controller.animationDuration=1000;
+    // this.controller.animationDuration=5000;
   }
 
   build() {
@@ -21,8 +21,23 @@ struct Index {
             }
           )
         }
+        GridItem() {
+          LikeButton(
+            {
+              controller: this.controller
+            }
+          )
+        }
+        GridItem() {
+          LikeButton(
+            {
+              controller: this.controller
+            }
+          )
+        }
       }
       .columnsTemplate('1fr 1fr 1fr')
+      .rowsTemplate('1fr 1fr 1fr')
       .columnsGap(10)
       .rowsGap(10)
       .width('100%')

like_button/src/main/ets/common/Model.ets

@@ -1,67 +1,32 @@
 export class BubblesColor {
-  private _dotPrimaryColor: ResourceColor;
-  private _dotSecondaryColor: ResourceColor;
-  private _dotThirdColor: ResourceColor;
-  private _dotLastColor: ResourceColor;
-
   constructor(value: {
     dotPrimaryColor: ResourceColor,
     dotSecondaryColor: ResourceColor,
     dotThirdColor?: ResourceColor,
-    dotLastColor?: ResourceColor
+    dotLastColor?: ResourceColor,
   }) {
-    this._dotPrimaryColor = value.dotPrimaryColor;
-    this._dotSecondaryColor = value.dotSecondaryColor;
-    if (value.dotThirdColor == undefined) {
-      this._dotThirdColor = value.dotPrimaryColor;
-    }
-    else {
-      this._dotThirdColor = value.dotThirdColor;
-    }
-
-    if (value.dotLastColor == undefined) {
-      this._dotLastColor = value.dotSecondaryColor;
-    }
-    else {
-      this._dotLastColor = value.dotLastColor;
-    }
-  }
-
-  dotPrimaryColor(): ResourceColor {
-    return this._dotPrimaryColor;
+    this.dotPrimaryColor = value.dotPrimaryColor;
+    this.dotSecondaryColor = value.dotSecondaryColor;
+    this.dotThirdColor = value.dotThirdColor == undefined ? value.dotPrimaryColor : value.dotThirdColor;
+    this.dotLastColor = value.dotLastColor == undefined ? value.dotSecondaryColor : value.dotLastColor;
   }
 
-  dotSecondaryColor(): ResourceColor {
-    return this._dotSecondaryColor;
-  }
-
-  dotThirdColor(): ResourceColor {
-    return this._dotThirdColor;
-  }
-
-  dotLastColor(): ResourceColor {
-    return this._dotLastColor;
-  }
+  dotPrimaryColor: ResourceColor;
+  dotSecondaryColor: ResourceColor;
+  dotThirdColor: ResourceColor;
+  dotLastColor: ResourceColor;
 }
 
 export class CircleColor {
-  private _start: ResourceColor;
-  private _end: ResourceColor;
-
   constructor(value: {
     start: ResourceColor,
-    end: ResourceColor
+    end: ResourceColor,
   }) {
-    this._start = value.start;
-    this._end = value.end;
+    this.start = value.start;
+    this.end = value.end;
   }
 
-  start(): ResourceColor {
-    return this._start;
-  }
-
-  end(): ResourceColor {
-    return this._end;
-  }
+  start: ResourceColor;
+  end: ResourceColor;
 }
 

like_button/src/main/ets/components/LikeButton.ets

@@ -17,7 +17,7 @@ export struct LikeButton {
   @Builder
   buildLikeComponent() {
     Image($r('app.media.favorite'))
-      .fillColor(this.controller.isLiked ? Color.Pink : Color.Gray)
+    .fillColor(this.controller.isLiked ? Color.Pink : Color.Gray)
   }
 
   aboutToAppear() {
@@ -38,21 +38,30 @@ export struct LikeButton {
   }
 
   build() {
-    Stack({ alignContent: Alignment.Center }) {
+    Stack({
+      // api9 Alignment.center, not work well
+      alignContent: Alignment.TopStart
+    }) {
       BubblesPainter(
         { bubblesSize: this.controller.bubblesSize,
           bubblesColor: this.controller.bubblesColor,
           currentProgress: this.controller.bubblesProgress,
         }
-      )
+      ).position({
+        x: -(this.controller.bubblesSize - this.controller.likeComponentSize) / 2.0,
+        y: -(this.controller.bubblesSize - this.controller.likeComponentSize) / 2.0,
+      })
       CirclePainter(
         {
           circleColor: this.controller.circleColor,
           circleSize: this.controller.circleSize,
           innerCircleRadiusProgress: this.controller.innerCircleRadiusProgress,
           outerCircleRadiusProgress: this.controller.outerCircleRadiusProgress,
         }
-      )
+      ).position({
+        x: -(this.controller.circleSize - this.controller.likeComponentSize) / 2.0,
+        y: -(this.controller.circleSize - this.controller.likeComponentSize) / 2.0,
+      })
       Column() {
         this.likeComponentBuilder()
       }.scale({

like_button/src/main/ets/painter/BubblesPainter.ets

@@ -30,10 +30,10 @@ export struct BubblesPainter {
   aboutToAppear() {
     this._outerBubblesPositionAngle = 360 / this.bubblesCount;
     this._circlePaintColors.push(...[
-      this.bubblesColor.dotPrimaryColor() as string,
-      this.bubblesColor.dotSecondaryColor()  as string,
-      this.bubblesColor.dotThirdColor()  as string,
-      this.bubblesColor.dotLastColor()  as string,],
+      this.bubblesColor.dotPrimaryColor as string,
+      this.bubblesColor.dotSecondaryColor  as string,
+      this.bubblesColor.dotThirdColor  as string,
+      this.bubblesColor.dotLastColor  as string,],
     );
     this.init();
   }
@@ -111,34 +111,34 @@ export struct BubblesPainter {
       mapValueFromRangeToRange(this.currentProgress, 0.0, 0.5, 0.0, 1.0);
 
 
-      this._circlePaintColors[0] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotPrimaryColor() ,), Color.fromResourceColor(this.bubblesColor.dotSecondaryColor() ), progress)
+      this._circlePaintColors[0] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotPrimaryColor ,), Color.fromResourceColor(this.bubblesColor.dotSecondaryColor ), progress)
         .withAlpha(alpha)
         .toString();
 
-      this._circlePaintColors[1] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotPrimaryColor() ,), Color.fromResourceColor(this.bubblesColor.dotThirdColor() ), progress)
+      this._circlePaintColors[1] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotPrimaryColor ,), Color.fromResourceColor(this.bubblesColor.dotThirdColor ), progress)
         .withAlpha(alpha)
         .toString();
-      this._circlePaintColors[2] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotThirdColor() ,), Color.fromResourceColor(this.bubblesColor.dotLastColor() ), progress)
+      this._circlePaintColors[2] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotThirdColor ,), Color.fromResourceColor(this.bubblesColor.dotLastColor ), progress)
         .withAlpha(alpha)
         .toString();
-      this._circlePaintColors[3] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotLastColor() ,), Color.fromResourceColor(this.bubblesColor.dotPrimaryColor() ), progress)
+      this._circlePaintColors[3] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotLastColor ,), Color.fromResourceColor(this.bubblesColor.dotPrimaryColor ), progress)
         .withAlpha(alpha)
         .toString();
     }
 
     else {
       let progress =
       mapValueFromRangeToRange(this.currentProgress, 0.5, 1.0, 0.0, 1.0);
-      this._circlePaintColors[0] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotPrimaryColor() ,), Color.fromResourceColor(this.bubblesColor.dotThirdColor() ), progress)
+      this._circlePaintColors[0] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotPrimaryColor ,), Color.fromResourceColor(this.bubblesColor.dotThirdColor ), progress)
         .withAlpha(alpha)
         .toString();
-      this._circlePaintColors[1] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotThirdColor(),), Color.fromResourceColor(this.bubblesColor.dotLastColor() ), progress)
+      this._circlePaintColors[1] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotThirdColor,), Color.fromResourceColor(this.bubblesColor.dotLastColor ), progress)
         .withAlpha(alpha)
         .toString();
-      this._circlePaintColors[2] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotLastColor() ,), Color.fromResourceColor(this.bubblesColor.dotPrimaryColor() ), progress)
+      this._circlePaintColors[2] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotLastColor ,), Color.fromResourceColor(this.bubblesColor.dotPrimaryColor ), progress)
         .withAlpha(alpha)
         .toString();
-      this._circlePaintColors[3] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotPrimaryColor() ,), Color.fromResourceColor(this.bubblesColor.dotSecondaryColor() ), progress)
+      this._circlePaintColors[3] = Color.lerp(Color.fromResourceColor(this.bubblesColor.dotPrimaryColor ,), Color.fromResourceColor(this.bubblesColor.dotSecondaryColor ), progress)
         .withAlpha(alpha)
         .toString();
 

like_button/src/main/ets/painter/CirclePainter.ets

@@ -29,7 +29,7 @@ export struct CirclePainter {
     }
     let colorProgress = clamp(this.outerCircleRadiusProgress, 0.5, 1.0);
     colorProgress = mapValueFromRangeToRange(colorProgress, 0.5, 1.0, 0.0, 1.0);
-    this.context.fillStyle = Color.lerp(Color.fromResourceColor(this.circleColor.start() ), Color.fromResourceColor(this.circleColor.end() ), colorProgress)
+    this.context.fillStyle = Color.lerp(Color.fromResourceColor(this.circleColor.start), Color.fromResourceColor(this.circleColor.end), colorProgress)
       .toString();
     let center = this.circleSize * 0.5;
     // let strokeWidth = this.outerCircleRadiusProgress * center -