Flutter中的透明底部导航栏

Question

Flutter中的透明底部导航栏

43

我是Flutter的新手。我正在尝试实现这个UI：

我还没有找到在Flutter中创建透明底部导航栏的有用解决方案。

我已经尝试使用

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

但这似乎不起作用。请帮忙。

- DaIOSGuy

1

我认为这可能是你需要的：https://dev59.com/81UM5IYBdhLWcg3wF9TZ - magicleon94

1

我刚刚尝试了一下，但它没有起作用。你能否请给这个问题点赞？我是 Stack Overflow 的新手，人们正在对它进行负面评价。 - DaIOSGuy

1

深入思考后，我意识到这样做不能得到期望的结果，因为两个女孩的图像会在导航栏上方。我建议使用一个Stack，将两个女孩的图像作为底层（堆栈的底部），并使用全屏的Column，将MainAxisSize设置为MainAxisSize.max，将MainAxisAlignment设置为MainAxisAlignment.end。我可以写一个答案，但现在无法测试，所以我更喜欢写一个评论。希望能有所帮助。 - magicleon94

@SnakeyHips 这是带有透明背景的答案输出 https://imgur.com/a/0DzIfXb。可能是因为 bottomNavigationbar 下面没有任何东西，所以我们看不到任何内容。 - DaIOSGuy

@magicleon94 很有趣，所以你的意思是我应该将堆栈作为列的子元素？ - DaIOSGuy

显示剩余6条评论

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- simuhunluo · Answer 1

Scaffold(  
  floatingActionButton: _buildTransparentButton()
)

你可以尝试使用floatingActionButton。

- shamnad sherief · Answer 2

进行以下三个更改：-

使用 Scaffold 小部件的 extendBody 属性，并将其设置为 true 将 BottomNavigationBar 的背景颜色设置为透明 backgroundColor: Colors.transparent

将 elevation 设置为零以去除阴影 elevation: 0,

return MaterialApp(
      home: Scaffold(
        extendBody: true,
        bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.explore),
            label: 'Explore',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.redAccent,
//         onTap: _onItemTapped,
      ),
      ),
    );

- Elle Bishop · Answer 3

如何在2023年自定义BottomNavigationBar：

bottomNavigationBar: BottomNavigationBar(
    selectedItemColor: Colors.yellowAccent,
    unselectedItemColor: kAccentColor,
    backgroundColor: kMainColor,
    elevation: 0,
    type: BottomNavigationBarType.fixed,
    items: [
      BottomNavigationBarItem(
        icon: Icon(
            Icons.one_x_mobiledata,
          color: kAccentColor,
        ),
        label: 'Selected',
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.two_k,
          color: kAccentColor,
        ),
        label: 'Unselected',
      ),
      
    ],
  ),

const kMainColor = Color(0xff071330);

const kAccentColor = Color(0xffC3CEDA);

- Bala Kumar · Answer 4

找到了透明BottomNavigationBar的解决方案。

使用快捷键Ctrl+B打开BottomNavigationBar的源代码。
浏览文件，您会发现一个名为Widget build的方法。
在那里，您可以找到一个Stack widget，其中包含一个material widget。
添加shadowColor:Colors.transparent

现在您已经获得了一个透明的BottomNavigationBar