flutter 底部导航栏使用BottomAppBar组件和floatingActionButton浮动按钮组件实现中间嵌入式圆形导航

喜欢ヅ旅行 2021-07-24 13:32 831阅读 0赞

底部导航栏使用BottomAppBar组件
    	底部导航栏除了可以使用BottomNavigationBar固定样式外,还可以自定义导航栏中的按钮
    	
    	BottomAppBar(
              color:,  底部导航栏颜色  
              shape: CircularNotchedRectangle(),    有缺口的圆形矩阵,用来放置浮动按钮
              child:导航栏内容
            )

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

代码示例:

import "package:flutter/material.dart";
    import "drag.dart";
    
    import 'page/1.dart';
    import 'page/2.dart';
    import 'page/3.dart';
    
    
    void main()
    { 
      runApp(App());
    }
    class App extends StatelessWidget { 
      const App({ Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) { 
        return App2();
      }
    }
    
    class App2 extends StatefulWidget { 
      App2({ Key key}) : super(key: key);
    
      @override
      _AppState createState() => _AppState();
    }
    
    class _AppState extends State<App2> { 
    
      List _page=[Home3(),Home2(),Home4()];
      int index=0;
    
      @override
      Widget build(BuildContext context) { 
        return  MaterialApp(
          home:Scaffold(
            appBar:AppBar(
              title: Text('小案例'),
            ),
            body:_page[index] ,
            floatingActionButton: FloatingActionButton(
              onPressed: (){ },
              tooltip: 'js',
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
            ),
            floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
            //不适用固定格式的导航栏
            bottomNavigationBar:BottomAppBar(
              color: Colors.lightBlue,
              //有缺口的圆形矩阵,用来放置浮动按钮
              shape: CircularNotchedRectangle(),
              //导航栏内容
              child: Row(
                mainAxisAlignment:MainAxisAlignment.spaceEvenly,
                //设置内容
                children: <Widget>[
                  IconButton(
                    icon:Icon(Icons.home),
                    color: Colors.white,
                    onPressed: (){ },
                  ),
                  IconButton(
                    icon:Icon(Icons.category),
                    color: Colors.white,
                    onPressed: (){ },
                  ),
              ],),
            )
          ),
          
          //去掉右上角的debug贴纸
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue
          ),
          );
      }
    }
    
    
    class Home extends StatefulWidget { 
    
      @override
      _HomeState createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> { 
    
      Color dragColor=Colors.orange;
    
      @override
      Widget build(BuildContext context) { 
        return Container(
           child: Text('a'),
        );
      }
    }

[20200426170429838.png]: /images/20210724/2d28707e0ee445c8a51304ff4a62e65d.png