Flutter學習- BottomNavigationBar組件

 BottomNavigationBar為下方的導覽列:

於前要先宣告一變數，控制目前點選到導覽按鈕

var _page=0;

大致的寫法如下：

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed, //bar類型，fixed為沒有選擇時，文字也會顯現,shifting為不顯現
  //fixedColor: Colors.blue, //選擇時文字的顏色
  selectedFontSize: 16, //選擇時文字的大小
  //backgroundColor: Colors.greenAccent, //bar的背景顏色
  selectedItemColor: Colors.cyan,

  showSelectedLabels: false,
  showUnselectedLabels: false,
  items: const [
    BottomNavigationBarItem(
      //可被點選的icon
        icon: Icon(
          Icons.home,
          color: Colors.black,
        ),
        label: '首頁'), //icon下的文字
    BottomNavigationBarItem(
        icon: Icon(
          Icons.chat,
          color: Colors.red,
        ),
        label: '聊天'),
    BottomNavigationBarItem(
        icon: Icon(
          Icons.shopping_bag,
          color: Colors.red,
        ),
        label: '購物'),
    BottomNavigationBarItem(
        icon: Icon(
          Icons.notifications,
          color: Colors.red,
        ),
        label: ' 通知'),

    BottomNavigationBarItem(
        icon: Icon(
          Icons.account_circle,
          color: Colors.red,
        ),
        label: '使用者'),
    ],
  currentIndex: _page,
  onTap: (int index){
    setState(() {
      _page=index;
    });
  },
), 

BottomNavigationBar的變數及屬性如下:

BottomNavigationBar({
  Key? key,
  required this.items,  //瀏覽列的項目，為一清單
  this.onTap, //點擊的回調
  this.currentIndex = 0,  //目前點選的項目，預設為0，第一個
  this.elevation,  //陰影
  this.type,  //bar的類型，有fixed文字顯現及shifting文字點選不顯示
  Color? fixedColor,  //選擇時的顏色
  this.backgroundColor,  //背景色
  this.iconSize = 24.0, //icon的大小
  Color? selectedItemColor, //被選擇時的顏色，與fixedColor只能2擇1
  this.unselectedItemColor, //沒有被選擇的顏色
  this.selectedIconTheme, //選擇的icon布局
  this.unselectedIconTheme, //沒有選擇的icon布局
  this.selectedFontSize = 14.0, //已選擇的文字大小
  this.unselectedFontSize = 12.0, //未選擇的文字大小
  this.selectedLabelStyle, //被選擇的文字大小樣式
  this.unselectedLabelStyle, //選擇的文字大小樣式
  this.showSelectedLabels, //是否顯示被選擇的labels
  this.showUnselectedLabels, //是否顯示沒有被選擇的labels
  this.mouseCursor,
  this.enableFeedback,
  this.landscapeLayout,

BottomNavigationBarItem的變數及屬性如下:

const BottomNavigationBarItem({
  required this.icon,
  this.label,
  Widget? activeIcon,
  this.backgroundColor,
  this.tooltip,