Я использую флаттер. Я хотел бы перемещаться между страницами нижней панели навигации изнутри тела страницы. Не создавать новый экран поверх него. И переносить данные между страницами. Я использую классическую нижнюю панель навигации во флаттере со страницами в теле скаффолда.
Что-то вроде этого.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
Я пробовал просмотр страниц, но при этом я могу переключаться между страницами только при пролистывании и не могу отправлять данные между ними.
вы можете просто имитировать запуск _onItemTapped()
с индексом вашего целевого элемента навигации, в значок кнопки поиска onPressed
добавьте это:
onPressed: () {
//...
_onItemTapped(2); // replace 2 with you screen index.
}
это приведет к программному переходу на страницу поиска.
вы также можете получить этот виджет из других мест с помощью A GlobalKey
:
Во-первых, создайте GlobalKey
в глобальной области (сделайте его вне вашего класса StatefulWidegt
)
final glbKey = GlobalKey();
затем назначьте этот ключ BottomNavigationBar
:
bottomNavigationBar: BottomNavigationBar(
key: glbKey,
items: const <BottomNavigationBarItem>[
// ...
Теперь вы можете вызвать его из своего метода onPressed
следующим образом:
onPressed: () {
//...
BottomNavigationBar navigationBar = glbKey.currentWidget as BottomNavigationBar;
navigationBar.onTap!(2); // change 2 with index of your target screen
}