{"id":100307,"date":"2025-03-06T10:31:42","date_gmt":"2025-03-06T07:01:42","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/hong-meng-nextkai-fa-an-li-dian-zi-mu-yu-1bca\/"},"modified":"2025-03-06T10:31:42","modified_gmt":"2025-03-06T07:01:42","slug":"hong-meng-nextkai-fa-an-li-dian-zi-mu-yu-1bca","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/hong-meng-nextkai-fa-an-li-dian-zi-mu-yu-1bca\/","title":{"rendered":"\u0645\u0648\u0631\u062f \u062a\u0648\u0633\u0639\u0647 \u0628\u0639\u062f\u06cc Hongmeng: \u0645\u0627\u0647\u06cc \u0647\u0627\u06cc \u0686\u0648\u0628\u06cc \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc"},"content":{"rendered":"

<\/p>\n

\u3010\u0645\u0642\u062f\u0645\u0647\u3011<\/p>\n

Electronic Wood Fish \u06cc\u06a9 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0645\u0627\u0647\u06cc \u0686\u0648\u0628\u06cc \u0645\u062c\u0627\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u0622\u0631\u0627\u0645 \u06a9\u0631\u062f\u0646 \u0648 \u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u0634\u0627\u06cc\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc \u0628\u0631 \u0631\u0648\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u06cc\u0627 \u0631\u0627\u06cc\u0627\u0646\u0647 \u0644\u0648\u062d\u06cc \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u062f. \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0634\u0647\u0631\u0648\u0646\u062f\u0627\u0646 \u0628\u0631\u0627\u06cc \u062a\u0633\u06a9\u06cc\u0646 \u0627\u062d\u0633\u0627\u0633\u0627\u062a \u062e\u0648\u062f \u0627\u0632 \u0645\u0627\u0647\u06cc \u0647\u0627\u06cc \u0686\u0648\u0628\u06cc \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u062d\u062a\u06cc \u0627\u0632 \u0622\u0646\u0647\u0627 \u0628\u0631\u0627\u06cc \u0646\u062c\u0627\u062a \u06a9\u0627\u0631\u0641\u0631\u0645\u0627\u06cc\u0627\u0646 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0646\u0627\u0631\u0636\u0627\u06cc\u062a\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u06a9\u0627\u0631\u0641\u0631\u0645\u0627\u06cc\u0627\u0646 \u062e\u0648\u062f \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u0646\u062f. \u062d\u062c\u0645 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u0627\u0647\u06cc \u0647\u0627\u06cc \u0686\u0648\u0628\u06cc \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc \u0628\u0647 \u0637\u0648\u0631 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u06cc\u0627\u0641\u062a\u0647 \u0627\u0633\u062a \u0648 \u0628\u0647 \u06cc\u06a9 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0645\u062d\u0628\u0648\u0628 \u062f\u0631 \u0634\u0628\u06a9\u0647 \u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u3010\u0622\u0645\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u062d\u06cc\u0637 \u0632\u06cc\u0633\u062a \u062a\u0648\u0633\u0639\u0647<\/p>\n

\u0633\u06cc\u0633\u062a\u0645 \u0631\u0627\u06cc\u0627\u0646\u0647 \u0627\u06cc: \u0648\u06cc\u0646\u062f\u0648\u0632 10<\/p>\n

\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647: Deveco Studio Next Beta1 \u0646\u0633\u062e\u0647 \u0633\u0627\u062e\u062a: 5.0.3.806<\/p>\n

\u0646\u0633\u062e\u0647 \u067e\u0631\u0648\u0698\u0647: API 12<\/p>\n

\u0645\u0627\u0634\u06cc\u0646 \u0648\u0627\u0642\u0639\u06cc: Mate 60 Pro<\/p>\n

\u0632\u0628\u0627\u0646: Arkts \u060c Arkui<\/p>\n

analysis \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645\u3011<\/p>\n

    \n
  1. \u062d\u0627\u0644\u062a Observer:<\/li>\n<\/ol>\n

    \u062a\u0648\u0636\u06cc\u062d\u0627\u062a: \u0627\u0644\u06af\u0648\u06cc Observer \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0637\u0631\u0627\u062d\u06cc \u0631\u0641\u062a\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u06cc\u06a9 \u0634\u06cc (\u0628\u0647 \u0646\u0627\u0645 \u06cc\u06a9 \u0645\u0648\u0636\u0648\u0639) \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0634\u06cc\u0627\u0621 \u0631\u0627 \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u0628\u0633\u062a\u06af\u06cc \u062f\u0627\u0631\u062f (\u0628\u0647 \u0646\u0627\u0645 Observer) \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0647\u0645\u0647 \u0646\u0627\u0638\u0631\u0627\u0646 \u0648 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0647\u0646\u06af\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0645\u0648\u0636\u0648\u0639 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0637\u0644\u0627\u0639 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

    \u0642\u0637\u0639\u0647 \u06a9\u062f: \u062f\u0631 \u06a9\u062f \u060c \u06a9\u0644\u0627\u0633 \u0633\u0644\u0648\u0644 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Observer \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062f\u06a9\u0648\u0631\u0627\u062a\u0648\u0631 @ObservedV2 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u06a9\u0648\u0631\u0627\u062a\u0648\u0631 Trace \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062e\u0627\u0635\u06cc\u062a \u0631\u0627 \u0631\u062f\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f.\n<\/p>\n

    \n
    \/\/ \u89c2\u5bdf\u8005\u6a21\u5f0f\u88c5\u9970\u5668\n@ObservedV2\nclass Cell {\n  value: string = '\u529f\u5fb7+1'; \/\/ \u9ed8\u8ba4\u663e\u793a\u7684\u6587\u5b57\n  @Trace \/\/ \u8ddf\u8e2a\u5c5e\u6027\u53d8\u5316\n  opacity: number = 0; \/\/ \u6587\u5b57\u900f\u660e\u5ea6\n  @Trace \/\/ \u8ddf\u8e2a\u5c5e\u6027\u53d8\u5316\n  y: number = 0; \/\/ \u6587\u5b57\u7684\u5782\u76f4\u504f\u79fb\u91cf\n}\n<\/code><\/pre>\n<\/div>\n
      \n
    1. \u0627\u062b\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646:<\/li>\n<\/ol>\n
      \u062a\u0648\u0636\u06cc\u062d\u0627\u062a: \u0627\u0632 \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0639\u0627\u0645\u0644 \u0648 \u062c\u0630\u0627\u0628\u06cc\u062a \u0628\u0635\u0631\u06cc \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u06a9\u062f \u060c \u0627\u062b\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0645\u062a\u0646 \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062a\u0635\u0648\u06cc\u0631 \u060c \u062d\u0631\u06a9\u062a \u0639\u0645\u0648\u062f\u06cc \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u0634\u0641\u0627\u0641\u06cc\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f.<\/p>\n
      SNIPPET CODE: \u062f\u0631 \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633 \u0628\u0627 OnClick \u060c \u200b\u200b\u0627\u0632 \u0631\u0648\u0634 AnimateToimmedeDeded \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u0627\u062b\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062d\u0631\u06a9\u062a \u0639\u0645\u0648\u062f\u06cc \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0634\u0641\u0627\u0641\u06cc\u062a \u0645\u062a\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.\n<\/p>\n
      \n
      \/\/ \u70b9\u51fb\u56fe\u7247\u65f6\u89e6\u53d1\u7684\u56de\u8c03\n.onClick(() => {\n  let index = this.indexCount % this.count; \/\/ \u8ba1\u7b97\u5f53\u524d\u6eda\u52a8\u7684\u7d22\u5f15\n  this.indexCount++; \/\/ \u66f4\u65b0\u7d22\u5f15\u8ba1\u6570\u5668\n  animateToImmediately({\n    \/\/ \u7acb\u5373\u5f00\u59cb\u52a8\u753b\n    duration: 0, \/\/ \u52a8\u753b\u6301\u7eed\u65f6\u95f4\u4e3a0\u6beb\u79d2\n    onFinish: () => { \/\/ \u52a8\u753b\u5b8c\u6210\u540e\u7684\u56de\u8c03\n      animateToImmediately({\n        \/\/ \u518d\u6b21\u7acb\u5373\u5f00\u59cb\u52a8\u753b\n        duration: 1000, \/\/ \u52a8\u753b\u6301\u7eed\u65f6\u95f4\u4e3a1000\u6beb\u79d2\n      }, () => {\n        this.list[index].y = -200 \/\/ \u8bbe\u7f6e Cell \u7684\u5782\u76f4\u504f\u79fb\u91cf\n        this.list[index].opacity = 0 \/\/ \u8bbe\u7f6e Cell \u7684\u900f\u660e\u5ea6\n      })\n    }\n  }, () => {\n    this.list[index].y = 0 \/\/ \u8bbe\u7f6e Cell \u7684\u5782\u76f4\u504f\u79fb\u91cf\n    this.list[index].opacity = 1 \/\/ \u8bbe\u7f6e Cell \u7684\u900f\u660e\u5ea6\n  })\n})\n<\/code><\/pre>\n<\/div>\n
      \u3010\u06a9\u062f \u06a9\u0627\u0645\u0644\n<\/p>\n
      \n
      \/\/ \u89c2\u5bdf\u8005\u6a21\u5f0f\u88c5\u9970\u5668\n@ObservedV2\nclass Cell {\n  value: string = '\u529f\u5fb7+1'; \/\/ \u9ed8\u8ba4\u663e\u793a\u7684\u6587\u5b57\n  @Trace \/\/ \u8ddf\u8e2a\u5c5e\u6027\u53d8\u5316\n  opacity: number = 0; \/\/ \u6587\u5b57\u900f\u660e\u5ea6\n  @Trace \/\/ \u8ddf\u8e2a\u5c5e\u6027\u53d8\u5316\n  y: number = 0; \/\/ \u6587\u5b57\u7684\u5782\u76f4\u504f\u79fb\u91cf\n}\n\n\/\/ \u4e3b\u5165\u53e3\u7ec4\u4ef6\n@Entry\n@Component\nstruct Index {\n  @State list: Cell[] = []; \/\/ \u5b58\u50a8\u6240\u6709 Cell \u5bf9\u8c61\u7684\u6570\u7ec4\n  indexCount: number = 0; \/\/ \u8bb0\u5f55\u5f53\u524d\u6eda\u52a8\u7684\u7d22\u5f15\n  count: number = 10; \/\/ \u5217\u8868\u4e2d Cell \u5bf9\u8c61\u7684\u6570\u91cf\n  image: string =\n    'data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQsAAADICAYAAAD\/XsT8AAAAAXNSR0IArs4c6QAAEApJREFUeF7tnV921LgSh+093Hfg6S7iPgALmDUAKyFZyQwrubASYCWelMfqcXfabVkuSVXS1+eEhESWpV+Vv1Mq\/fE48EGBgwpM0\/R2GIYPy2Vvlu\/yO\/msv8vPvyKrl3KhrHz\/vVx3+d04jrF1Rd6SYkcUGI8UpmxfCixQkAf+\/QKBNSRqiLGGifz8YwHML0CS3xzAIr\/GLu6wgOHT0liJGkLk4KL9q6jke4DIOI7yMx8lBYCFkpAeq1kBwiMcYiWXCASAxKr1oBywUBDRUxUrQHxe5Rc8deFsW8NQ5i+JQIg+4uUEFvFauS25AsST207kaziRR6S2wCJSKI\/Fpmn6+jKW7zWCSDVZgMc3oo5rCYFFqksZvY4oQtUwAg6GK4ukwELVt+pVtkAiRBL1GtLunQM4JOLocr0HsHDu3NM0yUzGn50mK2tYr9thCrCo4W4K91wiCYGEt\/UQCr03U4WA43kcRxmqNP8BFs5MzHDDpMHmIco4js8mW6fUKGChJGTuakhc5lZYpf6m8xrAQsVH8layTIGyRiKvzJq1NxlpAAtNF1Gui+SlsqDlqxNofGllvQawKO9Au3dkyLErkacCzUQZwMKY2y3RxP+NNYvmnFdANrNJlOF2jQawOO8EKjUwy6Eio\/VKBBQfvQIDWBhwL6IJA0Yo1wS3wxJgUc5J7t5pmiZZWCWbvfj0o4BLYACLSg7KCsxKwtu67ZOnhVzAooLzMOyoILrdW8rKzy92m\/dvy4BFYSuxwKqw4D5u5wIYwKKQMzHsKCS039t8H8fxo+XmA4sC1mHYUUDkNm4hrzR4Z7UrwCKzZQBFZoHbq94sMIBFRmcjP5FR3LarNgkMYJHJ6Vg\/kUnYfqo1BwxgkcH5pmmSvR2cYJVB286qNDVLAiwUvY8ZD0UxqSooYAYYwELJKRdQ\/FSqjmpQYK2ACWAACwWnBBQKIlLFngLVl4YDiz0T7fwdUJwUkMuPKFAVGMDiiKluygKKE+JxaaoC1YABLBJNxmKrROG4TEOBKsAAFgmmAxQJonGJpgJVXm4ELA6aEFAcFIziuRQofnI4sDhgSnIUB8SiaAkFigIDWESaFFBECkWx0goUOwQYWESYlpWZESJRpKYCRYABLCJMzF6PCJEoUluB7BvPgMWOiQFF7WeA+x9QICswgMUDSwCKA25KUSsKZNtHAiw2TAworPg+7UhQIAswgMUdS3DCVYJ7cok1BdRXeQKLGxOz6Mqaz9OeEwqoAgNYrCwBKE64JZdaVEB10RawWEzMoiuLvk6bFBRQW4MBLP6FBedmKngmVZhUQGVKFVgMw8DMh0kHp1G6CpzOX3QPC2Y+dD2S2swqcDp\/0TUsSGiadWwalkeBU+9T7RYWS0JT8hRv89iFWlHAnAKnchc9w4KEpjlfpkEFFHg3jqMMSQ5\/uoQFeYrDfsIFjSgwjmPyM598oVftyFN4tRzt1lAAWESqyMKrSKEo1qoCpzaYdRVZsJ6i1WeAfkUqACxihCJPEaMSZRpXIDm5Kbp0EVmQp2j8EaB7MQqciip6ggXTpDHuRJmWFTgVVXQBi2ma\/hyG4XPLXkDfUOCBAqeXeYe6mx6GMPzgIepcAbXt6c1HFtM0\/WQ5d+ePS5\/dF0hIjuJZs\/vNRhZMk2q6CXU5UGAGxDAM31KXc+\/1sUlYMPzYMzt\/b0CBAIdBO4LY0qZVWDD8aOBpoAtXCggc5Ot7zujhkebNwYLZDx6xhhQI0cOPcRwFElU\/TcGC4UdVX+Lm5xUwBYfb7rQGCxZfnXdYaiingGk4NAsL9n6U83DulKyAKzg0CQuGH8nOy4V5FXANh1ZhwfAjr9NTe5wCTcGhOVgw\/IjzYkplUaAoHJbDm+SAafl6s\/Qo\/H+rg+G8zR9LATm0N2lmxXWCk+FHlgeASrcVKAKHBQrSik9LUz68rK+QL61PWK\/xfGS1p3dYsPhKy32o51aB9SKorOscFjjkAsMjyx7aQ+IWFiy+4ulWVqAIHBYwSJQgwwjtiCFVkqiDcVzCguFHqk9w3UqBy96KXMunjYJhywl2geEVFgw\/eO6PKpBt41WBHMPRvqaWf\/jyZHewYPYj1Q+6uy5LMvJOtLA3G+FJ+IenarmCBe\/98OR3Rduqnm9YTVO+X6YqBQqaMxJFBTpws82XJ3uDBYuvDli94aJq+YaGhhCa5v54by2GG1hM0ySH7srhu3z6UkAtargTLUikIBEDn2sF7kYXnmAxYdEuFFhHDafWN6zWLwgQOOH9mPu8ii5cwII1Fces7Kh0WEko30+BQfq8goOV9QuOTPGqqa+mUs3DgjUVnv1tPgYuAEE6IvsTZG9C2K9wunOLf0gS8ul0ZVSwVkDs9G79Cw+wIKlp34lfQSF1s1JsV5cpdBlakHOIFe14uauhiGlYkNQ8bt0CV6gOHY60dzXMIIo4Ilx62atFWtZhwUrNdENrXFkNDOvGAwkNUybVcTUUMQsLVmomGffMRSbAACTOmFD\/2pd3klwYYRkWTJXq2z7UGBKM8gar07MQ2s1cIomvTHdqK5tU3yVvYRIWTJUmGfXRReaihnuNXWY2ZOEdSUt1F0iu8JK3MAcLpkqTjXo17bW897LYq+3OtJqZjTPqZb\/2sprTIiyYKj1u\/yw7LI83I\/4KkpbxWlUueUlymoIFUUW0W7iDQ+gZkIi2saWCc97CGiyIKu67iFs4AAlLz3xyW2zBggVYV4YMcPg9jqPMWLj9EEm4Nd264XOS00xkMU0TC7D+2Uchx7O7BoR4GZBoAhKhE3ZgQVQxb4L6prnBqparskailvJZ7zvPiJiILDqOKh4ekJrV\/MqVAwllQW1VN8+IVIdFp1FFa5GELKTq4XxKW49wudaYgUVPy7rlHZNfGhpuAIlyD2zVO8kekaqRRUebxR4esV7VCw7enCXZBwVrp\/h\/asOih6iiibwEkGjnqU\/syX+rwaKDqKKJaAJIJD5a7V1WFRYtRxXuowkg0d7TfrJH\/6sSWTS8Bd19NAEkTj5S7V5eDRYtRhWbr33z4D9AwoOVqrbxj+KRRaNRxe7r6qua+cHNgYRVy5hrVxVYtBZVyLoJd3s5gIS5h9F6g8rCosGo4u4LZC1bHUhYto7ptn0pOgx5mS5tKapwBYpl7wYrLk0\/j6YbVw4WjUUVbqZGgYTpB9BT44rCopmoovYy+RgPAxIxKlHmgAJlYNFYVGE6oclW8QPuT9EjChSDRTNRxctLeUzmKoDEEb+nbIIC+WHRWFQhGpvKV3B8XYLbc0mKAnlhsTiynK3Z0scELIBESy7loi\/ZYSFTdZ9dSBHfyKrLuoFEvKEoqapAPlg0GlWI+levoVc1x4PKgEQppbnPhgJZYdFiVBF0LJrk7ODsD55Q+wrkWe7dwWsIi+QtgIT9J6ijFmaDReuvIcw6FOGt4h09gn66qg+Ljo72V1+cBST8PDkdtlT38JuGk5r3fEMtumAnaIePnr8uq8Oi9eHHrYlPHXoDJPw9MR23WA8WHSfjDic7l6Ha12EY3nbsfHTdlwI6p3t3MPuxZ9aog3rJSezJyN8NK3D+JUOd5Sn2bCnQkCP2fiwF5f\/y+fTyj7zflA8KeFVABRa95Sm8Gpt2o0CyAqffdTpNE6BIlp8LUcCNAufeot5xQtONhWkoCigpMM\/6JR3YS0JTyQRUgwI+FEiDBQlNH9allSigqMC8WvlwZEGeQtEEVIUCPhSYd1kfggWg8GFZWokCygq8G8fxVzQsSGgqy091KOBEgfDqiyhYkNB0YlWaiQL6Clz2P+3CAlDoq0+NKOBIgctRDA9hscx8yMIrNjw5si5NRQFFBeZ8hdS3BwtWaCqqTlUo4E2B9as6N2FBQtObWWkvCqgrcHVey11YkKdQF50KUcCjAldHR76CBSs0PdqUNqNAFgUu+Yq7OQsWXmURnUpRwJsCr46MvIosOjqZ25vhaC8KlFbg1en1t7CYSreI+6EACphU4GoIcjUMmaap5dcNmrQGjUIBowrcPbV+jiyY\/TBqMpqFAnUUuPsCrQALooo6RuGuKGBOgfVCrHXjAizIVZgzGQ1CgSoKbL6Wc2QGpIpBuCkKmFRgK6qYE5wkNk3ajEahQA0FHr6OU2DBZrEaZuGeKGBPgVfTpVc5i2mafrIF3Z7VaBEKFFZg9yXfElkAi8JW4XYoYE2BR7mK0FaBBTMh1ixHe1CgrAKbMyAMQ8oagruhgGUF5lcTxjSQBGeMSpRBgXYVmN8JEtM9gcXXl4JPMYUpgwIo0JQCu0nN22EIsGjK\/nQGBaIUiB5+rBOccnK3zIjwQQEU6EeB6OHHBRbyAwuz+vEQeooCL+uqDg0\/bmHxeRgG2XnKBwVQoG0Fvo\/j+DGli2HXKUORFPW4BgV8KXA4T3GV4Az\/YfepL6vTWhRIUOBwnmILFhJdyFDkQ0IjuAQFUMC2AqdAIV27PbCX4Yhtg9M6FEhRIGo5917F914yRLJzTzX+jgJ+FHh62ST2rNHcrdcXslBLQ13qQIG6CiRNkW41mRcj1zUmd0eBXAqoguJVzuK21ewbyWVH6kWBrAqog2IXFlJgeVGyHL0nyU8+KIACthVQSWbe6+LmMGRdeAHGp5ffsTvVtqPQur4VOD09+ki+KFiEClbQkBmTvUjj13Kd7JUPP\/8ehuH98nu5njUdfTs3vddRQJ4viSiizqVIveUhWNyJNgIw5HsAgiwpDT\/vtmsBkEBDIAJAdhWjAApcKSDPmkQU0c9cqn7JsEi94d51CzykmABEhj5EH3ui8fdeFciSyNwS0xwsbhsKPHp9Duj3jgLZEpluYbEBDxmuSNTBsIVnqjcFig07boU1H1nsecIq58GQZU8s\/u5dAbWl2ylCuIfFRtKVqCPFG7jGqgJFZjv2Ot8ULDaGLCRK97yAv1tVQCAhSUyVjWBnO9k0LO5EHWGKVtaJ8EEBywpUHXLcE6YbWGxEHSHPwfSs5cemr7aZGHIAiw2nu1kYRtTR18NppbdmIREE6jay2PKQBRwyJSsrSiXiIOqw8ji12Q6BxPM4jn9Z7x6w2LEQUYd1F3bbPjeQILJI8LHValJyHQn6ccmsgGz2ktWX2fdyaOtNZHFCUTbBnRCvr0vnKdBhGL55hASRRQZnBR4ZRPVdpal1EmelJLI4q+CD64FHRnHtVt1EFMHUaWUHAx6VDZDv9gEQP3IfQJOvC\/s1E1nsa5StxAoeb5imzSZzroq7AMRaPGCRy5US6yX6SBSuzGXNDjFi5AMWMSpVLLNaJBYWinGGRzl7dBc9PJIWWJRzPLU73ZwextmlasrO58jKFGfTuYdUuYBFqnIGr9uIQiQS2TuJ3WBvsjdJwBBOngcOEXIDiwiRvBe5iUSkOyEa6QEkAoUABuk7YEh0aGCRKFxLl23ARLoYYGI9MglACN\/l\/TTySoqs79FoyQdi+gIsYlSiTHiNZVDiNiKRqd\/1O2TWit0DzRZ8bvdLhIdf6lu\/qGr+GRiUdcy\/AeOQohjN6eIJAAAAAElFTkSuQmCC'\n\n  \/\/ \u521d\u59cb\u5316\u65b9\u6cd5\uff0c\u5728\u7ec4\u4ef6\u5373\u5c06\u663e\u793a\u65f6\u88ab\u8c03\u7528\n  aboutToAppear(): void {\n    for (let i = 0; i < this.count; i++) {\n      this.list.push(new Cell()); \/\/ \u521d\u59cb\u5316 Cell \u6570\u7ec4\n    }\n  }\n\n  \/\/ \u6784\u5efa UI \u7684\u65b9\u6cd5\n  build() {\n    Column() { \/\/ \u521b\u5efa\u4e00\u4e2a\u5782\u76f4\u5e03\u5c40\u5bb9\u5668\n      Stack() { \/\/ \u521b\u5efa\u4e00\u4e2a\u5806\u6808\u5e03\u5c40\u5bb9\u5668\n        ForEach(this.list, (item: Cell, _index: number) => { \/\/ \u904d\u5386 list \u4e2d\u7684\u6bcf\u4e00\u4e2a Cell\n          Text(item.value)\/\/ \u663e\u793a Cell \u4e2d\u7684\u6587\u5b57\n            .fontColor(Color.White)\/\/ \u8bbe\u7f6e\u6587\u5b57\u989c\u8272\u4e3a\u767d\u8272\n            .fontSize('50lpx')\/\/ \u8bbe\u7f6e\u6587\u5b57\u5927\u5c0f\n            .translate({ x: 0, y: `${item.y}lpx` })\/\/ \u8bbe\u7f6e\u6587\u5b57\u7684\u5782\u76f4\u504f\u79fb\u91cf\n            .opacity(item.opacity) \/\/ \u8bbe\u7f6e\u6587\u5b57\u7684\u900f\u660e\u5ea6\n        })\n      }\n      .width('300lpx') \/\/ \u8bbe\u7f6e\u5806\u6808\u5e03\u5c40\u5bb9\u5668\u7684\u5bbd\u5ea6\n      .height('300lpx') \/\/ \u8bbe\u7f6e\u5806\u6808\u5e03\u5c40\u5bb9\u5668\u7684\u9ad8\u5ea6\n      .align(Alignment.BottomEnd) \/\/ \u8bbe\u7f6e\u5bf9\u9f50\u65b9\u5f0f\u4e3a\u5e95\u90e8\u53f3\u7aef\n\n      Image(this.image)\/\/ \u663e\u793a\u56fe\u7247\n        .width('300lpx')\/\/ \u8bbe\u7f6e\u56fe\u7247\u5bbd\u5ea6\n        .height('300lpx')\/\/ \u8bbe\u7f6e\u56fe\u7247\u9ad8\u5ea6\n        .objectFit(ImageFit.Contain)\/\/ \u56fe\u7247\u9002\u5e94\u5bb9\u5668\n        .clickEffect({\n          \/\/ \u70b9\u51fb\u6548\u679c\u914d\u7f6e\n          scale: 0.5, \/\/ \u7f29\u653e\u6bd4\u4f8b\n          level: ClickEffectLevel.LIGHT \/\/ \u6548\u679c\u7ea7\u522b\n        })\n        .onClick(() => { \/\/ \u70b9\u51fb\u56fe\u7247\u65f6\u89e6\u53d1\u7684\u56de\u8c03\n          let index = this.indexCount % this.count; \/\/ \u8ba1\u7b97\u5f53\u524d\u6eda\u52a8\u7684\u7d22\u5f15\n          this.indexCount++; \/\/ \u66f4\u65b0\u7d22\u5f15\u8ba1\u6570\u5668\n          animateToImmediately({\n            \/\/ \u7acb\u5373\u5f00\u59cb\u52a8\u753b\n            duration: 0, \/\/ \u52a8\u753b\u6301\u7eed\u65f6\u95f4\u4e3a0\u6beb\u79d2\n            onFinish: () => { \/\/ \u52a8\u753b\u5b8c\u6210\u540e\u7684\u56de\u8c03\n              animateToImmediately({\n                \/\/ \u518d\u6b21\u7acb\u5373\u5f00\u59cb\u52a8\u753b\n                duration: 1000, \/\/ \u52a8\u753b\u6301\u7eed\u65f6\u95f4\u4e3a1000\u6beb\u79d2\n              }, () => {\n                this.list[index].y = -200 \/\/ \u8bbe\u7f6e Cell \u7684\u5782\u76f4\u504f\u79fb\u91cf\n                this.list[index].opacity = 0 \/\/ \u8bbe\u7f6e Cell \u7684\u900f\u660e\u5ea6\n              })\n            }\n          }, () => {\n            this.list[index].y = 0 \/\/ \u8bbe\u7f6e Cell \u7684\u5782\u76f4\u504f\u79fb\u91cf\n            this.list[index].opacity = 1 \/\/ \u8bbe\u7f6e Cell \u7684\u900f\u660e\u5ea6\n          })\n        })\n    }\n    .height('100%') \/\/ \u8bbe\u7f6e\u5bb9\u5668\u9ad8\u5ea6\u4e3a100%\n    .width('100%') \/\/ \u8bbe\u7f6e\u5bb9\u5668\u5bbd\u5ea6\u4e3a100%\n    .backgroundColor(Color.Black) \/\/ \u8bbe\u7f6e\u80cc\u666f\u989c\u8272\u4e3a\u9ed1\u8272\n  }\n}\n<\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      \u3010\u0645\u0642\u062f\u0645\u0647\u3011 Electronic Wood Fish \u06cc\u06a9 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0645\u0627\u0647\u06cc \u0686\u0648\u0628\u06cc \u0645\u062c\u0627\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u0622\u0631\u0627\u0645 \u06a9\u0631\u062f\u0646 \u0648 \u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u0634\u0627\u06cc\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc \u0628\u0631 \u0631\u0648\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u06cc\u0627 \u0631\u0627\u06cc\u0627\u0646\u0647 \u0644\u0648\u062d\u06cc \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u062f. \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0634\u0647\u0631\u0648\u0646\u062f\u0627\u0646 \u0628\u0631\u0627\u06cc \u062a\u0633\u06a9\u06cc\u0646 \u0627\u062d\u0633\u0627\u0633\u0627\u062a \u062e\u0648\u062f \u0627\u0632 \u0645\u0627\u0647\u06cc \u0647\u0627\u06cc \u0686\u0648\u0628\u06cc \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u062d\u062a\u06cc \u0627\u0632 \u0622\u0646\u0647\u0627 \u0628\u0631\u0627\u06cc \u0646\u062c\u0627\u062a \u06a9\u0627\u0631\u0641\u0631\u0645\u0627\u06cc\u0627\u0646 \u062e\u0648\u062f …<\/p>\n","protected":false},"author":2,"featured_media":100308,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-100307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/100307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=100307"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/100307\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/100308"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=100307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=100307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=100307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}