Question

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

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

Answer 1

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

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透明背景

1 个答案: