flutter 底部导航栏组件BottomNavigationBar-向日葵屋

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>[
        ],
      ),
    );
  }
}