Je veux construire une barre de navigation inférieure avec une pageView. Ce seront 3 pages et vous pouvez passer à gauche ou à droite. Je peux glisser mais ma barre de navigation sélectionnée des éléments de couleur ne change pas. Pouvez-vous m'aider?
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;
final PageController _pageController = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.portrait), title: Text('Profile')),
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart), title: Text('Shop'))
],
onTap: _onTappedBar,
selectedItemColor: Colors.orange,
currentIndex: _selectedIndex,
),
body: PageView(
controller: _pageController,
children: <Widget>[
ProfilePage(),
HomeTables(),
ShoppingPage(),
],
),
);
}
void _onTappedBar(int value) {
setState(() {
_selectedIndex = value;
});
_pageController.jumpToPage(value);
}
}
Il suffit d'ajouter ONPAGECHANGED Propriété de PageView
et attribuez la propriété pageIndex
à _selectedIndex
, Puis rechargez le widget à l'aide de setState()
.
Onpagechanged - Appelé chaque fois que la page du centre de la fenêtre change.
PageView(
....
onPageChanged: (pageIndex) {
setState(() {
_selectedIndex = pageIndex;
});
},
...
)