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

Question

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

标签： flutterflutter-layout

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

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