按照教程结果直接运行发现效果不如预期,如下图所示

具体核心代码如下
@override
Widget build(BuildContext context) {
// 脚手架
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon( Icons.wifi_tethering, color: _BottomNavigationColor ),
title: Text( '发现', style:TextStyle( color: _BottomNavigationColor )),
),
BottomNavigationBarItem(
icon: Icon( Icons.shopping_basket, color: _BottomNavigationColor ),
title: Text( '购物', style:TextStyle( color: _BottomNavigationColor )),
),
BottomNavigationBarItem(
icon: Icon( Icons.notifications_active, color: _BottomNavigationColor ),
title: Text( '消息', style:TextStyle( color: _BottomNavigationColor )),
),
BottomNavigationBarItem(
icon: Icon( Icons.person, color: _BottomNavigationColor ),
title: Text( '我的', style:TextStyle( color: _BottomNavigationColor )),
),
],
),
);
}
发现并不是我们想要的,最终效果预期如下图所示

@override
Widget build(BuildContext context) {
// 脚手架
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon( Icons.wifi_tethering, color: _BottomNavigationColor ),
title: Text( '发现', style:TextStyle( color: _BottomNavigationColor )),
),
BottomNavigationBarItem(
icon: Icon( Icons.shopping_basket, color: _BottomNavigationColor ),
title: Text( '购物', style:TextStyle( color: _BottomNavigationColor )),
),
BottomNavigationBarItem(
icon: Icon( Icons.notifications_active, color: _BottomNavigationColor ),
title: Text( '消息', style:TextStyle( color: _BottomNavigationColor )),
),
BottomNavigationBarItem(
icon: Icon( Icons.person, color: _BottomNavigationColor ),
title: Text( '我的', style:TextStyle( color: _BottomNavigationColor )),
),
],
// 新增该参数即可
type: BottomNavigationBarType.fixed,
),
);
}
至此填坑完毕
填坑记
评论前必须登录!
注册