flutter 底部导航栏组件BottomNavigationBar

底部导航栏组件
	(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>[
          
        ],
      ),
    );
  }
}