如何在颤动的底部导航栏中应用高程？答案

【问题标题】：How to apply elevation in bottom navigation bar in flutter?如何在颤动的底部导航栏中应用高程？
【发布时间】：2020-05-21 12:44:44
【问题描述】：

我想在底部导航栏中应用高程。我尝试了海拔属性，但它不起作用。 Elevation 属性的阴影效果可以忽略不计。但根据我的设计，我想要更高的海拔。

我想要以下输出...

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Sample App'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        elevation: 10,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.ac_unit),
              title: Text('Test')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_alarm),
              title: Text('Test')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_alarm),
            title: Text('Test'),
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

我运行了您的代码，并且 NavigationBar 实际上被提升了。如果您不设置海拔高度，则默认值为 8.0。尝试将高度设置为 0，然后再次设置为 10 以查看差异。
但是真的很低。如图所示，我想要更高的海拔......

标签： flutter flutter-layout

【解决方案1】：

我知道这似乎不是解决此问题的最佳解决方案，但您可以将底部导航栏包装在容器内，然后在其上应用 BoxDecoration。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Sample App'),
      ),
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.black,
              blurRadius: 10,
            ),
          ],
        ),
        child: BottomNavigationBar(
          elevation: 10,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.ac_unit),
              title: Text('Test'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.access_alarm),
              title: Text('Test'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.access_alarm),
              title: Text('Test'),
            ),
          ],
        ),
      ),
    );
  }
}

我希望有人为这个问题提供更好的解决方案。

【讨论】：

【解决方案2】：

我来晚了，但我得到了完美的答案。您可以使用 BottomAppBar 而不是 BottomNavigationBar 例如：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Sample App'),
      ),
      bottomNavigationBar: BottomAppBar(
        elevation: 10,
        child: Row(children :[
          BottomNavigationBarItem(
            icon: Icon(Icons.ac_unit),
              title: Text('Test')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_alarm),
              title: Text('Test')
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_alarm),
            title: Text('Test'),
          ),
        ]),
      ),
    );
  }
}

快乐飘飘！ :)

【讨论】：

【解决方案3】：

海拔属性如果为 null，则默认为 8.0。最终双高

【讨论】：