flutter 底部导航栏组件BottomNavigationBar

淡淡的烟草味﹌ 2021-07-24 23:58 691阅读 0赞

底部导航栏组件
    	(1)在Scaffold组件中与body同级设置
    		bottomNavigationBar: BottomNavigationBar(...)
    	(2)实现点击改变效果需要在有状态组件中根据索引实现，不同的页面根据不同的组件内容来设置,放进数值里,根据索引选择
    
    	参数:
    		BottomNavigationBar(
            items:[    配置导航栏每个bar内容,数值类型必须是List<BottomNavigationBarItem>
              	BottomNavigationBarItem(  单个bar内容
    	            icon:Icon(Icons.home),  设置图标
    	            title:Text("首页"),   bar的文本标签内容
    	            backgroundColor: Colors.red,  点击切换时,整个导航栏的颜色
    	            activeIcon:Icon(Icons.hd)  选中图标
              ),
              
            currentIndex: n,   通过索引选中bar
            fixedColor: Colors.green,   选中的icon和文字颜色
            selectedItemColor:Colors.green,   选中的icon和文字颜色,不能和fixedColor同时出现
            unselectedItemColor: Colors.blue,  未选中的icon和文字颜色,不能和fixedColor同时出现
            iconSize: 35, 
            selectedFontSize: 20,
            unselectedFontSize: 10,
            backgroundColor: Colors.red,  整个导航栏的颜色fixed类型下有效
            
            onTap:(index){setState(() {  点击bar回调,必须传入index参数,bar的索引
              this._index=index;
            });},
            type: BottomNavigationBarType.shifting  点击会有切换变大的特效,.fixed类型可以放置任意多的bar,无特效
          ),
      );

代码示例:

import "package:flutter/material.dart";
    import 'page/1.dart';
    import 'page/2.dart';
    
    void main()
    { 
      runApp(App());
    }
    
    class App extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        // TODO: implement build
        return MaterialApp(
          home:Tabs()
          ,);
      }
    }
    
    class Tabs extends StatefulWidget { 
      Tabs({ Key key}) : super(key: key);
    
      @override
      _TabsState createState() => _TabsState();
    }
    
    class _TabsState extends State<Tabs> { 
      int _index=0;
      List _page=[Home2(),Home3()];
      @override
      Widget build(BuildContext context) { 
        return Scaffold(appBar: AppBar(title: Text("hh")),
          body:_page[this._index],
          bottomNavigationBar: BottomNavigationBar(
            items:[  //配置内容,数值类型必须是List<BottomNavigationBarItem>
              BottomNavigationBarItem(//单个bar内容
                icon:Icon(Icons.home),
                title:Text("首页"),
                // backgroundColor: Colors.red, //点击切换时,整个导航栏的颜色
                // activeIcon:Icon(Icons.hd)
              ),
              BottomNavigationBarItem(
                icon:Icon(Icons.category),
                title:Text("第二页"),
                // backgroundColor: Colors.blue
              )
            ],
            currentIndex: this._index, //选中的底部bar索引
            fixedColor: Colors.green,  //选中的颜色
    
            // selectedItemColor:Colors.green, //不能和fixedColor同时出现
            // unselectedItemColor: Colors.blue,
            iconSize: 35,
            selectedFontSize: 20,
            unselectedFontSize: 10,
            // backgroundColor: Colors.red, //整个导航栏的颜色fixed类型下有效
            onTap:(index){ setState(() { 
              this._index=index;
            });}, //点击bar回调,必须传入index参数,bar的索引
            type: BottomNavigationBarType.fixed //点击会有切换变大的特效,.fixed类型可以放置任意多的bar
          ),
          );
      }
    }
    
    
    class Home extends StatelessWidget { 
      const Home({ Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: Column(
            children: <Widget>[
              
            ],
          ),
        );
      }
    }