Flutter 底部浮动按钮,模仿咸鱼 APP 底部

• 搭建整体布局
  

• PageView布局:
  

• FloatingActionButton按钮代码:
  

• 底部Button按钮:
  

• 设置FloatButton位置
  

• FloatButton优化
  

教养不是道德规范，也不是小学生行为准则，其实也并不跟文化程度，社会发展，经济水平挂钩，它更是一种体谅，体谅别人的不容易，体谅别人的处境和习惯。

先来康康今天的效果:

效果图(1.1):

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15ad45fec8

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

834597b711a4ec8df18033~tplv-k3u1fbpfcp-zoom-1.image)

分析:

• 使用 Scaffold 脚手架完成整体布局的搭建

• 使用 PageView + floatingActionButton + bottomNavigationBar 完成底部导航栏的搭建

• 通过设置 floatingActionButtonLocation 来设置 FloatButton 按钮的位置

搭建整体布局

//用来标识当前点击按钮下标 int _index = 0;

PageController _pageController;

@overridevoid initState() {//初始化 PageView 控制器_pageController = PageController();}@overrideWidget build(BuildContext context) {return Scaffold(body: Container(alignment: Alignment.center,child: initPageView(),),

//初始化 floatingActionButtonfloatingActionButton: 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):