Flutter中如何根据底部导航切换显示/隐藏自定义AppBar？

你报错的核心原因是Flutter的appBar参数要求传入PreferredSizeWidget类型的组件，而Container并不属于这个类型，类型不匹配导致报错。下面给你两种可行的解决方式：

方式1：直接隐藏AppBar（推荐） #

如果只是想让指定页面不显示AppBar，直接返回null即可，这是最简洁的实现：

appBar: currentIndex == 0 ? null : AppBar(
        centerTitle: true,
        title: Image.asset(
          'assets/fblogosmall300.png',
          fit: BoxFit.contain,
          height: 45,
        ),
        flexibleSpace: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  colors: <Color>[secondColor, mainColor])),
        ),
      ),

方式2：显示空白占位的AppBar #

如果需要保留AppBar的占位高度（避免页面内容突然上移），可以用PreferredSize组件包裹Container，指定和原AppBar一致的高度（默认AppBar高度为56）：

appBar: currentIndex == 0 ? PreferredSize(
          preferredSize: const Size.fromHeight(56), // 匹配默认AppBar高度
          child: Container(
            color: Colors.transparent, // 空白透明背景，也可自定义颜色
          ),
        ) : AppBar(
        centerTitle: true,
        title: Image.asset(
          'assets/fblogosmall300.png',
          fit: BoxFit.contain,
          height: 45,
        ),
        flexibleSpace: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  colors: <Color>[secondColor, mainColor])),
        ),
      ),

注意：如果你的AppBar自定义了高度，记得把PreferredSize里的height值改成对应的数值，保持页面布局的一致性。

内容的提问来源于stack exchange，提问作者La Pyae