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/n/368848.html