如何将BottomAppBar背景色设为透明

Question

我希望 BottomAppBar 是透明的并显示正在发生的情况\xef\xbc\x8cso 这是我的代码。

\n

class BottomTabNavigation extends StatefulWidget {\n  @override\n  _BottomTabNavigationState createState() => _BottomTabNavigationState();\n}\n\nclass _BottomTabNavigationState extends State<BottomTabNavigation>\n    with AutomaticKeepAliveClientMixin, SingleTickerProviderStateMixin {\n  PageController _pageController;\n  int _currentIndex = 0;\n\n  @override\n  void initState() {\n    super.initState();\n    _pageController = PageController(\n      initialPage: 0,\n    );\n  }\n\n  @override\n  void dispose() {\n    super.dispose();\n    _pageController.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    super.build(context);\n    return Container(\n      child: Stack(\n        fit: StackFit.expand,\n        children: [\n          Container(\n            color: Colors.transparent,\n          ),\n          _buildScaffold(),\n        ],\n      ),\n    );\n  }\n\n  Scaffold _buildScaffold() {\n    return Scaffold(\n      backgroundColor: Colors.transparent,\n      body: PageView(\n        controller: _pageController,\n        physics: NeverScrollableScrollPhysics(),\n        children: [\n          PostsPage(),\n        ],\n      ),\n      floatingActionButton: FloatingActionButton(\n        onPressed: () {},\n        child: Icon(\n          Icons.add,\n          size: 28,\n          color: Colors.white,\n        ),\n        splashColor: Colors.transparent,\n        elevation: 0.6,\n      ),\n      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,\n      bottomNavigationBar: _bottomAppBar(),\n    );\n  }\n\n  Widget _bottomAppBar() {\n    return BottomAppBar(\n      elevation: 6,\n      notchMargin: 8.0,\n      color: Colors.white,\n      shape: CustomCircularNotchedRectangle(),\n      child: Row(\n        children: <Widget>[\n          Expanded(\n            child: Row(\n              mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n              children: [\n                IconButton(\n                  iconSize: 26,\n                  icon: Icon(IconFont.icon_home),\n                  color: _currentIndex == 0 ? Colors.black : Colors.grey,\n                  onPressed: () {\n                    setState(() {\n                      _currentIndex = 0;\n                    });\n                  },\n                ),\n                IconButton(\n                  iconSize: 26,\n                  icon: Icon(IconFont.icon_search2),\n                  color: _currentIndex == 1 ? Colors.black : Colors.grey,\n                  onPressed: () {\n                    setState(() {\n                      _currentIndex = 1;\n                    });\n                  },\n                ),\n              ],\n            ),\n          ),\n          SizedBox(\n            width: 56,\n          ),\n          Expanded(\n            child: Row(\n              mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n              children: [\n                IconButton(\n                  iconSize: 28,\n                  icon: Icon(IconFont.icon_message),\n                  color: _currentIndex == 2 ? Colors.black : Colors.grey,\n                  onPressed: () {\n                    setState(() {\n                      _currentIndex = 2;\n                    });\n                  },\n                ),\n                IconButton(\n                  iconSize: 28,\n                  icon: Icon(IconFont.icon_user1),\n                  color: _currentIndex == 3 ? Colors.black : Colors.grey,\n                  onPressed: () {\n                    setState(() {\n                      _currentIndex = 3;\n                    });\n                  },\n                ),\n              ],\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n\n  @override\n  bool get wantKeepAlive => true;\n}\n

\n

结果是黑色（如果将其设置为白色，则看不到其余部分）。

\n

为了实现透明度，我将 Scaffold 包裹在 Stack 中并设置其背景颜色，但仍然不起作用。

\n

怎么解决这个问题\xef\xbc\x9f

\n

\n

\n

Answer 1

你所需要的只是添加

extendBody: true,

财产给Scaffold