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

原創不易,您的點贊就是對我最大的支持,點個贊支持一下吧~