Flutter 底部導航欄的完整詳解

Flutter 底部導航欄是一種常見的用戶界面設計形式，它可以幫助用戶快速地切換不同的功能模塊。在這篇文章中，我們將從多個方面詳細闡述 Flutter 底部導航欄的設計和使用方法。

一、基礎使用

Flutter 底部導航欄的基礎使用非常簡單。我們可以通過 BottomNavigationBar 組件來創建一個底部導航欄，然後在其中添加多個 BottomNavigationBarItem 組件來表示不同的功能模塊。下面是一個基礎使用的代碼示例：


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _selectedIndex = 0;

  static const List _widgetOptions = [
    Text(
      'Index 0: Home',
    ),
    Text(
      'Index 1: Business',
    ),
    Text(
      'Index 2: School',
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

在這個例子中，我們創建了一個有三個功能模塊的底部導航欄，分別為「Home」、「Business」和「School」，對應的是三個 Text 組件。當用戶點擊不同的 BottomNavigationBarItem 時，會觸發 _onItemTapped 方法並更新當前選中的模塊。

二、自定義樣式

除了基礎使用外，Flutter 底部導航欄還支持自定義樣式。我們可以通過 BottomNavigationBar 組件中的屬性來改變它的外觀和交互。下面是一些常見的自定義樣式：

1. 更改選中狀態顏色

默認情況下，底部導航欄中選中狀態的文字和圖標顏色是主題色。我們可以通過 selectedItemColor 屬性將其改變為其他顏色：


bottomNavigationBar: BottomNavigationBar(
  // ...
  selectedItemColor: Colors.red,
),

2. 更改未選中狀態顏色

和選中狀態顏色類似，我們也可以通過 unselectedItemColor 屬性將未選中狀態的文字和圖標顏色改變為其他顏色：


bottomNavigationBar: BottomNavigationBar(
  // ...
  unselectedItemColor: Colors.grey,
),

3. 更改圖標大小

將 BottomNavigationBarItem 組件中的 icon 屬性改為一個 SizedBox 組件，然後設置它的 width 和 height 屬性即可更改圖標的大小：


bottomNavigationBar: BottomNavigationBar(
  // ...
  items: [
    BottomNavigationBarItem(
      icon: SizedBox(
        width: 24,
        height: 24,
        child: Image.asset('images/home.png'),
      ),
      label: 'Home',
    ),
    // ...
  ],
),

4. 更改背景色

我們可以通過設置 BottomNavigationBar 組件的 backgroundColor 屬性來更改它的背景色：


bottomNavigationBar: BottomNavigationBar(
  // ...
  backgroundColor: Colors.white,
),

三、擴展使用

除了基礎使用和自定義樣式以外，Flutter 底部導航欄還有一些其它的擴展使用方式。下面是一些常見的擴展使用方式：

1. 使用 BottomAppBar

除了 BottomNavigationBar 組件以外，我們還可以使用 BottomAppBar 組件來創建底部導航欄。BottomAppBar 組件通常和 FloatingActionButton 組件一起使用，可以實現類似於浮動操作按鈕的效果。下面是一個代碼示例：


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _selectedIndex = 0;

  static const List _widgetOptions = [
    Text(
      'Index 0: Home',
    ),
    Text(
      'Index 1: Business',
    ),
    Text(
      'Index 2: School',
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: 
          FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              icon: Icon(Icons.home),
              onPressed: () {
                _onItemTapped(0);
              },
            ),
            IconButton(
              icon: Icon(Icons.business),
              onPressed: () {
                _onItemTapped(1);
              },
            ),
            SizedBox(width: 40),
            IconButton(
              icon: Icon(Icons.school),
              onPressed: () {
                _onItemTapped(2);
              },
            ),
          ],
        ),
      ),
    );
  }
}

在這個例子中，我們創建了一個使用 BottomAppBar 組件的底部導航欄，並添加了一個巨大的浮動操作按鈕。 BottomAppBar 組件的 shape 屬性指定了它的形狀，這裡我們使用了一個圓形的凹槽形狀，用於放置浮動操作按鈕。 BottomAppBar 組件中的 Row 組件包含了多個 IconButton 組件，並通過 MainAxisAlignment.spaceBetween 來使它們能夠水平排列。此外，bottomNavigationBar 引用了 BottomAppBar 組件，而不是 BottomNavigationBar 組件。

2. 使用 CupertinoTabBar

在 iOS 風格的應用程序中，底部導航欄通常是使用 CupertinoTabBar 組件來創建的。下面是一個使用 CupertinoTabBar 組件的代碼示例：


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _selectedIndex = 0;

  static const List _widgetOptions = [
    Text(
      'Index 0: Home',
    ),
    Text(
      'Index 1: Business',
    ),
    Text(
      'Index 2: School',
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text(widget.title),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: CupertinoTabBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

在這個例子中，我們使用了 CupertinoNavigationBar 組件作為 AppBar 組件，並使用了 CupertinoTabBar 組件作為底部導航欄。與 BottomNavigationBar 組件相比，CupertinoTabBar 組件更加簡潔和現代化。

四、總結

本文詳細介紹了 Flutter 底部導航欄的基礎使用、自定義樣式和擴展使用方式，分別從多個方面詳細闡述了它的設計和使用方法。通過深入了解 Flutter 底部導航欄的使用，我們可以更好地設計出優秀的用戶界面，並提升用戶體驗。

原創文章，作者：CFJRR，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/368848.html