You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Flutter的Scaffold组件中移除AppBar的下拉阴影?

移除Flutter中AppBar下方下拉阴影的实现方法

当然有办法啦!在Flutter里去掉Scaffold的AppBar下方阴影其实非常简单,主要有两种实用的实现方式,我给你逐一说明:

  • 方法一:设置elevation属性为0
    AppBar的阴影效果本质是由它的elevation(海拔高度)属性控制的,默认值是4,代表有一层轻微的阴影。只要把这个值设为0,就能完全移除阴影:

    Scaffold(
      appBar: AppBar(
        elevation: 0, // 核心设置:将海拔高度设为0,消除阴影
        title: const Text('无阴影的AppBar'),
      ),
      body: const Center(child: Text('Hello World')),
    )
    
  • 方法二:设置shadowColor为透明色
    如果你需要保留elevation的其他潜在效果(比如某些Material Design的z轴层级逻辑),但只想隐藏阴影,可以直接把阴影颜色设为透明:

    Scaffold(
      appBar: AppBar(
        shadowColor: Colors.transparent, // 核心设置:让阴影颜色完全透明
        title: const Text('无阴影的AppBar'),
      ),
      body: const Center(child: Text('Hello World')),
    )
    

简单总结下:第一种方法是从根源上取消了AppBar的“悬浮”层级,第二种则是只隐藏阴影视觉效果,你可以根据自己的实际需求来选择合适的方式~

内容的提问来源于stack exchange,提问作者Matt S.

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 10:26:01