如何使BottomAppBar backgroundColor透明

问题描述

我希望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,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 中并设置了它的背景颜色，但它仍然不起作用。

你是如何解决这个问题的？

解决方法

你只需要添加

extendBody: true,

属性 Scaffold

,

使用 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,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;
}

Sandbox Example

记住要在 Padding 的每个孩子的末尾使用 PageView 重叠 BottomAppBar，您可以使用 kBottomNavigationBarHeight 大小BottomPadding。