Flutter：如何去掉BottomNavigationBar的邊框？

Question

我想刪除 BottomNavigationBar 頂部的線，以便圖標看起來是主屏幕的一部分。

但是我找不到任何方法來刪除 bottomnavigationbar 的邊框。

  bottomNavigationBar: BottomNavigationBar(
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    backgroundColor: Colors.cyan[50],
    selectedItemColor: Colors.cyan[900],
    unselectedItemColor: Colors.grey[700],
    type: BottomNavigationBarType.fixed,
    items: [
      ..._tabItems.map((item) =>
          BottomNavigationBarItem(icon: item.icon, title: Text(item.title)))
    ],
  ),

我怎樣才能刪除該行？

Answer 1

它不是邊框，它是BottomNavigationBar的elevation

只需在BottomNavigationBar中添加elevation: 0.0,即可

示例代碼

  bottomNavigationBar: BottomNavigationBar(
    selectedIconTheme: IconThemeData(color: Colors.orange),
    unselectedIconTheme: IconThemeData(color: Colors.grey),
    elevation: 0.0,
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        title: Text('Business'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        title: Text('Appointment'),
      ),
    ],
    currentIndex: _selectedIndex,
    selectedItemColor: Colors.amber[800],
    onTap: _onItemTapped,
  ),

Answer 2

我建議您使用帶有自動完成功能的 IDE 來查看所有可用選項！

您可以添加 BottomNavigationBar 的類型

type: BottomNavigationBarType.fixed,

因為我們要no animation所以必須用這個，否則就是這個類型，默認：

type: BottomNavigationBarType.shifting,

看圖，已經解決了。 Flutter 在 Chrome 瀏覽器中運行的項目 Web 瀏覽器。 固定 BottomNavigationBar 類型