Flutter中实现无网络提示AppBar平滑过渡的最优方案

你的问题核心是直接在Scaffold的appBar属性里切换组件的存在与否，导致布局瞬间重排——ShowUpAnimation只作用于子组件，没法改变父组件突然添加/移除带来的跳变。下面是具体的修复方案：

核心思路 #

放弃用Scaffold的appBar控制提示组件，转而把提示放在body的顶部，用动画容器同时控制它的高度、透明度：让组件从0高度/全透明逐渐过渡到目标状态，反之亦然，这样下方内容会被平滑推动，不会突兀位移。

代码实现 #

1. 修改Scaffold结构 #

把原来的appBar逻辑移到body里，用Column包裹提示组件和页面内容：

Scaffold(
  body: Column(
    children: [
      // 带动画的无网络提示
      _buildNoConnectionBanner(viewModel.hasConnection),
      // 页面主内容，用Expanded占满剩余空间
      Expanded(
        child: YourPageContent(), // 替换成你原有的页面内容组件
      ),
    ],
  ),
);

2. 实现带动画的无网络提示 #

用AnimatedContainer处理高度、透明度的平滑过渡：

Widget _buildNoConnectionBanner(bool hasConnection) {
  return AnimatedContainer(
    duration: const Duration(milliseconds: 300), // 可自定义动画时长
    curve: Curves.easeInOut, // 比linear更自然的过渡曲线
    height: hasConnection ? 0 : 35, // 有网络时高度收为0，无网络时展开到35
    opacity: hasConnection ? 0 : 1, // 有网络时全透明，无网络时完全显示
    child: const NoConnectionBanner(),
  );
}

// 替换原NoConnectionAppBar的组件（无需依赖AppBar，也可保留AppBar样式）
class NoConnectionBanner extends StatelessWidget {
  const NoConnectionBanner({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 35,
      color: Colors.red[700],
      alignment: Alignment.center,
      child: const Text(
        "无网络",
        style: TextStyle(color: Colors.white, fontSize: 14),
      ),
    );
  }
}

3. 保留AppBar样式的优化 #

如果需要AppBar的阴影、状态栏适配等特性，可把Container换成AppBar，记得关闭默认返回按钮：

class NoConnectionBanner extends StatelessWidget {
  const NoConnectionBanner({super.key});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      automaticallyImplyLeading: false,
      toolbarHeight: 35,
      backgroundColor: Colors.red[700],
      title: const Text(
        "无网络",
        style: TextStyle(color: Colors.white, fontSize: 14),
      ),
      centerTitle: true,
    );
  }
}

效果说明 #

• 断网时：提示组件从0高度、全透明，逐渐展开到35高度、完全显示，下方页面内容被平滑向下推动。
• 恢复网络时：提示组件逐渐收缩到0高度、全透明，页面内容平滑向上复位，不会突然消失。

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