Flutter – 凸底条

Flutter是一款由Google开发的跨平台移动应用开发框架，它可以让开发者通过一套代码同时构建Android和iOS应用。Flutter具有快速开发、高性能以及丰富的widget库等优点，使得它在移动应用开发领域受到了广泛的关注和应用。

在Flutter中，凸底条（BottomAppBar）是一种非常常见的UI组件，它可以帮助我们快速实现底部导航栏。

BottomAppBar的基本使用方法

要使用凸底条，我们首先需要引入material库，并创建一个Scaffold组件：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter BottomAppBar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter BottomAppBar'),
        ),
        body: Center(
          child: Text('Hello, world!'),
        ),
        bottomNavigationBar: BottomAppBar(
          color: Colors.blue, // 背景色
          shape: CircularNotchedRectangle(), // 底部凸起的样式
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.email),
                onPressed: () {},
              ),
              SizedBox(width: 20),
              IconButton(
                icon: Icon(Icons.settings),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.person),
                onPressed: () {},
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      ),
    );
  }
}

在Scaffold组件中，我们可以看到几个与凸底条相关的属性：

1. bottomNavigationBar：这个属性用来设置底部导航栏，我们可以将其设置为一个BottomAppBar组件；
2. floatingActionButton：这个属性用来设置浮动按钮，我们可以将其设置为一个FloatingActionButton组件；
3. floatingActionButtonLocation：这个属性用来设置浮动按钮的位置，我们可以将其设置为一个FloatingActionButtonLocation对象。

在上述代码中，我们设置了一个颜色为蓝色的凸底条，其中包含了四个IconButton组件，以及一个SizedBox组件来实现按钮之间的间隔。同时，我们还设置了一个浮动按钮，并将其位置设置为底部居中。

底部导航栏中添加菜单按钮

除了普通的IconButton之外，我们还可以将一个PopupMenuButton组件添加到底部导航栏中，以实现类似菜单的效果。在这个菜单按钮被点击的时候，会弹出一个类似于context menu的菜单列表。

bottomNavigationBar: BottomAppBar(
  color: Colors.blue,
  shape: CircularNotchedRectangle(),
  child: Row(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      IconButton(
        icon: Icon(Icons.home),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.email),
        onPressed: () {},
      ),
      SizedBox(width: 20),
      PopupMenuButton(
        itemBuilder: (context) => [
          PopupMenuItem(
            child: Text("Item 1"),
          ),
          PopupMenuItem(
            child: Text("Item 2"),
          ),
          PopupMenuItem(
            child: Text("Item 3"),
          ),
        ],
        icon: Icon(Icons.menu),
      ),
      IconButton(
        icon: Icon(Icons.person),
        onPressed: () {},
      ),
    ],
  ),
),

在上述代码中，我们替换了底部导航栏的第三个IconButton为一个PopupMenuButton，并在itemBuilder参数中定义了菜单项的列表。当菜单按钮被点击时，会弹出这个列表。

自定义底部导航栏

除了使用Flutter提供的widget库之外，我们还可以通过自定义Widget来实现底部导航栏。在这种情况下，我们可以定制底部导航栏的样式，包括其形状、按钮的外观和行为等等。

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  int _selectedIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(20),
          topLeft: Radius.circular(20),
        ),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home, color: _selectedIndex == 0 ? Colors.white : Colors.black),
                onPressed: () => _onItemTapped(0),
              ),
              Text('Home', style: TextStyle(color: _selectedIndex == 0 ? Colors.white : Colors.black)),
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.email, color: _selectedIndex == 1 ? Colors.white : Colors.black),
                onPressed: () => _onItemTapped(1),
              ),
              Text('Email', style: TextStyle(color: _selectedIndex == 1 ? Colors.white : Colors.black)),
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.menu, color: _selectedIndex == 2 ? Colors.white : Colors.black),
                onPressed: () => _onItemTapped(2),
              ),
              Text('Menu', style: TextStyle(color: _selectedIndex == 2 ? Colors.white : Colors.black)),
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.person, color: _selectedIndex == 3 ? Colors.white : Colors.black),
                onPressed: () => _onItemTapped(3),
              ),
              Text('Profile', style: TextStyle(color: _selectedIndex == 3 ? Colors.white : Colors.black)),
            ],
          ),
        ],
      ),
    );
  }
}

在这个例子中，我们创建了一个名为MyBottomNavigationBar的自定义Widget，它包含了四个IconButton和四个相应的文本标签。从界面效果可以看出，这个自定义Widget与官方提供的BottomAppBar的样式有所不同。

这里还有两个回调函数：

1. _onItemTapped：当用户点击按钮时，这个函数会被调用，并设置当前被选中的按钮序号；
2. build：在这个函数中构建自定义Widget的UI。

结论

总体上来说，凸底条是Flutter中一个非常常见的UI组件，我们可以通过它来快速构建底部导航栏。无论是使用Flutter提供的widget库，还是通过自定义Widget来实现底部导航栏，都能够轻松实现丰富的界面效果。如果你是一名Flutter开发者，凸底条是一个你必须要学会的组件。