[Flutter] Flutter utilise convex_bottom_bar pour implémenter la barre de navigation inférieure

Annuaire d'articles

Introduction

convex_bottom_barIl s'agit d'un package de barre de navigation inférieure pour Flutter, le numéro de version est 3.2.0. Il fournit un moyen facile de créer une barre de navigation inférieure surélevée. La conception de ce package a été inspirée par les directives de conception matérielle de Google, mais il fournit également de nombreuses options de personnalisation qui permettent aux développeurs d'ajuster facilement l'apparence et le comportement de la barre de navigation.

Points forts de cet article :

Découvrez convex_bottom_barles fonctionnalités clés de
Apprenez à installer et à configurer
Explorez l'utilisation de base et les styles de thème personnalisés
Apprenez à créer des boutons en relief individuels et des styles d'onglets personnalisés

Êtes-vous impatient de devenir un expert Flutter avec plus de conseils et de meilleures pratiques ? Nous avons une excellente nouvelle pour vous ! Flutter de zéro à une entrée de base à la ligne d'application de toute la stratégie vous attend! Cette colonne contient toutes les ressources dont vous avez besoin pour apprendre Flutter, y compris des exemples de code et une analyse approfondie. Le contenu de la colonne continuera d'être mis à jour et le prix augmentera en conséquence. Inscrivez-vous maintenant et profitez du meilleur prix! De plus, nous avons également un groupe de discussion dédié, vous pouvez cliquer ici pour rejoindre notre groupe de discussion afin de communiquer et d'apprendre avec d'autres apprenants Flutter. Commençons notre voyage d'apprentissage Flutter aujourd'hui !

2. Installation et configuration

Pour commencer convex_bottom_bar, vous devez l'ajouter aux dépendances de votre projet. Voici les étapes d'installation et de configuration :

Ajouter des dépendances : dans le fichier du projet pubspec.yaml, ajoutez le code suivant :
```
dependencies:
  convex_bottom_bar: ^3.2.0
```
Obtenir le package : exécutez flutter pub getla commande pour télécharger le package.
Importer le package : dans le fichier que vous souhaitez utiliser convex_bottom_bar, ajoutez l'instruction d'importation suivante :
```
import 'package:convex_bottom_bar/convex_bottom_bar.dart';
```

Après les étapes ci-dessus, vous pouvez commencer à utiliser convex_bottom_barpour créer une barre de navigation inférieure surélevée.

3. Utilisation de base et styles de thème personnalisés

convex_bottom_barLa création d'une barre de navigation inférieure est très simple à l'aide de .

Voici un exemple de base :

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Home'),
      TabItem(icon: Icons.map, title: 'Discovery'),
      TabItem(icon: Icons.add, title: 'Add'),
      TabItem(icon: Icons.message, title: 'Message'),
      TabItem(icon: Icons.people, title: 'Profile'),
    ],
    onTap: (int i) => print('click index=$i'),
  )
);

Vous pouvez également personnaliser l'arrière-plan, la couleur et la hauteur de l'AppBar, par exemple :

ConvexAppBar(
  style: TabStyle.react,
  items: [
    TabItem(icon: Icons.home, title: 'Home'),
    TabItem(icon: Icons.map, title: 'Discovery'),
  ],
  backgroundColor: Colors.blue,
  height: 60,
)

Avec ces options, vous pouvez facilement créer une barre de navigation inférieure qui répond aux besoins de votre projet.

Ceci est le blog publié par Xiaoyu Youth sur CSDN en 2023. En raison de la violation généralisée du droit d'auteur de la station de collecte, si vous ne voyez pas cet article sur CSDN, veuillez me contacter via CSDN, merci pour votre soutien ~

4. Boutons et crochets de style

1. Utilisation d'un seul bouton

Si vous avez juste besoin d'un seul bouton en relief, cela fonctionne ConvexButton. Voici un exemple:

Scaffold(
  appBar: AppBar(title: const Text('ConvexButton Example')),
  body: Center(child: Text('count $count')),
  bottomNavigationBar: ConvexButton.fab(
    onTap: () => setState(() => count++),
  ),
);

2. Crochets de style personnalisés

convex_bottom_barUne API est également fournie StyleHookqui vous permet de personnaliser les styles d'onglet. Voici un exemple:

StyleProvider(
  style: Style(),
  child: ConvexAppBar(
    initialActiveIndex: 1,
    height: 50,
    top: -30,
    curveSize: 100,
    style: TabStyle.fixedCircle,
    items: [
      TabItem(icon: Icons.link),
      TabItem(icon: Icons.import_contacts),
      TabItem(title: "2020", icon: Icons.work),
    ],
    backgroundColor: _tabBackgroundColor,
  ),
);

class Style extends StyleHook {
    
    
  @override
  double get activeIconSize => 40;
  @override
  double get activeIconMargin => 10;
  @override
  double get iconSize => 20;
  @override
  TextStyle textStyle(Color color) {
    
    
    return TextStyle(fontSize: 20, color: color);
  }
}

Notez que ce hook a des limites et peut provoquer des erreurs de débordement si les dimensions que vous fournissez ne correspondent pas aux styles internes.

5. Prise en charge de droite à gauche et exemples personnalisés

1. Prise en charge RTL

convex_bottom_barL'orientation du texte RTL (de droite à gauche) est prise en charge en interne. Vous pouvez Directionalityconfigurer RTL et LTR en :

Directionality(
  textDirection: TextDirection.rtl,
  child: Scaffold(body: ConvexAppBar(/*TODO ...*/)),
);

2. Exemple personnalisé

Si le style par défaut ne répond pas à vos besoins, vous pouvez ConvexAppBar.builder()créer presque n'importe quelle fonctionnalité d'onglet avec :

Scaffold(
  bottomNavigationBar: ConvexAppBar.builder(
    count: 5,
    backgroundColor: Colors.blue,
    itemBuilder: Builder(),
  )
);

// 用户定义的类
class Builder extends DelegateBuilder {
    
    
  @override
  Widget build(BuildContext context, int index, bool active) {
    
    
    return Text('TAB $index');
  }
}

6. Résumé

convex_bottom_barIl s'agit d'un package de barre de navigation inférieure Flutter puissant et flexible, le numéro de version est 3.2.0. Grâce à cet article, nous avons appris comment installer et configurer le package, et comment utiliser ses fonctionnalités riches et ses options de personnalisation pour créer une barre de navigation inférieure surélevée.

Êtes-vous curieux de connaître Flutter et souhaitez-vous en savoir plus? Ensuite, Flutter de zéro à une introduction de base au guide de lancement d'application sera votre meilleur choix ! Ici, vous pouvez trouver des ressources d'apprentissage Flutter complètes, y compris des exemples de code et une analyse approfondie. Vous vous demandez comment créer des applications avec Flutter ? Toutes les réponses sont dans notre rubrique ! N'hésitez plus, le contenu de la rubrique continuera d'être mis à jour, et le prix augmentera en conséquence. Inscrivez-vous maintenant et profitez du meilleur prix! Explorons ensemble le monde de Flutter ! Veulent en savoir plus? Cliquez ici pour afficher le guide de la colonne du livret Démarrage de Flutter Developer 101 . De plus, nous avons également un groupe de discussion dédié, vous pouvez cliquer ici pour rejoindre notre groupe de discussion afin de communiquer et d'apprendre avec d'autres apprenants Flutter.