Introduction à NavigationRail
Un widget Material Design conçu pour apparaître sur le côté gauche ou droit d'une application pour naviguer entre un petit nombre de vues (généralement entre trois et cinq).
scènes à utiliser :
Via la propriété Row, le bouton de la barre de menu gauche ou droite
| Les attributs | effet |
|---|---|
| onDestinationSelected | sélectionnez l'écouteur de rappel d'index |
| index sélectionné | Index de la destination actuellement sélectionnée |
| destination | bouton de menu de magasin |
| Couleur de l'arrière plan | Couleur de fond de la barre de navigation |
| élévation | Altitude |
| hauteur | hauteur de la barre de navigation |
| type d'étiquette | Afficher ou non le texte en bas de la barre de menus |
| shadowColor | couleur de l'ombre |
| animationDurée | Durée d'affichage de l'animation de la capsule |
| indicateurForme | Sélectionnez l'arrière-plan du menu, les coins arrondis ou le style de bordure |
| indicateurCouleur | Couleur d'arrière-plan du menu sélectionné |
| premier | bouton du menu supérieur |
| traînant | bouton du menu du bas |
| GroupAlignement | haut, centre, bas La position d'affichage du bouton de menu |
| style de texte d'étiquette sélectionné | style de sélection de texte |
| style de texte d'étiquette non sélectionné | style de texte non sélectionné |
| useIndicateur | Afficher ou non la couleur d'arrière-plan du menu sélectionné |
| largeur min | largeur minimale |
Groupe d'attributsAlignement : haut, centre, bas
en haut
au centre
en bas
interlignage : bouton de menu supérieur
fin : bouton de menu inférieur
indicatorShape : définit le style de coin arrondi de l'arrière-plan du bouton
bloc de code
import 'package:flutter/material.dart';
class NavigationRails extends StatefulWidget {
const NavigationRails({
super.key});
State<NavigationRails> createState() => _NavigationRailsState();
}
class _NavigationRailsState extends State<NavigationRails> {
int _selectedIndex = 0;
NavigationRailLabelType labelType = NavigationRailLabelType.all;
bool showLeading = false;
bool showTrailing = false;
double groupAlignment = -1.0;
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
NavigationRail(
selectedIndex: _selectedIndex,
groupAlignment: groupAlignment,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
labelType: labelType,
minExtendedWidth: 150,
indicatorColor: Colors.red,
indicatorShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: BorderSide(color: Colors.yellow, width: 2.0),
),
leading: showLeading
? FloatingActionButton(
elevation: 0,
onPressed: () {
// Add your onPressed code here!
},
child: const Icon(Icons.add),
)
: const SizedBox(),
trailing: showTrailing
? IconButton(
onPressed: () {
// Add your onPressed code here!
},
icon: const Icon(Icons.more_horiz_rounded),
)
: const SizedBox(),
destinations: const <NavigationRailDestination>[
NavigationRailDestination(
icon: Icon(Icons.favorite_border),
selectedIcon: Icon(Icons.favorite),
label: Text('First'),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.book),
label: Text('Second'),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text('Third'),
),
],
),
const VerticalDivider(thickness: 1, width: 1),
// This is the main content.
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('selectedIndex: $_selectedIndex'),
const SizedBox(height: 20),
Text('Label type: ${
labelType.name}'),
const SizedBox(height: 10),
OverflowBar(
spacing: 10.0,
children: <Widget>[
ElevatedButton(
onPressed: () {
setState(() {
labelType = NavigationRailLabelType.none;
});
},
child: const Text('None'),
),
ElevatedButton(
onPressed: () {
setState(() {
labelType = NavigationRailLabelType.selected;
});
},
child: const Text('Selected'),
),
ElevatedButton(
onPressed: () {
setState(() {
labelType = NavigationRailLabelType.all;
});
},
child: const Text('All'),
),
],
),
const SizedBox(height: 20),
Text('Group alignment: $groupAlignment'),
const SizedBox(height: 10),
OverflowBar(
spacing: 10.0,
children: <Widget>[
ElevatedButton(
onPressed: () {
setState(() {
groupAlignment = -1.0;
});
},
child: const Text('Top'),
),
ElevatedButton(
onPressed: () {
setState(() {
groupAlignment = 0.0;
});
},
child: const Text('Center'),
),
ElevatedButton(
onPressed: () {
setState(() {
groupAlignment = 1.0;
});
},
child: const Text('Bottom'),
),
],
),
const SizedBox(height: 20),
OverflowBar(
spacing: 10.0,
children: <Widget>[
ElevatedButton(
onPressed: () {
setState(() {
showLeading = !showLeading;
});
},
child:
Text(showLeading ? 'Hide Leading' : 'Show Leading'),
),
ElevatedButton(
onPressed: () {
setState(() {
showTrailing = !showTrailing;
});
},
child: Text(
showTrailing ? 'Hide Trailing' : 'Show Trailing'),
),
],
),
],
),
),
],
),
);
}
}