flutter - 如何让BottomAppBar背景颜色透明

问题描述

我希望 BottomAppBar 透明并显示正在发生的事情，所以这是我的代码。

class BottomTabNavigation extends StatefulWidget {
  @override
  _BottomTabNavigationState createState() => _BottomTabNavigationState();
}

class _BottomTabNavigationState extends State<BottomTabNavigation>
    with AutomaticKeepAliveClientMixin, SingleTickerProviderStateMixin {
  PageController _pageController;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(
      initialPage: 0,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      child: Stack(
        fit: StackFit.expand,
        children: [
          Container(
            color: Colors.transparent,
          ),
          _buildScaffold(),
        ],
      ),
    );
  }

  Scaffold _buildScaffold() {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: PageView(
        controller: _pageController,
        physics: NeverScrollableScrollPhysics(),
        children: [
          PostsPage(),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(
          Icons.add,
          size: 28,
          color: Colors.white,
        ),
        splashColor: Colors.transparent,
        elevation: 0.6,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: _bottomAppBar(),
    );
  }

  Widget _bottomAppBar() {
    return BottomAppBar(
      elevation: 6,
      notchMargin: 8.0,
      color: Colors.white,
      shape: CustomCircularNotchedRectangle(),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  iconSize: 26,
                  icon: Icon(IconFont.icon_home),
                  color: _currentIndex == 0 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 0;
                    });
                  },
                ),
                IconButton(
                  iconSize: 26,
                  icon: Icon(IconFont.icon_search2),
                  color: _currentIndex == 1 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 1;
                    });
                  },
                ),
              ],
            ),
          ),
          SizedBox(
            width: 56,
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  iconSize: 28,
                  icon: Icon(IconFont.icon_message),
                  color: _currentIndex == 2 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 2;
                    });
                  },
                ),
                IconButton(
                  iconSize: 28,
                  icon: Icon(IconFont.icon_user1),
                  color: _currentIndex == 3 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 3;
                    });
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

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

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

这个问题怎么解决的？</p>

标签： fluttertransparentbottomappbar

flutter - 如何让BottomAppBar背景颜色透明

问题描述

解决方案

推荐阅读