Flutter學習 -BottomAppBar組件

BottomAppBar在Flutter中是一種特殊的導覽列，它可以用於放置的主要導覽按鈕，並且可以與底部導航抽屜和懸浮按鈕一同使用。它可以替代AppBar和懸浮操作按鈕，並可以在應用中提供一致的導航體驗。

放置於bottomNavigationBar後的寫法

bottomNavigationBar: BottomAppBar(
  //顏色
  color: Colors.blue,
  //用此可產生一個圓滑缺口
  shape: CircularNotchedRectangle(),
  //透過Row將四個IconButton放入
  child: Row(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      IconButton(
        icon: Icon(Icons.home),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.work),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.email),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.settings),
        onPressed: () {},
      ),
    ],
  ),
),

配合floatingActionButton使用，可以在導覽列上產生特別的效果。寫法如下:

floatingActionButton: FloatingActionButton(
  elevation: 4.0,
  child: Icon(Icons.add),
  onPressed: () {},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
  //顏色
  color: Colors.blue,
  //用此可產生一個圓滑缺口
  shape: CircularNotchedRectangle(),
  //透過Row將四個IconButton放入
  child: Row(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      IconButton(
        icon: Icon(Icons.home),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.work),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.email),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.settings),
        onPressed: () {},
      ),
    ],
  ),
),

如果要調整 FloatingActionButton的位置，可以用 FloatingActionButtonLocation屬性控制它的位置，FloatingActionButtonLocation的屬性有：

1. FloatingActionButtonLocation.centerDocked：將浮動按鈕放置到底部導航欄的中心位置。 2. FloatingActionButtonLocation.centerFloat：將浮動按鈕放置在頁面的中心位置。 3. FloatingActionButtonLocation.endDocked：將浮動按鈕放置在底部導航欄的最右邊位置。 4. FloatingActionButtonLocation.endFloat：將浮動按鈕放置在頁面的最右邊位置。 5. FloatingActionButtonLocation.endTop：將浮動按鈕放置在頁面的頂部右側位置。 6. FloatingActionButtonLocation.miniCenterDocked：將迷你浮動按鈕放置到底部導航欄的中心位置。 7. FloatingActionButtonLocation.miniCenterFloat：將迷你浮動按鈕放置在頁面的中心位置。 8. FloatingActionButtonLocation.miniEndDocked：將迷你浮動按鈕放置在底部導航欄的最右邊位置。 9. FloatingActionButtonLocation.miniEndFloat：將迷你浮動按鈕放置在頁面的最右邊位置。 10. FloatingActionButtonLocation.miniStartTop：將迷你浮動按鈕放置在頁面的頂部左側位置。 11. FloatingActionButtonLocation.startTop：將浮動按鈕放置在頁面的頂部左側位置。

參考網頁:https://www.yiibai.com/flutter/flutter-bottomappbar.html