flutter BottomNavigationBar 不顯示問題

下面的一段flutter代碼中,會發現底部tabbar不顯示


image.png
bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首頁'),
      BottomNavigationBarItem(icon: Icon(Icons.book), label: '樹'),
      BottomNavigationBarItem(
        icon: Icon(Icons.addchart_sharp),
        label: '漫畫',
      ),
      BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
    ],
),

原因

BottomNavigationBar有個type屬性,默認值是fixed,意思是所有圖標均勻顯示在屏幕上
但是一旦BottomNavigationBarItem的數量 >=4時,這個type值自動切換成 shifting
所以需要手動給這個type賦值指定fixed

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首頁'),
      BottomNavigationBarItem(icon: Icon(Icons.book), label: '樹'),
      BottomNavigationBarItem(
        icon: Icon(Icons.addchart_sharp),
        label: '漫畫',
      ),
      BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
    ],
),

這樣就有了


image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容