Dans les interfaces déclaratives, les développeurs peuvent utiliser des instructions de contrôle de rendu en complément des composants système pour cosntruire des interfaces utilisateur. Ces mécanismes incluent le rendu conditionnel pour afficher/masquer des éléments et le rendu itératif pour générer des compoasnts à partir de collections de données.

Prenons un scénario pratique : afficher un message d'erreur uniquement lorsque certaines conditions ne sont pas rempleis (comme lors d'une validation de formulaire). Le framework ArkTS propose des structures de contrôle adaptées via des instructions conditionnelles.

Les règles d'implémentation essentielles :

• Utilisation standard de if/else/else if
• Les conditions peuvent dépendre de variables d'état
• Doit être intégré dans des composants conteneurs
• Respect strict des règles de hiérarchie parent/enfant
• Chaque branche doit générer au moins un composant
• Respect des contraintes spécifiques du conteneur (ex: Grid exige GridItem)

Exemple de rendu conditionnel modifié :

@Entry
@Component
struct VuePrincipale {
  @State chiffre: number = 3;
  
  build() {
    Column() {
      Text(`Valeur actuelle : ${this.chiffre}`)
        .fontSize(24)
      
      Button('Incrémenter')
        .onClick(() => this.chiffre++)
      
      // Affichage pour nombres impairs
      if (this.chiffre % 2 !== 0) {
        Text('Nombre impair détecté !')
          .fontColor('#FF0000')
          .fontSize(20)
      }
    }
    .padding(20)
  }
}

Lorsque chiffre est impair, le message s'affiche en rouge. L'inversion de la logique (impair au lieu de pair) démontre la flexibilité des conditions.

Pour le rendu itératif, l'API ForEach permet de générer des composants à partir de tableaux. Sa signature :

ForEach(
  donnees: Array<any>,
  generateur: (element: any, index: number) => Component,
  generateurCle?: (element: any, index: number) => string
)

Paramètres clés :

• donnees : Source de données
• generateur : Fonction de création de composant
• generateurCle : (Optionnel) Fonction de génération de clé unique

Implémentation pratique avec données françaises :

@Entry
@Component
struct ListeElements {
  @State elements: string[] = ['Premier', 'Deuxième', 'Troisième'];

  build() {
    ScrollColumn() {
      ForEach(
        this.elements,
        (valeur, position) => 
          ElementAffiche({ libelle: `${position + 1}. ${valeur}` }),
        (valeur) => valeur.substring(0, 3) // Clé basée sur 3 premiers caractères
      )
    }
  }
}

@Component
struct ElementAffiche {
  @Prop libelle: string;
  
  build() {
    Text(this.libelle)
      .fontSize(32)
      .padding(15)
      .backgroundColor('#FFFFFF')
  }
}

Lors de la personnalisation de generateurCle, il est impératif que chaque clé soit strictement unique pour l'ensemble des données. Une duplication de clés entraînerait des comportements imprévisibles dans le rendu. Par exemple, utiliser la valeur brute comme clé pour des chaînes identiques provoquerait des conflits.