Question

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

我想要以下输出...

'

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

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

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

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

快乐飘飘！ :)

Answer 3

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

如何在flutter的底部导航栏中应用高程？

3 个答案: