底部导航在某些页面上不存在
底部导航在某些页面上不存在
提问于 2021-08-13 09:44:57
我一直在尝试让底部导航栏在所有页面屏幕上保持不变，但它看起来只对底部导航的页面保持不变，即HomeScreen()、DiscoverScreen()、GivingScreen()、EventsScreen()和SettingsScreen()。其他页面没有获得底部导航。这是我底部导航栏的代码。如何在应用程序中的所有页面上添加底部导航栏？
class CustomBottomNavBar extends StatefulWidget {
const CustomBottomNavBar({Key key}) : super(key: key);
@override
_CustomBottomNavBarState createState() => _CustomBottomNavBarState();
}
class _CustomBottomNavBarState extends State<CustomBottomNavBar> {
int currentIndex = 0;
final screens = [
HomeScreen(),
DiscoverScreen(),
GivingScreen(),
EventsScreen(),
SettingsScreen(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: currentIndex,
children: screens,
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: kPrimaryColor,
selectedItemColor: kSelectedItemColor,
iconSize: kBottomNavIconSize,
unselectedItemColor: kAlternativeColor,
selectedFontSize: kBottomNavFontSize,
unselectedFontSize: kBottomNavFontSize,
showUnselectedLabels: true,
showSelectedLabels: true,
currentIndex: currentIndex,
onTap: (index) => setState(() => currentIndex = index),
items: [
BottomNavigationBarItem(
icon: Icon(
CupertinoIcons.mic_fill,
),
label: 'Sermons',
),
BottomNavigationBarItem(
icon: Icon(
CupertinoIcons.wand_stars_inverse,
),
label: 'Discover',
),
BottomNavigationBarItem(
icon: Icon(
CupertinoIcons.heart_fill,
),
label: 'Giving',
),
BottomNavigationBarItem(
icon: Icon(
CupertinoIcons.calendar_today,
),
label: 'Events',
),
BottomNavigationBarItem(
icon: Icon(
CupertinoIcons.gear_alt_fill,
),
label: 'Settings',
),
],
),
);
}
}这是一个具有底部导航的视图的图片
这是一个没有底部导航的视图的图片
import 'package:church_app/components/widgets/animated_like_button.dart';
import 'package:church_app/components/widgets/custom_bottom_nav_bar.dart';
import 'package:church_app/components/widgets/navigation_drawer.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:church_app/utilities/constants.dart';
import 'package:church_app/components/widgets/action_and_text.dart';
class SermonDescriptionScreen extends StatefulWidget {
@override
_SermonDescriptionScreenState createState() =>
_SermonDescriptionScreenState();
}
class _SermonDescriptionScreenState extends State<SermonDescriptionScreen> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
endDrawer: NavigationDrawer(),
appBar: AppBar(
leading:
(ModalRoute.of(context)?.canPop ?? false) ? BackButton() : null,
iconTheme: IconThemeData(color: kPrimaryColor),
elevation: 0,
title: Text(
'Protect The Vessel',
style: kMainStyling,
),
centerTitle: true,
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SafeArea(
left: true,
right: true,
top: true,
bottom: true,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 250,
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey[300],
blurRadius: 30,
offset: Offset(0, 10),
),
],
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/images/pastor.jpg'),
),
),
),
addVSpace(30),
Container(
margin: EdgeInsets.only(left: 10, right: 10, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Protect The Vessel',
style: kDescriptionTitle,
softWrap: true,
),
addVSpace(3),
Text(
'Pastor James Wiseman',
style: kMainStyling.copyWith(
color: kPrimaryColor.withOpacity(.8),
),
softWrap: true,
),
addVSpace(3),
Row(
children: [
Text(
'Jan 25, 2021',
style: kMainStyling.copyWith(
color: kPrimaryColor.withOpacity(.8),
),
softWrap: true,
),
Padding(
padding: const EdgeInsets.only(left: 10, right: 10),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: kPrimaryColor,
),
width: 8,
height: 8,
),
),
Container(
child: AnimatedLikeButton(),
),
],
),
addVSpace(20),
Text(
'Are you protecting what matters? In Protect What Matters, Pastor James Wiseman reminds us that we are vessels that can either foster bitterness or make way for the healing hand of God in our lives.',
style: kMainStyling,
softWrap: true,
textAlign: TextAlign.justify,
maxLines: 6,
),
addVSpace(30),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ActionAndText(
correspondingIcon:
CupertinoIcons.arrow_down_to_line_alt,
correspondingText: 'Download',
gesture: () {},
),
ActionAndText(
correspondingIcon: CupertinoIcons.heart,
correspondingText: 'Like',
gesture: () {},
),
ActionAndText(
correspondingIcon: CupertinoIcons.play,
correspondingText: 'Listen',
gesture: () {
Navigator.pushNamed(context, '/playerScreen');
},
),
ActionAndText(
correspondingIcon: CupertinoIcons.square_arrow_up,
correspondingText: 'Share',
gesture: () {},
),
],
),
],
),
),
],
),
),
),
),
);
}
}回答 4
Stack Overflow用户
发布于 2021-08-13 09:58:21
使用pub dev网站上的custom_navigator 0.3.0包
Stack Overflow用户
发布于 2021-08-13 10:01:21
要实现这一点，您可以在bottomNavigationBar中使用pageView ...这是一个示例代码。这将给出如何去做的想法..
Scaffold buildAuthScreen() {
return Scaffold(
body: PageView(
scrollDirection: Axis.horizontal,
children: [
Timeline(),
ActivityFeedItem(),
Search(),
Upload(),
Profile(
currentUser: _auth.currentUser.uid,
),
],
controller: _pageController,
onPageChanged: (value) {
setState(() {
pageIndex = value;
});
},
physics: BouncingScrollPhysics(),
),
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: pageIndex,
height: 50.0,
color: Theme.of(context).primaryColor,
items: [
Icon(Icons.whatshot, color: Colors.white),
Icon(Icons.notifications_active, color: Colors.white),
Icon(Icons.search, color: Colors.white),
Icon(Icons.photo_camera, color: Colors.white),
Icon(Icons.account_circle, color: Colors.white),
],
animationDuration: Duration(milliseconds: 200),
buttonBackgroundColor: Theme.of(context).accentColor,
backgroundColor: Colors.white,
onTap: (int pageIndex1) {
_pageController.animateToPage(pageIndex1,
duration: Duration(microseconds: 300), curve: Curves.bounceInOut);
},
),
);
}Stack Overflow用户
发布于 2021-08-13 10:26:41
您可以在所有屏幕中使用此软件包https://pub.dev/packages/persistent_bottom_nav_bar作为persistent bottom navigator，
当尝试使用下面的导航器功能导航到新屏幕时，
pushNewScreen(
context,
screen: MainScreen(),
withNavBar: true, // OPTIONAL VALUE. True by default.
pageTransitionAnimation: PageTransitionAnimation.cupertino,
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68770124
复制相关文章
相似问题
腾讯云开发者
