咸鱼底部导航,Flutter 底部浮动按钮(模仿咸鱼APP底部)"/>
android仿咸鱼底部导航,Flutter 底部浮动按钮(模仿咸鱼APP底部)
Flutter 底部浮动按钮,模仿咸鱼APP底部
搭建整体布局
PageView布局:
FloatingActionButton按钮代码:
底部Button按钮:
设置FloatButton位置
FloatButton优化
教养不是道德规范，也不是小学生行为准则，其实也并不跟文化程度，社会发展，经济水平挂钩，它更是一种体谅，体谅别人的不容易，体谅别人的处境和习惯。
先来康康今天的效果:
效果图(1.1):
分析:
使用Scaffold脚手架完成整体布局的搭建
使用PageView + floatingActionButton + bottomNavigationBar 完成底部导航栏的搭建
通过设置floatingActionButtonLocation来设置FloatButton按钮的位置
搭建整体布局
//用来标识当前点击按钮下标
int _index = 0;
PageController _pageController;
@override
void initState() {
//初始化PageView控制器
_pageController = PageController();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
alignment: Alignment.center,
child: initPageView(),
),
//初始化floatingActionButton
floatingActionButton: initFloatingActionButton(),
//初始化底部Button按钮
bottomNavigationBar: initBottomNavigationBar(),
);
}
PageView布局:
/*
* PageView布局
*/
PageView initPageView() {
return PageView(
controller: _pageController,
onPageChanged: (index) {
setState(() {
_index = index;
});
},
children: [
initPageViewItem("11"),
initPageViewItem("22"),
initPageViewItem("33"),
initPageViewItem("44"),
initPageViewItem("55"),
],
);
}
initPageViewItem(String s) {
return Container(
child: Center(
child: Text(s),
),
);
}
PageView通过PageController(PageView控制器)中pageController.jumpToPage(int);方法来设置当前Button跟随变化
FloatingActionButton按钮代码:
Widget initFloatingActionButton() {
return FloatingActionButton(
backgroundColor: Colors.grey,
//阴影
elevation: 10,
onPressed: () {
setState(() {
// 按钮跟随button同步
_pageController.jumpToPage(_index);
});
},
child: Icon(Icons.android),
);
}
底部Button按钮:
(使用BottomNavigationBar)
BottomNavigationBar initBottomNavigationBar() {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
//Button按钮跟随滑动
currentIndex: _index,
onTap: (index) {
setState(() {
_index = index;
});
_pageController.jumpToPage(_index);
},
items: [
initBottomNavigationBarItem("11", Icons.colorize, _index == 0),
initBottomNavigationBarItem("22", Icons.cancel, _index == 1),
initBottomNavigationBarItem("00", Icons.cancel, _index == 2),
initBottomNavigationBarItem("33", Icons.android, _index == 3),
initBottomNavigationBarItem("43", Icons.ios_share, _index == 4),
],
);
}
/// [s] 当前标题
/// [icon] 当前图片
/// [isCheck] 是否选中
initBottomNavigationBarItem(String s, IconData icon, bool isSelect) {
return BottomNavigationBarItem(
title: Text(
s,
style: TextStyle(color: isSelect ? Colors.lightGreen : Colors.grey),
),
icon: Icon(
icon,
color: isSelect ? Colors.lightGreen : Colors.grey,
),
);
}
来看看现在的效果图:
效果图(1.2):
设置FloatButton位置
@override
Widget build(BuildContext context) {
return Scaffold(
.....
//Float位于导航栏之间
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
.....
);
}
通过floatingActionButtonLocation:参数来设置Float的位置
centerDocked
centerFloat
miniStartFloat
centerTop
endDocked
startTop
这里的参数还特别多,我就给大家列举这些:
这里咋们用:
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
让FloatButton位于底部按钮之间即可;
FloatButton优化
最后可以使用Container包裹FloatButton,给FloatButton设置一层白色的背景颜色更加真实;
Container initFloatingActionButton() {
return Container(
margin: EdgeInsets.only(top: 10),
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 3),
borderRadius: BorderRadius.circular(40)),
child: FloatingActionButton(
backgroundColor: _index == 2 ? Colors.yellow : Colors.grey,
elevation: 10,
onPressed: () {
setState(() {
_index = 2;
_pageController.jumpToPage(_index);
});
},
child: Icon(Icons.android),
),
);
}
完整代码
猜你喜欢:
Android 凸起切换按钮(模仿咸鱼App底部)
去Flutter目录查看更多
原创不易,您的点赞就是对我最大的支持,点个赞支持一下吧~
更多推荐
android仿咸鱼底部导航,Flutter 底部浮动按钮(模仿咸鱼APP底部)
发布评论