颤振中的透明底部导航栏 [英] Transparent bottom navigation bar in flutter

问题描述

我是新来的人。我正在尝试实现此用户界面

编辑： BottomNavigationBar 具有 8.0 的内置标高变化，并导致怪异的阴影效果。如果要删除它，则可以像这样实现自己的底部栏：

  Align（
对齐方式：Alignment.bottomCenter，
子项：Row（
 mainAxisAlignment：MainAxisAlignment.spaceEvenly，
子项：< Widget> [
 IconButton（icon：Icon（Icons.home，color ：Theme.of（context）.accentColor，），onPressed：（）{}，），
 IconButton（icon：Icon（Icons.home，color：Theme.of（context）.accentColor，），onPressed： （）{}，），
 IconButton（icon：Icon（Icons.home，color：Theme.of（context）.accentColor，），onPressed：（）{}，），
]，） ），
  

i am new to flutter. I am trying to achieve this UI

I haven't found any use full solution to create transparent bottom navigation bar in flutter.

I have tried using

BottomNavigationBarItem(
        backgroundColor: Colors.transparent,
        icon: e,
        activeIcon: _activeIcons[_index],
        title: Text(
          title[_index],
          style: AppStyle.tabBarItem,
        ),
      )

But this doesn't seems to work. Please help.

解决方案

My attempt using the Stack method discussed in the comments:

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/background.jpg'),
                    fit: BoxFit.cover),
              ),
            ),
            Align(
                alignment: Alignment.bottomCenter,
                child: Theme(
                    data: Theme.of(context)
                        .copyWith(canvasColor: Colors.transparent),
                    child: BottomNavigationBar(
                      currentIndex: 0,
                      items: [
                        BottomNavigationBarItem(
                            icon: Icon(Icons.home), title: Text('Home')),
                        BottomNavigationBarItem(
                            icon: Icon(Icons.home), title: Text('Home')),
                        BottomNavigationBarItem(
                            icon: Icon(Icons.home), title: Text('Home'))
                      ],
                    ))),
          ],
        ),
      ),
    );
  }

Edit: The BottomNavigationBar has an inbuilt elevation of 8.0 which you can't change and is causing that weird shadow effect. If you want to remove it, you could just implement your own kind of bottom bar like so:

Align(
                alignment: Alignment.bottomCenter,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                  IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
                  IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
                  IconButton(icon: Icon(Icons.home, color: Theme.of(context).accentColor,), onPressed: () {},),
                ],)),

这篇关于颤振中的透明底部导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！