如何使导航底部栏透明

Question

我正在尝试创建一个透明的底部导航栏，这是我的底部栏部分：

Align(
                      alignment: Alignment.bottomCenter,
                      child: Theme(
                          data: Theme.of(context)
                              .copyWith(canvasColor: Colors.transparent),
                          child: BottomNavigationBar(
                            currentIndex: 0,
                            items: [
                              BottomNavigationBarItem(
                                  icon: Icon(Icons.location_on),
                                  title: Text('Map')),
                              BottomNavigationBarItem(
                                  icon: Icon(Icons.line_style),
                                  title: Text('List')),
                              BottomNavigationBarItem(
                                  icon: Icon(Icons.add), title: Text('Add Property'))
                            ],
                          ))),

这是我完整的Scafold Widget：

return Scaffold(
      backgroundColor: AppTheme.white,
      body: FutureBuilder<bool>(
        future: getData(),
        builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
          if (!snapshot.hasData) {
            return const SizedBox();
          } else {
            return Padding(
              padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  appBar(),
                  // tabBar(),
                  Expanded(
                    child: FutureBuilder<bool>(
                      future: getData(),
                      builder:
                          (BuildContext context, AsyncSnapshot<bool> snapshot) {
                        if (!snapshot.hasData) {
                          return const SizedBox();
                        } else {
                          return ChangeNotifierProvider(
                            create: (context) => Properties(),
                            child: PropertiesGrid(_showOnlyFavorites),
                          );
                        }
                      },
                    ),
                  ),
                  Align(
                      alignment: Alignment.bottomCenter,
                      child: Theme(
                          data: Theme.of(context)
                              .copyWith(canvasColor: Colors.transparent),
                          child: BottomNavigationBar(
                            currentIndex: 0,
                            items: [
                              BottomNavigationBarItem(
                                  icon: Icon(Icons.location_on),
                                  title: Text('Map')),
                              BottomNavigationBarItem(
                                  icon: Icon(Icons.line_style),
                                  title: Text('List')),
                              BottomNavigationBarItem(
                                  icon: Icon(Icons.add), title: Text('Add Property'))
                            ],
                          ))),
                ],
              ),
            );
          }
        },
      ),
    );
  }

  Widget appBar() {
    return SizedBox(
      height: AppBar().preferredSize.height,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 8, left: 8),
            child: Container(
              width: AppBar().preferredSize.height - 8,
              height: AppBar().preferredSize.height - 8,
            ),
          ),
          Expanded(
            child: Center(
              child: Padding(
                padding: const EdgeInsets.only(top: 4),
                child:
                    Image.asset('assets/images/logo.png', fit: BoxFit.contain),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 8, right: 8),
            child: Container(
              width: AppBar().preferredSize.height - 8,
              height: AppBar().preferredSize.height - 8,
              color: Colors.white,
              child: Material(
                color: Colors.transparent,
                child: InkWell(
                  borderRadius:
                      BorderRadius.circular(AppBar().preferredSize.height),
                  child: Icon(
                    Icons.location_on,
                    color: AppTheme.dark_grey,
                  ),
                  onTap: () {
                    setState(() {
                      multiple = !multiple;
                    });
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget tabBar() {
    return SizedBox(
      height: AppBar().preferredSize.height,
    );
  }
}

但我发现它没有像透明条那样显示页面背景，如下图所示

我希望有人能帮我找出问题到底出在哪里..

Answer 1

你应该在脚手架外面使用futurebuilder，而不是在body里面，因为你真的想改变整个页面

return FutureBuilder<bool>(
      future: getData(),
      builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
        if (!snapshot.hasData) {
          return const SizedBox();
        } else 
          return Scaffold(
            backgroundColor: AppTheme.white,
            extendBody: true, //the body of the scaffold is shown behind the bottomNavigationBar
            appBar: AppBar( //use an AppBar widget instead of the one you created
              centerTitle: true, //this centers the title, in this case the image
              leading: IconButton(
                icon: const Icon(Icons.menu),
                onPressed: null,
              ), //the button of the left
              title: Padding( //your image
                padding: const EdgeInsets.only(top: 4),
                child: Image.asset('assets/images/logo.png', fit: BoxFit.contain),
              ),
              actionsIconTheme: IconThemeData(color: AppTheme.dark_grey), //this change the theme of the action buttons, the one at the right
              actions: [
                IconButton(
                   icon: const Icon(Icons.location_on),
                   onPressed: () {
                     setState(() {
                       multiple = !multiple;
                     });
                  },
               )
             ],
            ),
            body: ChangeNotifierProvider(
              create: (context) => Properties(),
              child: PropertiesGrid(_showOnlyFavorites),
            ),
           bottomNavigationBar: BottomNavigationBar(
             backgroundColor: Colors.transparent, //no color
             elevation: 0.0, // no shadow
             currentIndex: 0,
             items: [
               BottomNavigationBarItem(
                 icon: Icon(Icons.location_on),
                 title: Text('Map')),
               BottomNavigationBarItem(
                 icon: Icon(Icons.line_style),
                 title: Text('List')),
               BottomNavigationBarItem(
                 icon: Icon(Icons.add), title: Text('Add Property'))
             ],
           ),
          )
        }
    );

您在里面有第二个未来构建器，具有相同的未来，这无关紧要，因为您已经拥有第一个的价值，所以我删除了它。当 future 正在等待并且没有数据时，它会显示一个您想要的 sizedBox()，当 future 完成时，它将构建脚手架，您可以使用它的参数来构建带有 appbar 和 BottomNavigationBarItem 的页面，它应该是

更新

我用脚手架期望的小部件 AppBar() 更改了 appbar（它期望实现 PreferredSizeWidget 类）

Widget appBar() {
    return SizedBox(....);
  }

您创建的这个小部件使用 SizedBox 作为 treee 中的第一个小部件，它没有实现该类，因此它会给您错误，最好使用一开始颤振给您开箱即用的那个，稍后，当您了解它的工作原理时，您可以创建自己的扩展 PreferredSizeWidget（如果您需要实现不同的东西）