BottomNavigationBar透明背景 [英] BottomNavigationBar Transparent Background

问题描述

我正在尝试构建一个没有背景(透明)的BottomNavigationBar，到目前为止，这是我已经完成的工作，但是我仍然有阴影也应该删除:

I'm trying to build a BottomNavigationBar that has no background (transparent), so far this is what I have done, but I still have shadows which should also be removed:

return Scaffold(
  body: body,
  bottomNavigationBar: Theme(
    data: Theme.of(context).copyWith(
        canvasColor: Colors.transparent,
        primaryColor: Colors.white,
        textTheme: Theme
            .of(context)
            .textTheme
            .copyWith(caption: TextStyle(color: Colors.deepOrange))),
    child: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: 0,
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text("Home"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.map),
          title: Text("Map"),
        )
      ],
    ),
  ),
);

推荐答案

我认为，如果您使用透明背景，则图标不会很清晰，另外，您可以像这样使用自定义窗口小部件.这可能对您有帮助.

As I think if you use the transparent background then the icons will be not very clear, Alternatively you can use your custom widget like this. This may be helpful for you.

return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Container(
        child: new Stack(children: <Widget>[
          new Container(
            color: Colors.lightGreen,
            child: new Center(
              child: new Text('Hello'),
            ),
          ),
          new Align(alignment: Alignment.bottomCenter,child: new Container(
            height: 100.0,
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
              new Icon(Icons.home),
                new Icon(Icons.map)
            ],),
          ),)
        ],),
      ),
    );

这篇关于BottomNavigationBar透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！