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

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

水深无声 2021-07-25 02:45 826阅读 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>[
        ],
      ),
    );
  }
}