[HarmonyOS レッスン 1: 運動と健康の実践] 健康的な生活のための UI デザイン

1 devstudio3.1β2の新機能のUI

1.1 起動時のスプラッシュ画面 (不快なスプラッシュ画面の広告を含む)

     ブート スプラッシュ スクリーンの原理は、プログラムの起動時にページを表示することであり、バックグラウンドでデータをロードするために使用され、データがロードされると自動的に消えますが、後にサードパーティの広告を表示するために開発されました。 。

    ライフサイクル関数 aboutToAppear は、カスタム コンポーネントの新しいインスタンスを作成した後、その build() 関数を実行する前に実行されます。aboutToAppear 関数で状態変数を変更することができ、その変更は後続の build() 関数の実行で有効になります。aboutToDischaracter 関数は、カスタム コンポーネントが破棄される前に実行されます。この 2 つの機能を使用することで、表示ページ生成前の判定と表示後の自動破棄を完了することができます。aboutToAppearに判定を追加すると、会員は広告をスキップします^_^。具体的なコードは次のとおりです。

ページ ライフサイクル関数 aboutToAppear:

 aboutToAppear() {
    let preferences = data_preferences.getPreferences(this.context, H_STORE);
    preferences.then((res) => {
      res.get(IS_PRIVACY, false).then((isPrivate) => {
        if (isPrivate === true) {
          this.jumpAdPage();
        } else {
          this.dialogController.open();
        }
      });
    });
  }コピー

ライフサイクルページ破棄関数 aboutToDischaracter:

  aboutToDisappear() {
    clearTimeout();
  }コピー

1.2 広告ページのデザイン

     国の要件に合わせて、広告をスキップするリンクを設計し、カウントダウン後5秒以内に広告表示から抜けるように設計することももちろん可能ですが、もっと非情であれば、シェイクやタッチなどの転用方法も設計可能です。もちろん、原罪はテクノロジーではなく、貪欲です。

キーコードは次のとおりです。

      Row() {
        Text($r('app.string.jump_ad', this.duration))
          .fontSize($r('app.float.default_12'))
          .fontColor($r('app.color.white'))
          .borderRadius($r('app.float.default_16'))
          .letterSpacing(LETTER_1)
          .height($r('app.float.default_36'))
          .backgroundColor('rgba(0,0,0,0.20)')
          .border({ color: $r('app.color.white'), width: $r('app.float.default_1') })
          .margin({ top: $r('app.float.default_36') })
          .padding($r('app.float.default_8'))
          .onClick(() => this.goToHomePage())
      }
      .width('90%')
      .justifyContent(FlexAlign.End)コピー

1.2 ローコード設計メインページ

      ローコードモードを使用して、主にタブコンポーネントとタブコネクトコンポーネントを使用してメインページをデザインしましたが、パラメータ設定とイベント設定が大量にあり、学習コストがかなり高いことが判明したため、プロトタイプを変更して変換しましたets に直接コードを記述する効率はまだ少し高いです。ローコード設計は次のとおりです。

1.3 ローコード設計コンポーネント ATS

   ビジュアル コンポーネントの設計では list コンポーネントと listitem コンポーネントを使用しますが、インターフェイスの foreach はデータのバインド方法を知らないため、途中までしかコードを変換できないことがわかります。

 

2 データベース操作

   データベースは、アプリケーション データ ストレージを読み取る最も簡単な方法です。このアプリケーションは主に rdb を使用しており、健康計画の読み取りと編集ができる特定のパッケージを備えています。特定のコードは、パッケージ化されたデータベース アクセス コンポーネントを再利用します。

3作品展示

{{名前}}
{{名前}}

おすすめ

転載: my.oschina.net/u/4478396/blog/9093160