Flutter – 自定义BottomBar

在Flutter应用程序中，BottomBar是常见的导航栏，通常包含了底部菜单项和一个中心按钮。然而，Flutter提供了很多自定义工具，使得开发者可以根据自己的需求自定义BottomBar。

1. 实现Custom BottomBar

首先，我们需要在主页面中实现一个自定义BottomBar的布局。例如，我们可以创建一个Container并在其中添加Row和Container等子组件，以便创建以下所示的BottomBar。

class CustomBottomBar extends StatelessWidget {
  final List<BottomNavigationBarItem> items;
  final Function(int)? onTap;
  final int currentIndex;

  CustomBottomBar({required this.items, this.onTap, required this.currentIndex});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(bottom: 15, top: 5),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            spreadRadius: 1,
            blurRadius: 5,
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: items.map((e) {
          var index = items.indexOf(e);
          return GestureDetector(
            onTap: () {
              onTap?.call(index);
            },
            child: Container(
              color: currentIndex == index ? Colors.blue[100] : Colors.transparent,
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: e.icon,
            ),
          );
        }).toList(),
      ),
    );
  }
}

2. 使用Custom BottomBar

然后，在主页面中，我们将这个CustomBottomBar添加到屏幕的底部，同时也添加了一个FloatingActionButton来表示用户可以点击以执行某些操作。

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom BottomBar'),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: CustomBottomBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    );
  }
}

3. 结语

通过这种方式，我们可以实现自己的BottomBar，而不必非常依赖于Flutter的默认BottomNavigationBar。 同时，您也可以根据自己的需求在CustomBottomBar中添加更多的样式和动画，以创建一个独一无二的BottomBar。