如何在Flutter底部导航栏中应用海拔效果？

Question

我想在底部导航栏中应用高程（elevation）。我尝试使用elevation属性，但它不起作用。 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'),
          ),
        ],
      ),
    );
  }
}

- Jay Tillu

---

我运行了你的代码，NavigationBar实际上是有高度的。如果你不设置高度，默认值为8.0。尝试将高度设置为0，然后再设置为10，看看区别。 - Ariel Lubaschewski

但这真的很低。如图所示，我想要更高的海拔... - Jay Tillu

Answer 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'),
            ),
          ],
        ),
      ),
    );
  }
}

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

- Jeremias Moraes

Answer 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'),
          ),
        ]),
      ),
    );
  }
}

开心地飘动！:)

- Khushal

Answer 3

高度属性 如果为空，则默认为8.0。 最终双倍高度

- user9683896