Question

我正在尝试在底部导航栏（例如Google云端硬盘）上创建效果。我希望只在所选项目上显示项目的标题，而在其他项目上仅显示图标。

此外，该底栏变得有些透明，因此您几乎看不到其底下的内容。这可能会扑朔迷离吗？我知道在主应用程序栏上是不可能的，因为谈论它here

Answer 1

隐藏未选择的BottomNavigationBarItem的标题

您只需要将底部导航栏的show unselected labels属性设置为false

showUnselectedLabels: false,

透明的底部导航栏

Scaffold为Appbar和BottomNavigation条提供占位符。这就是它们的放置方式。

这里的问题是主体不与Appbar或BottomNavigation栏重叠，因此即使您提供透明背景，它也似乎无能为力。

一种解决方法是将Body，AppBar和BottomNavigationBar放在堆栈中，并适当地放置AppBar和BottomNavigationBar。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.green, // Content of body here
          ),
          Positioned(
            left: 0,
            right: 0,
            top: 0,
            child: AppBar(
              elevation: 0,
              backgroundColor: Colors.indigo.withAlpha(80),
              title: Text('Some Text'),
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: BottomNavigationBar(
              elevation: 0,
              showUnselectedLabels: false,
              backgroundColor: Colors.red.withAlpha(80),
              items: [
                BottomNavigationBarItem(
                  title: Text('A'),
                  icon: Icon(Icons.add),
                ),
                BottomNavigationBarItem(
                  title: Text('B'),
                  icon: Icon(Icons.remove),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

你应该使用这个代码：

bottomNavigationBar: BottomNavigationBar(
 //use both properties
  type: BottomNavigationBarType.fixed,
  showUnselectedLabels: true,
//-----------
  items: const <BottomNavigationBarItem>[
  BottomNavigationBarItem(
    icon: Icon(Icons.icon1),
    label:'item 1',
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.icon2),
    label: 'item 2',
  ),
 ],
)

仅在选定的底部导航栏上显示标题

2 个答案: