flutter - 导航栏中的过渡
问题描述
如何在底部导航栏中的相关页面之间添加平滑过渡?
我的代码:
class _NavBarState extends State<NavBar>{
int _selectedPage = 0;
final _pageOptions = [
MapScreen(),
HomeScreen(),
ProfileScreen()
];
@override
Widget build(BuildContext context){
return MaterialApp(
home: Scaffold(
body: _pageOptions[_selectedPage],
bottomNavigationBar: BottomNavigationBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
currentIndex: _selectedPage,
selectedIconTheme: IconThemeData(color: Colors.blue),
// showSelectedLabels: true,
onTap: (int index){
setState(() {
_selectedPage = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.location_on, color: Colors.black,),
// title: Text('MAPS', style: TextStyle(letterSpacing: 2.0, fontWeight: FontWeight.bold)),
title: Padding(padding: EdgeInsets.all(0),),
),
BottomNavigationBarItem(
icon:Icon(Icons.home, color: Colors.black,),
title: Padding(padding: EdgeInsets.all(0),)
),
BottomNavigationBarItem(
icon:Icon(Icons.person, color: Colors.black,),
title: Padding(padding: EdgeInsets.all(0),)
),
]
),
)
);
}
谢谢你的帮助
///////////////////////////////////////// ///////////////////////////////////////// /////////////////////////
解决方案
使用 PageView 在页面之间导航并添加平滑过渡:
class _NavBarState extends State<NavBar> {
int _selectedPage = 0;
PageController pageController = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: pageController,
children: <Widget>[
MapScreen(),
HomeScreen(),
ProfileScreen(),
],
),
bottomNavigationBar: BottomNavigationBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
currentIndex: _selectedPage,
unselectedItemColor: Colors.black, //here the unselected color
selectedIconTheme: IconThemeData(color: Colors.blue),
//showSelectedLabels: true,
onTap: (int index) {
setState(() {
_selectedPage = index;
});
pageController.animateToPage(
index,
duration: Duration(milliseconds: 500),
curve:
Curves.easeIn, //define the curve and duration of the transition
);
},
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.location_on,
),
// title: Text('MAPS', style: TextStyle(letterSpacing: 2.0, fontWeight: FontWeight.bold)),
title: Padding(
padding: EdgeInsets.all(0),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: Padding(
padding: EdgeInsets.all(0),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
),
title: Padding(
padding: EdgeInsets.all(0),
),
),
],
),
);
}
@override
void dispose() {
pageController.dispose();
super.dispose();
}
}
推荐阅读
- python - 解释器在尝试进行列表理解时说缩进/空格使用不一致
- r - 创建具有特殊格式的日期序列
- continuous-integration - MR合并到master后如何自动触发CI
- java - 使用 CSS 选择器单击按钮的特定实例
- html - 如何使单个图像在 CSS flex 或网格中响应并具有图像文本列?
- jquery - 如何删除标签并添加类?
- outlook - 使用 r 将 Outlook 电子邮件附件下载到本地驱动器
- javascript - 单击表中的任何用户名时,将出现一个模式并显示从 api 获取的用户的活动。反应
- bar-chart - 条形颜色和优先级
- firebase - 在 DevTools 中收到 FCM Web 推送消息,但未分派事件