Flutter FloatingActionButton 实现类似咸鱼App底部导航凸起按钮

FloatingActionButton简称FAB，可以实现浮动按钮，也可以实现类似咸鱼app 的凸起导航按钮

一. FloatingActionButton常用属性

• child：子视图，一般为Icon，不推荐使用文字
• tooltip：FAB被长按时显示，也是无障碍功能
• backgroundColor：背景颜色
• elevation：未点击时候的阴影
• hignlightElevation：点击是阴影值，默认是12.0
• onPressed：点击事件回调
• shape：可以定位FAB的形状等
• mini：是否是mini类型默认是false

二.咸鱼凸起按钮实现

1.咸鱼效果

image.png

2.实现思路：用浮动按钮盖住tab按钮

image.png

3.代码实现

• Scaffold组件 添加floatingActionButton按钮，修改floatingActionButton的大小和颜色 为合适状态
• 通过设置margin 来调整 floatingActionButton 的位置
• Scaffold组件 添加floatingActionButton按钮，修改floatingActionButton的大小和颜色 为合适状态
• Scaffold组件 添加BottomNavigationBar 底部按钮

class TrackerMainScreen extends StatefulWidget {

  const TrackerMainScreen(this._deviceId);
  BottomButton createState() => BottomButton();
}
class BottomButton extends State {
  var currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Container(
        height: 80,
        width: 80,
        margin: EdgeInsets.only(bottom: 15),
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40), color: Colors.white),
        child: FloatingActionButton(
          child: Icon(Icons.info),
          onPressed: () {
            print("点击浮动按钮");
          },
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        fixedColor: Colors.pink,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              title: Text("首页", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.list, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("发布", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.satellite, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("故事", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.account_balance, color: Colors.grey)),
        ],
      ),
      body: Container(color: Colors.amber,),
    );
  }
}

4.效果图

image.png

三. 注意

• BottomNavigationBar 和FloatingActionButton 都在Scaffold 组件中创建
• BottomNavigationBarItem中的icon 是必须写的
• 凸起按钮实现思路：用FloatingActionButton盖住BottomNavigationBar