自定义底部导航条 Flutter

aiqt4smr  于 2023-06-07  发布在  Flutter
关注(0)|答案(2)|浏览(351)

我想创建一个自定义的底部导航栏,类似于下面的屏幕截图所示:

能否请您就如何实现这一目标提供指导?我对自定义应用程序中底部导航栏的外观和功能感兴趣。任何提示、代码片段或推荐的资源都将不胜感激。
提前感谢您的帮助!

编辑

我用下面的代码得到的结果

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('Custom Bottom Navigation Bar'),
  ),
  body: Center(
    child: Text('Page ${_currentIndex + 1}'),
  ),
  bottomNavigationBar: Stack(
    children: <Widget>[
      BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 60.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
                onPressed: () {
                  setState(() {
                    _currentIndex = 0;
                  });
                },
              ),
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {
                  setState(() {
                    _currentIndex = 1;
                  });
                },
              ),
              SizedBox(width: 80.0), // Espace réservé pour l'icône SVG
              IconButton(
                icon: Icon(Icons.notifications),
                onPressed: () {
                  setState(() {
                    _currentIndex = 2;
                  });
                },
              ),
              IconButton(
                icon: Icon(Icons.person),
                onPressed: () {
                  setState(() {
                    _currentIndex = 3;
                  });
                },
              ),
            ],
          ),
        ),
      ),
      Positioned(
        top: -40.0,
        left: MediaQuery.of(context).size.width / 2 - 24.0,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SvgPicture.asset(
              'assets/rugby.svg', // Remplacez par le chemin de votre fichier SVG
              height: 80.0,
              width: 80.0,
            ),
            Text('Icône', style: TextStyle(fontSize: 12.0)),
          ],
        ),
      ),
    ],
  ),
);

}

7d7tgy0s

7d7tgy0s1#

我建议您使用NavigationBar,这是遵循Material 3建议的版本。在这种情况下,您应该修改某些内容以具体实现您可以修改的方面:splashColor、hoverColor和indicatorColor。您可以使用StatefullWidget来修改或执行一些动画,无论是调整大小,旋转或任何您需要的内容:要做到这一点,你基本上应该通过setState更新selectedIndex,并结合一些AnimatedFoo小部件来实现一个很好的效果。
如果您的需求非常具体,您可以始终使用简单的Row构建按钮栏,并按照您想要的方式对其进行自定义。

mxg2im7a

mxg2im7a2#

在Flutter中有很多方法来构建底部导航栏,首先让我列出一些我用于底部导航的Flutter软件包

  1. animated_bottom_navigation_bar: ^1.2.0(提供了大量的定制; P.S.,I love this one)
  2. circular_bottom_navigation: ^2.3.0
  3. bottom_navigation_view: ^0.3.0
  4. curved_navigation_bar: ^1.0.3(我最近用过这个,我提供了漂亮的曲线动画,已经定制了它的代码来实现阴影和其他东西)
    在使用任何软件包进行底部导航之前,请同时查看其他软件包。
    现在,如果不想使用任何包,下面是在Flutter中构建按钮导航栏的代码片段
    在Slraffold有房产名为buttomNavigationBar
bottomNavigationBar: Container(
    clipBehavior: Clip.hardEdge,
    decoration: const BoxDecoration(
      color: AppColors.white,
      boxShadow: [
        BoxShadow(
          color: AppColors.lightGrayColor,
          spreadRadius: 2,
          blurRadius: 7,
          offset: Offset(2, 2),
        ),
      ],
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        topRight: Radius.circular(20),
      ),
    ),
    child: BottomNavigationBar(
      currentIndex: viewModel.currentIndex,
      selectedItemColor: AppColors.lightPrimaryColor,
      unselectedItemColor: AppColors.textColor,
      onTap: viewModel.onTap,
      selectedLabelStyle: const TextStyle(color: AppColors.lightPrimaryColor, fontWeight: FontWeight.bold),
      unselectedLabelStyle: const TextStyle(color: AppColors.textColor, fontWeight: FontWeight.normal),
      type: BottomNavigationBarType.fixed,
      elevation: 0,
      items: const [
        BottomNavigationBarItem(
          label: 'Home',
          icon: Icon(Icons.home_outlined),
          activeIcon: Icon(Icons.home)
        ),
        BottomNavigationBarItem(
          label: 'Categories',
          icon: Icon(Icons.category_outlined),
          activeIcon: Icon(Icons.category)
        ),
        BottomNavigationBarItem(
          label: 'Cart',
          icon: Icon(Icons.shopping_cart_outlined),
          activeIcon: Icon(Icons.shopping_cart)
        ),
      ],
    ),
  ),

相关问题