L'objectif final de conception est illustré ci-dessous : une barre de navigation est placée en bas de l'interface. Lorsqu'une option est sélectionnée dans cette barre, la partie supérieure de l'interface change. Pour cela, nous utilisons le composant Tabs.

Le composant Tabs permet de basculer rapidement entre différentes vues au sein d'une page, comprenant TabBar (la section de navigation) et TabContent (la section au-dessus de la navigation).

Voici un exemple de code modifié pour l'implémentation :

@Entry
struct EcranPrincipal {
  @State indexActuel: number = 0

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('Contenu A')
        }.tabBar(this.construireTabBar(0, 'Titre 1', $r('app.media.icone1')))

        TabContent() {
          Text('Contenu B')
        }.tabBar(this.construireTabBar(1, 'Titre 2', $r('app.media.icone2')))
      }
      .onChange((index: number) => {
        this.indexActuel = index
      })
      .vertical(false)
    }
  }

  @Builder construireTabBar(index: number, titre: string, icone: Resource) {
    Column() {
      Image(icone)
        .width(24)
        .height(24)
      Text(titre)
        .fontSize(12)
        .fontColor(index === this.indexActuel ? Color.Blue : Color.Gray)
    }
  }
}

Problème 1 : Comment ajuster la position de la barre de navigation ?

La propriété barPosition du composant Tabs peut être utilisée, avec les valeurs End ou Start pour déterminer l'emplacement. Alternativement, l'attribut de style .vertical() contrôle la mise en page horizontale (false) ou verticale (true).

Problème 2 : Comment personnaliser chaque onglet pour afficher une image au-dessus et du texte en dessous ?

Par défaut, le tabBar est en texte pur. Il faut définir une fonction personnalisée pour ajouter des icônes. En utilisant une variable d'état indexActuel et l'événement .onChange, la couleur de l'élément sélectionné change en bleu, tandis que les autres restent en gris.

2. Conception de l'Écran d'Enregistrement Alimentaire

Cette page utilise une disposition en colonnes. En cliquant sur la date, un sélecteur de date apparaît. Pour cela, le composant DatePicker est employé.

DatePicker : un sélecteur de date pour choisir une date dans une plage définie.

Paramètres :

• start : Date de début (défaut : '1970-1-1')
• end : Date de fin (défaut : '2100-12-31')
• selected : Date initialement sélectionnée (défaut : date système)

Propriétés : lunar pour activer l'affichage du calendrier lunaire.

Événement : onChange pour déclencher lors du changement de date.

Exemple de code :

DatePicker({
  start: new Date('2022-01-01'),
  end: new Date('2023-12-31'),
  selected: new Date()
})
.onChange((valeur: DatePickerResult) => {
  console.log(`Date choisie : ${valeur.year}-${valeur.month + 1}-${valeur.day}`)
})

Swiper : un conteneur pour les vues carrouesl coulissantes.

Exemple de code modifié :

Swiper() {
  Text('Salut')
    .width('90%')
    .height(160)
    .textAlign(TextAlign.Center)
    .fontSize(30)
  Text('Monde')
    .width('90%')
    .height(160)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}
.width('100%')
.backgroundColor(Color.White)
.borderRadius(18)
.indicatorStyle({ selectedColor: $r('app.color.couleur_primaire') })

Progress : une barre de progression visuelle.

Exemple de code :

Stack() {
  Progress({
    value: valeurActuelle,
    total: valeurMaximale,
    type: ProgressType.Ring
  })
    .width(90)
    .style({ strokeWidth: 6 })
    .color(couleurProgression)
}