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目录查看更多

原创不易,您的点赞就是对我最大的支持,点个赞支持一下吧~