【发布时间】：2021-10-16 13:47:20
【问题描述】：
我一直在尝试让底部导航栏在所有页面屏幕上持续存在，但它看起来只持续存在于底部导航上的页面，即 HomeScreen()、DiscoverScreen()、GivingScreen()、EventsScreen () 和设置屏幕()。其他页面没有得到底部导航。这是我的底部导航栏的代码。如何在应用中的所有页面上添加底部导航栏？
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: () {},
),
],
),
],
),
),
],
),
),
),
),
);
}
}
【问题讨论】：
-
你能显示第二张图片视图的代码吗？
-
是的，这里是：[链接] (mega.nz/file/…)
-
您必须在 SermonDescriptionScreen 类的 build 方法中包含 bottomNavigatorBar。 bottomNavigationBar: CustomBottomNavBar()