flutter 底部appbar详解

在主页中如何使用：

import 'package:flutter/material.dart';

class DottomAppBar extends StatefulWidget {
    
    
  @override
  State<StatefulWidget> createState() {
    
    
    return new BottomNavigationWidgetState();
  }
}

class BottomNavigationWidgetState extends State<DottomAppBar> {
    
    
  int _currentIndex = 0;//定义bottomNavigationBarltem跳转的界面

List<StatefulWidget> list = [
//存放要跳转的界面
  ];
  @override
  Widget build(BuildContext context) {
    
    
    /*
    返回一个脚手架，里面包含两个属性，一个是底部导航栏，另一个就是主体内容
     */
    return Container(
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          //超过3个子项无法正常显示的第一种解决方法，改变颜色,不过不显示文字，不实用
          //  selectedItemColor: Color.fromARGB(255, 229, 102, 152),
          //  unselectedItemColor: Colors.black26,
          type: BottomNavigationBarType.fixed, //第二种解决方法，一般采用此方法
          items: [
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.home,
                ),
                title: new Text(
                  '首页',
                )),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.cancel,
                ),
                title: new Text(
                  '频道',
                )),
             BottomNavigationBarItem(
                 icon: Icon(Icons.add_box), title: new Text("动态")),
             BottomNavigationBarItem(
               icon: Icon(Icons.add_shopping_cart),
               title: new Text("会员购"),
             ),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.mood,
                ),
                title: new Text(
                  '我的',
                )),
          ],
          //这是底部导航栏自带的位标属性，表示底部导航栏当前处于哪个导航标签。给他一个初始值0，也就是默认第一个标签页面。
          currentIndex: _currentIndex,
          //这是点击属性，会执行带有一个int值的回调函数，这个int值是系统自动返回的你点击的那个标签的位标
          onTap: (int i) {
    
    
            //进行状态更新，将系统返回的你点击的标签位标赋予当前位标属性，告诉系统当前要显示的导航标签被用户改变了。
            setState(() {
    
    
              _currentIndex = i;
            });
          },
        ),
      ),
      height: 60.0,
    );
  }
}