flutter 利用浮动按钮,实现导航栏中间放置圆形按钮效果

水深无声 2021-07-25 02:45 767阅读 0赞

思路:
    在Scaffold中设置浮动按钮->外包Container设置宽高来控制按钮大小->
    利用浮动按钮的位置参数floatingActionButtonLocation设置值为centerDocked
    定位到底部导航栏的中心靠上->设置外包容器的圆角和背景色实现按钮的边框效果
    ->利用按钮大小和margin等布局遮盖掉导航栏中心原来的图标->在事件中根据导航栏索引来设置页面导航

代码示例:

import "package:flutter/material.dart";
    import 'page/1.dart';
    import 'page/2.dart';
    import 'page/3.dart';
    
    import 'page/routes.dart';
    
    
    void main()
    { 
      runApp(App());
    }
    
    class App extends StatelessWidget{ 
    
    
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return MaterialApp(
          //去掉右上角的debug贴纸
          debugShowCheckedModeBanner: false,
          home:Tabs(),
          //默认路由
          initialRoute:'/me' ,
          //路由跳转参数配置
          onGenerateRoute:routeInfo
          );
      }
    }
    
    class Tabs extends StatefulWidget { 
      final index;
      Tabs({ Key key,this.index=0}) : super(key: key);
    
      @override
      _TabsState createState() => _TabsState(index:this.index);
    }
    
    class _TabsState extends State<Tabs> { 
      int index=0;
      _TabsState({ this.index=0});
      List _page=[Home3(),Home2(),Home4()];
      @override
      Widget build(BuildContext context) { 
        return Scaffold(appBar: AppBar(title: Text("hh")),
    	//浮动按钮
          floatingActionButton: Container(
            child: FloatingActionButton(
                child: Icon(Icons.add),
                //事件导航
                onPressed: (){ setState(() { 
                    this.index=1;              
                });},
                backgroundColor: this.index==1? Colors.red:Colors.yellow
              ),
              height: 60,
              width: 60,
              padding: EdgeInsets.all(8),
              margin: EdgeInsets.only(top:10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(40),
                color: Colors.blue
              ),
          ),
          //设置按钮位置
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    
          body:_page[this.index],
    
          bottomNavigationBar: BottomNavigationBar(
            items:[ 
              BottomNavigationBarItem(//单个bar内容
                icon:Icon(Icons.home),
                title:Text("首页"),
              
              ),
              BottomNavigationBarItem(
                icon:Icon(Icons.category),
                title:Text("第二页"),
                
              ),
              BottomNavigationBarItem(
                icon:Icon(Icons.category),
                title:Text("第三页"),
    
              )
            ],
            currentIndex: this.index, //选中的底部bar索引
            fixedColor: Colors.green,  //选中的颜色
    
            onTap:(index){ setState(() { 
              this.index=index;
            });}, //点击bar回调,必须传入index参数,bar的索引
      
          ),
          );
      }
    }
    
    
    class Home extends StatelessWidget { 
      const Home({ Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: Column(
            children: <Widget>[
              
            ],
          ),
        );
      }
    }

效果图:  
![在这里插入图片描述][20200416160010429.png]

[20200416160010429.png]: /images/20210724/dc40842f9d484ccb82616fe23f6e78f4.png