Чтобы изменить элемент при нажатии элемента нижней панели навигации во Flutter, вы можете использовать разные подходы. Я предоставлю вам несколько методов вместе с примерами кода:
Метод 1: использование виджетов с отслеживанием состояния и IndexedStack
Этот метод предполагает использование StatefulWidget
и IndexedStack
для управления состоянием и содержимым, отображаемым при достижении нижнего уровня. выбран элемент панели навигации.
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
static List<Widget> _widgetOptions = <Widget>[
HomeScreen(),
FavoritesScreen(),
ProfileScreen(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: _widgetOptions,
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
label: 'Favorites',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Home Screen'),
);
}
}
class FavoritesScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Favorites Screen'),
);
}
}
class ProfileScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Profile Screen'),
);
}
}
В этом примере виджет MyHomePage
представляет собой главный экран. Он содержит bottomNavigationBar
и IndexedStack
. При касании элемента вызывается функция _onItemTapped
, обновляющая выбранный индекс. Затем IndexedStack
отображает соответствующий экран на основе выбранного индекса.
Метод 2: использование PageView
Другой метод – использование виджета PageView
для управления экранами и прокрутки между ними при нажатии на нижний элемент панели навигации.
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
PageController _pageController;
@override
void initState() {
super.initState();
_pageController = PageController(initialPage: _selectedIndex);
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
_pageController.animateToPage(
index,
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _pageController,
onPageChanged: _onItemTapped,
children: <Widget>[
HomeScreen(),
FavoritesScreen(),
ProfileScreen(),
],
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
label: 'Favorites',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
);
}
}
// Screen classes are the same as in Method 1
При таком подходе виджет PageView
управляет экранами, а функция _onItemTapped
вызывается при нажатии на элемент. Он обновляет выбранный индекс и анимирует переход страницы с помощью PageController
.