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

咸鱼底部导航,Flutter FloatingActionButton 实现类似咸鱼App底部导航凸起按钮..."/>

android仿咸鱼底部导航,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