Flutter中的AppBar背景滤镜效果

Question

我如何在Flutter中为AppBar使用BackdropFilter？当我将其用于AppBar时，其他在Scaffold中的小部件也会变模糊，而不仅仅是AppBar。

例如：

BackdropFilter(
  filter: ImageFilter.blur(
      sigmaX: 5,
      sigmaY: 5
  ),

  child: AppBar(
      automaticallyImplyLeading: false,
      // Used for removing back button.
      elevation: 8.0,
      titleSpacing: 0.0,
      backgroundColor: theme.appMainColor,
      title: Stack(
        children: <Widget>[

        ],
      )),
),

- DolDurma

---

你找到这个问题的答案了吗？我也遇到了同样的问题。 - jns_ai_unr

@j.unruh 不，我不能。 - DolDurma

Answer 1

1. 使用 AppBar 的 flexibleSpace 参数。
2. 将 BackDropFilter 包装在 ClipRect 中，以防模糊影响整个屏幕。
3. 确保创建一个 Container 作为 BackDropFilter 的子元素。

这是您需要添加到 AppBar 的最小代码:

flexibleSpace: ClipRect(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 7, sigmaY: 7),
    child: Container(
      color: Colors.transparent,
    ),
  ),
),

- DaniyalAhmadSE

---

这是一个很棒的解决方案！ - 임세준

Answer 2

在浏览网络并尝试不同的小部件组合后，我最终找到了解决方案。

    appBar: PreferredSize(
      child: Container(
        child: ClipRRect(
            child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                child: Container(
                  //   width: MediaQuery.of(context).size.width,
                  //  height: MediaQuery.of(context).padding.top,
                  color: Colors.transparent,
                ))),
      ),
      preferredSize: Size(MediaQuery.of(context).size.width, 22),
    ),

加油吧！！

- Sarthak Singhal

---

你可以使用AppBar Widget代替内部Container。或者将其保存在单独的变量中以获取默认的AppBar高度：appBar.preferredSize.height; - User Rebo

我发现我必须保留Container小部件并将AppBar作为其子级。尽管看似多余，但如果没有Container，模糊效果会应用到整个页面。 - Alastair Brayne