[英]How to show bottomnavigation bar in all pages in flutter
我正在創建一個具有底部導航欄的應用程序。在該底部導航欄中,它有 5 個項目名稱,即個人資料、關於我們、主頁、通知和購物車。 每個項目名稱都有自己的頁面。 現在的問題是我在主頁中添加了一個按鈕,如果我單擊該按鈕,它將轉到新頁面,但它不顯示底部導航欄。如何在新頁面中顯示底部導航欄以及選定的當前索引。 下面是dart代碼
主頁.dart
class MainPage extends StatefulWidget {
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
int _currentIndex = 0;
final tabs = [
Profile(),
AboutUs(),
Home(),
Notifications(),
CartPage(),
];
@override
void initState() {
super.initState();
_currentIndex = 2;
}
@override
Widget build(BuildContext context) {
return Consumer<Cart>(
builder: (context, cart, child) {
return PlatformScaffold(
body: tabs[_currentIndex],
bottomNavBar: PlatformNavBar(
android: (_) => MaterialNavBarData(
type: BottomNavigationBarType.fixed,
),
ios: (_) => CupertinoTabBarData(),
currentIndex: _currentIndex,
itemChanged: (index) => setState(
() {
_currentIndex = index;
},
),
items: [
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.person),
android: (_) => Icon(Icons.person),
),
title: Text('Profile'),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.info),
android: (_) => Icon(Icons.info),
),
title: Text('About Us'),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.home),
android: (_) => Icon(Icons.home),
),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => new Image.asset(
"assets/notification.png",
height: 21.0,
color: Colors.grey[600],
),
android: (_) => Icon(Icons.notifications),
),
title: Text(
'Notifications',
style: TextStyle(fontSize: 12.0),
),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.shopping_cart),
android: (_) => Stack(
children: <Widget>[
Icon(Icons.shopping_cart),
cart.count == 0 ? new Container(height: 0, width: 0,)
: new Positioned(
right: 0,
child: new Container(
padding: EdgeInsets.all(1),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(6),
),
constraints: BoxConstraints(
minWidth: 12,
minHeight: 12,
),
child: new Text(
'${cart.count}',
style: new TextStyle(
color: Colors.white,
fontSize: 8,
),
textAlign: TextAlign.center,
),
),
)
],
),
),
title: Text('Cart'),
),
],
),
);
},
);
}
}
首頁.dart
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => NewPage()));
},
child: Text('New Page'),
),
),
);
}
}
新頁.dart
class NewPage extends StatefulWidget {
@override
_NewPageState createState() => _NewPageState();
}
class _NewPageState extends State<NewPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
),
);
}
}
您可以將Scaffold
作為所有這些頁面的父級,並在Scaffold
上有一個BottomNavigationBar
,並將PageView
作為Scaffold
的body
:
Scaffold(
body: PageView(
controller: MyController(),
children: [
MyPage1(),
MyPage2(),
//...
],
onPageChanged: myOnPageChanged,
),
bottomNavigationBar: MyNavBar(),
)
我使用這種方法來添加一個所有頁面通用的小部件:
MaterialApp(
title: 'Flutter Demo',
initialRoute:"/home",
routes: [
...
],
builder: (context, child) {
return Stack(
children: [
child!,
Overlay(
initialEntries: [
OverlayEntry(
builder: (context) {
return YourCustomWidget(); *//This widget now appears on all pages*
},
),
],
),
],
);
},
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.