如何将BottomAppBar的背景颜色设置为透明？

Question

我想要底部应用栏透明并显示正在进行的内容，这是我的代码。

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中并设置了其背景颜色，但仍然无法解决问题。

您如何解决这个问题？

- 李少颖

Answer 1

你所需做的就是添加

extendBody: true,

Scaffold 的属性

- Nagual

---

感谢您的回来，这个属性解决了问题，但如果您在底部添加填充，它仍然具有白色背景。 - 李少颖

简短而直接的回答... - Muhammad Hassan

Answer 2

使用Stack，並將PageView從Scaffold body中分離出來:

class _BottomTabNavigationState extends State<DemoWidget>
    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 SafeArea(
      child: Stack(
        fit: StackFit.expand,
        children: [
          Container(
            child: PageView(
              controller: _pageController,
              physics: NeverScrollableScrollPhysics(),
              children: [
                Container(
                  color: Colors.amber,
                  child: Center(
                    child: Text('Empty Body 1'),
                  ),
                ),
                Container(
                  color: Colors.red,
                  child: Center(
                    child: Text('Empty Body 2'),
                  ),
                ),
                Container(
                  color: Colors.green,
                  child: Center(
                    child: Text('Empty Body 3'),
                  ),
                ),
                Container(
                  color: Colors.amber,
                  child: Center(
                    child: Text('Empty Body 4'),
                  ),
                ),
              ],
            ),
          ),
          Scaffold(
            backgroundColor: Colors.transparent,
            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: CircularNotchedRectangle(),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  iconSize: 26,
                  icon: Icon(Icons.home),
                  color: _currentIndex == 0 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 0;
                      _pageController.jumpToPage(_currentIndex);
                    });
                  },
                ),
                IconButton(
                  iconSize: 26,
                  icon: Icon(Icons.search),
                  color: _currentIndex == 1 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 1;
                      _pageController.jumpToPage(_currentIndex);
                    });
                  },
                ),
              ],
            ),
          ),
          SizedBox(
            width: 56,
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  iconSize: 28,
                  icon: Icon(Icons.message),
                  color: _currentIndex == 2 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 2;
                      _pageController.jumpToPage(_currentIndex);
                    });
                  },
                ),
                IconButton(
                  iconSize: 28,
                  icon: Icon(Icons.supervised_user_circle),
                  color: _currentIndex == 3 ? Colors.black : Colors.grey,
                  onPressed: () {
                    setState(() {
                      _currentIndex = 3;
                      _pageController.jumpToPage(_currentIndex);
                    });
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

记住，为了使PageView的每个子组件与BottomAppBar重叠时可以使用Padding，你可以使用kBottomNavigationBarHeight大小来设置BottomPadding。

- Aref

---

我刚试了一下，如果PageView包含滚动小部件，你就不能操作它们。 - 李少颖