FLutter BottomNavigationBar 底部导航 实现切换Page

三日不见，变刮目相看。——鲁肃 

底部导航栏 

   

    

     

 

 官网效果图

 BottomNavigationBar 属性

items	BottomNavigationBarItem 集合
onTap	导航栏切换时触发的函数别名（回调函数）
currentIndex	导航条当前索引
elevation	导航栏 z轴 坐标点
BottomNavigationBarType	导航条类型
BottomNavigationBarType-fixed	导航条固定宽度
BottomNavigationBarType-shifting	导航条点击谈乳淡出效果
fixedColor	导航条固定宽度颜色（文本和图标）
backgroundColor	导航条背景颜色
selectedItemColor	选中导航条颜色（和fixedColor的值不能同时存在）
unselectedItemColor	未选中导航条颜色（和fixedColor的值能同时存在）
showSelectedLabels	显示选中项的文本
showUnselectedLabels	显示未选中项的文本

底部导航

class BotNavBarWidget extends StatefulWidget {
  BotNavBarWidget({Key key}) : super(key: key);

  @override
  _BotNavBarWidgetState createState() => _BotNavBarWidgetState();
}

class _BotNavBarWidgetState extends State {
  int _currentIndex = 0;
   List _botNavBarItems = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Page1')),
    BottomNavigationBarItem(icon: Icon(Icons.payment), title: Text('Page2')),
    BottomNavigationBarItem(icon: Icon(Icons.monetization_on), title: Text('Page3')),
    BottomNavigationBarItem(icon: Icon(Icons.accessibility), title: Text('Page4'))
  ];

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      onTap: onTabTapped,
      currentIndex: _currentIndex,
      backgroundColor: Colors.lightBlueAccent,
      //selectedItemColor: Colors.black,
      unselectedItemColor: Colors.red,
      elevation: 0.0,
      fixedColor: Colors.black,
        showUnselectedLabels: true,
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Page1')),
        BottomNavigationBarItem(icon: Icon(Icons.payment), title: Text('Page2')),
        BottomNavigationBarItem(icon: Icon(Icons.monetization_on), title: Text('Page3')),
        BottomNavigationBarItem(icon: Icon(Icons.accessibility), title: Text('Page4'))
      ],
    );
  }

  onTabTapped(int index) {
    setState(() {});
    _currentIndex=index;
  }
}

class _MyHomePageState extends State {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: BotNavBarWidget(),
      body: Container(),
    );
  }
}

 

底部导航切换page 

     

 

BotNavBarWidget 底部导航

class BotNavBarWidget extends StatefulWidget {
  final ValueChanged stackValue;

  BotNavBarWidget({Key key, this.stackValue}) : super(key: key);

  @override
  _BotNavBarWidgetState createState() => _BotNavBarWidgetState();
}

class _BotNavBarWidgetState extends State {
  List tabInt = [0];
  int _currentIndex = 0;
  List _botNavBarItems = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Page1')),
    BottomNavigationBarItem(icon: Icon(Icons.payment), title: Text('Page2')),
    BottomNavigationBarItem(
        icon: Icon(Icons.monetization_on), title: Text('Page3')),
    BottomNavigationBarItem(
        icon: Icon(Icons.accessibility), title: Text('Page4'))
  ];

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      onTap: onTabTapped,
      currentIndex: _currentIndex,
      backgroundColor: Colors.lightBlueAccent,
      //selectedItemColor: Colors.black,
      unselectedItemColor: Colors.red,
      elevation: 0.0,
      fixedColor: Colors.black,
      showUnselectedLabels: true,
      items: _botNavBarItems,
    );
  }

  onTabTapped(int index) {
    setState(() {});
    _currentIndex = index;
    if (!tabInt.contains(index)) {
      tabInt.add(index);
    }
    if (widget.stackValue != null) {
      widget.stackValue(_currentIndex,tabInt);
    }
  }

}

typedef ValueChanged = void Function(
  int currentIndex,
  List tabInt,
);

StackWidget 容纳多个page的容器

class StackWidget extends StatefulWidget {
  StackWidget({Key key, this.currentIndex = 0, this.tabInt}) : super(key: key);

  final int currentIndex;
  final List tabInt;

  @override
  StackWidgetState createState() => StackWidgetState();
}

class StackWidgetState extends State {
  final List _children = [
    Page1(
      title: "Page1",
    ),
    Page2(
      title: "Page2",
    ),
    Page3(
      title: "Page3",
    ),
    Page4(
      title: "Page4",
    ),
  ];

  int _currentIndex = 0;
  List _tabInt;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabInt = widget.tabInt == null ? [0] : widget.tabInt;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      child: _stack(),
    );
  }

  void changeStack(int currentIndex, List tabInt) {
    setState(() {});
    _currentIndex = currentIndex;
    _tabInt = tabInt;
  }

  Stack _stack() {
    return Stack(
      children: [
        _child(0),
        _child(1),
        _child(2),
        _child(3),
      ],
    );
  }
  //Page的显示和隐藏
  _child(int _index) {
    return Offstage(
      offstage: !(_currentIndex == _index),
      child: _tabInt.contains(_index) ? _children[_index] : Container(),
    );
  }
}

BotNavBarWidget + StackWidget -> Scaffold

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  GlobalKey _stackGk = GlobalKey();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        bottomNavigationBar: BotNavBarWidget(
          stackValue: (int currentIndex, List tabInt) {
            _stackGk.currentState.changeStack(currentIndex, tabInt);
          },
        ),
        body: StackWidget(
          key: _stackGk,
        ));
  }
}

 

下载资源：https://download.csdn.net/download/u013491829/12818424 

收集

flutter 底部bottomNavigationBar凸起效果

Flutter 底部导航栏BottomNavigationBar，并关联PageView实现滑动切换

如何使BottomNavigationBar保持状态

flutter实战6：TAB页面切换免重绘