Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标，Android开发面经分享

在Flutter中，你可以使用bottom_navigation_bar包来创建一个带有凸起中间图标的底部导航栏。以下是一个简单的示例代码：

import 'package:flutter/material.dart';
import 'package:bottom_navy_bar/bottom_navy_bar.dart';
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final _pageList = [
    Icons.home,
    Icons.favorite,
    Icons.person,
    Icons.settings,
  ];
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Selected index: $_currentIndex'),
      ),
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: _currentIndex,
        showElevation: true,
        itemCornerRadius: 10,
        curve: Curves.easeIn,
        onItemSelected: (index) => setState(() => _currentIndex = index),
        items: [
          BottomNavyBarItem(
            icon: Icon(_pageList[0]),
            title: Text('Home'),
            activeColor: Colors.purple,
          ),
          BottomNavyBarItem(
            icon: Icon(_pageList[1]),
            title: Text('Favorite'),
            activeColor: Colors.purple,
          ),
          BottomNavyBarItem.custom(
            icon: Icon(_pageList[2]),
            title: Text('Profile'),
            activeColor: Colors.purple,
            inactiveIcon: Icon(
              _pageList[2],
              color: Colors.black,
            ),
          ),
          BottomNavyBarItem(
            icon: Icon(_pageList[3]),
            title: Text('Settings'),
            activeColor: Colors.purple,
          ),
        ],
      ),
    );
  }
}
 
void main() {
  runApp(MaterialApp(home: HomePage()));
}

在这个示例中，我们使用了BottomNavyBar来创建底部导航栏，其中第二个项目使用了BottomNavyBarItem.custom来支持为选中和非选中状态设置不同的图标。itemCornerRadius属性用于使图标圆角，从而实现凸起的效果。

请确保你已经在pubspec.yaml中添加了bottom_navigation_bar包的依赖。

dependencies:
  bottom_navy_bar: ^6.0.0

然后运行flutter pub get来安装依赖。