AppBar全透明

Question

问题

有没有办法让

AppBar

完全透明而不需要 使用

Stack

小部件??

这是我现在的

AppBar

（它是透明的，但不完全，它有一个 小白影）

AppBar(
  automaticallyImplyLeading: false,
  backgroundColor: const Color.fromARGB(0, 255, 255, 255).withOpacity(0.1),
  shadowColor: const Color.fromARGB(0, 255, 255, 255).withOpacity(0.1),
  title: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          IconButton(
            onPressed: () {}, 
            icon: const Icon(
              Icons.menu,
              color: colors.BLACK,
              size: 24,
            ),
          ),
          IconButton(
            onPressed: () {}, 
            icon: const Icon(
              Icons.notifications,
              color: colors.BLACK,
              size: 24,
            ),
          ),
        ],
      ),
      Row(
        children: const [
          Text('Location', style: TextStyle(color: colors.BLACK, fontSize: 14)),
          Icon(
            Icons.location_on,
            color: colors.BLACK,
            size: 24,
          ),
        ]
      ),
      IconButton(
        onPressed: () {}, 
        icon: const CircleAvatar(
          backgroundImage: AssetImage('assets/images/icons/temp_profile_pic.png'),
          radius: 20,
        )
      )
    ],
  ),
);

打印

这里有一些照片可以向您展示正在发生的事情：

滚动到顶部

滚动时

Answer 1

要将 AppBar 设置为完全透明，您需要将

elevation

设置为

0

并将颜色设置为

transparent

，如下：

AppBar(
   backgroundColor: Colors.transparent,
   elevation: 0
)

AppBar 将具有与脚手架背景相同的颜色。

Answer 2

接受的答案对我不起作用，并且没有考虑屏幕标题或操作按钮等内容的前景色。

这是我用过的：

Scaffold(
  // height of the body is extended to include the height of the AppBar
  // and the top of the body is aligned with the top of the AppBar.
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    foregroundColor: Colors.black,
    elevation: 0,
  ), // AppBar
  ...
);