Introducción a NavigationRail
Un widget de Material Design diseñado para aparecer en el lado izquierdo o derecho de una aplicación para navegar entre una pequeña cantidad de vistas (generalmente entre tres y cinco).
Escenas a utilizar:
A través de la propiedad Fila, el botón de la barra de menú izquierda o derecha
| Atributos | efecto |
|---|---|
| enDestinoSeleccionado | seleccione el oyente de devolución de llamada de índice |
| índice seleccionado | Índice del destino actualmente seleccionado |
| destinos | botón de menú de tienda |
| color de fondo | Color de fondo de la barra de navegación |
| elevación | Altitud |
| altura | altura de la barra de navegación |
| tipo de etiqueta | Ya sea para mostrar el texto en la parte inferior de la barra de menú |
| sombraColor | color de sombra |
| duración de la animación | Duración de la visualización de la animación de la cápsula |
| indicadorForma | Seleccionar esquinas redondeadas de fondo de menú o estilo de borde |
| indicadorColor | Color de fondo del menú seleccionado |
| principal | botón de menú superior |
| arrastrando | botón de menú inferior |
| grupoAlineación | arriba, centro, abajo La posición de visualización del botón de menú |
| estilo de texto de etiqueta seleccionado | estilo de selección de texto |
| no seleccionadoLabelTextStyle | estilo de texto no seleccionado |
| indicador de uso | Ya sea para mostrar el color de fondo del menú seleccionado |
| minAncho | ancho mínimo |
Grupo de atributos Alineación: arriba, centro, abajo
arriba
centro
abajo
líder: botón de menú superior
final: botón de menú inferior
indicadorForma: establece el estilo de esquina redondeada del fondo del botón
bloque de código
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'),
),
],
),
],
),
),
],
),
);
}
}