我正在试着让这个底部的导航杆飘动，现在我有一个挑战.我已经创建了一个mainagee.dart，我在其中放置了appbar和底部的导航条形码.选项卡的屏幕放在Screens文件夹中.这是我在底部导航栏中的代码
Padding(
padding: const EdgeInsets.only(top: 0.0, bottom: 30, left: 50, right:50),
child: ClipRRect(
borderRadius: BorderRadius.circular(30.0), // Rounded corners for all sides
child: BottomNavigationBar(
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
elevation: 0.0,
showSelectedLabels: false, // Hide labels for selected tab
showUnselectedLabels: false, // Hide labels for unselected tabs
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite, ),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: '', // Empty label
),
],
),
),
),
所以这里的 idea 是让底部导航栏浮动在标签屏幕的顶部，这样如果你在主页标签上，内容可以滚动到底部导航栏后面，就像下面这张照片中的琥珀色代表的内容.
But every time I call the body:pages[_currentIndex] the bottom navigation bar seems to be having a white background, or the color matching with the scaffold of the MainPage(). It's creating like it's on container
class MainMenu extends StatefulWidget {
const MainMenu({super.key});
static const String id = "landingpage";
@override
State<MainMenu> createState() => _MainMenuState();
}
class _MainMenuState extends State<MainMenu> {
GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
int _currentIndex = 0;
// Define your pages/screens
final List<Widget> screens = [
FavoritePage(),
HomePage(),
ListingsPage(),
ProfilePage(),
];
bool drawerCanOpen = true;
final kDrawerItemStyle = TextStyle(
fontSize: 16,
);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.amber,
bottomNavigationBar: Padding(
padding: const EdgeInsets.only(top: 0.0, bottom: 30, left: 50, right:50), // Add padding to the entire bottom navigation bar
child: ClipRRect(
borderRadius: BorderRadius.circular(30.0), // Rounded corners for all sides
child: BottomNavigationBar(
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
elevation: 0.0,
showSelectedLabels: false, // Hide labels for selected tab
showUnselectedLabels: false, // Hide labels for unselected tabs
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite, ),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: '', // Empty label
),
],
),
),
),
key: scaffoldKey,
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
_currentIndex <= 0
? SliverAppBar(
foregroundColor: Color.fromARGB(255, 12, 3, 3),
title: Row(children: [
// Image.asset(
// 'assets/logo1.png',
// height: 40,
// width: 40,
// ),
// Text('glacier'),
]
),
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundColor: Color.fromARGB(255, 255, 255, 255),
radius: 20,
child: IconButton(
icon: FaIcon(FontAwesomeIcons.bars),
onPressed: () {
if (drawerCanOpen) {
scaffoldKey.currentState?.openDrawer();
} else {
setState(() {
drawerCanOpen = true;
});
}
},
color: Colors.black87,
),
),
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
color: Color.fromARGB(255, 18, 255, 0),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 5.0,
spreadRadius: 0.5,
offset: Offset(
0.7,
0.7,
),
),
],
),
child: Badge(
backgroundColor: Colors.red,
padding: const EdgeInsets.all(7),
textStyle: const TextStyle(fontSize: 10.0),
largeSize: 20.0,
label: const Text('1'),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 20,
child: IconButton(
icon: FaIcon(FontAwesomeIcons.bagShopping),
onPressed: () {
Get.to(() => const CartPage(),
duration:
const Duration(milliseconds: 200),
transition: Transition.rightToLeft);
},
color: Colors.black87,
),
),
),
),
),
],
expandedHeight: 50,
scrolledUnderElevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
floating: false,
pinned: true,
elevation: innerBoxIsScrolled ? 4 : 0,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
background: Container(
color: Colors.amber, // Set your desired background color here
),
),
)
: SliverToBoxAdapter(
child: SizedBox.shrink(),
),
];
},
body: screens[_currentIndex],
),
);
}
}