标题仅在选定的底部导航栏上答案

【问题标题】：Title Only On Selected Bottom Navigation Bar标题仅在选定的底部导航栏上
【发布时间】：2019-11-17 08:45:52
【问题描述】：

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

此外，这个底部栏变得有些透明，因此您几乎看不到它下面的内容。这可以在颤动中做到吗？我知道在主应用栏上是不可能的，因为有一个问题在谈论它here

image for reference

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

隐藏未选中的BottomNavigationBarItem的标题

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

showUnselectedLabels: false,

透明底部导航栏

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

这里的问题是 body 没有与 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),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

【讨论】：

【解决方案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',
  ),
 ],
)

【讨论】：