更改 AppBar 标高颜色/遮罩并保持标高 = 1

Question

我的应用程序只有一个屏幕，带有

Drawer

。主屏幕包含以下

AppBar

：

AppBar(
   foregroundColor: Colors.white,
   backgroundColor: Colors.green,
   elevation: 0,      
   actions: // actions here
)

我想保留

AppBar

，因为我在这里采取的行动。但是，我不希望它有任何颜色。所以我在应用程序中添加了以下代码

Scaffold

：

extendBodyBehindAppBar: true,

效果很好，现在

AppBar

是不可见的，而动作是可见的。但是，当我在抽屉中执行某些操作并关闭它时，AppBar 开始出现奇怪的颜色（并非每次）。我发现它仍然是透明的，但是

elevation

发生了一些事情，所以它现在的行为就像它有

elevation: 1.0

一样。有人可以建议如何解决这种奇怪的行为吗？我认为对于

elevation

和屏幕的其余部分来说，零

AppBar

可能存在问题，当

Drawer

出现在屏幕上方然后关闭时，相等的高度会发生碰撞，因此有时会发生变化

AppBar

。最好的解决方案是当它有 AppBar

 时，可以

删除在 elevation: 1 上制作的任何遮罩/附加效果。因此，如果我增加

AppBar

的高度并隐藏所有效果，则

AppBar

在任何情况下都将真正透明。谢谢您的帮助。

Answer 1

“奇怪的颜色”实际上是

surfaceTintColor

，它使应用栏在使用 Material 3 时着色。要删除它，请将其设置为透明：

AppBar(
  // ...
  surfaceTintColor: Colors.transparent,
),

要启用材质 2 中的立面阴影，请参阅这篇文章：

升级到 Flutter 3.16 后，应用栏、背景颜色、按钮大小、空格发生变化

Answer 2

应用栏高度和颜色变化

 appBar: AppBar(
          title: Text('Custom Elevation Color'),
          elevation: 1, // Set elevation to 1
          backgroundColor: Colors.blue, // Set the background color of the AppBar
          iconTheme: IconThemeData(color: Colors.white), // Set icon color
          textTheme: TextTheme(
            headline6: TextStyle(color: Colors.white), // Set text color
          ),
        ),

#颤动 #飞镖