使用 BackdropFilter 会影响 Row Widget 中的其他 Widget - Flutter Web

Posted 2023-02-23

【中文标题】使用 BackdropFilter 会影响 Row Widget 中的其他 Widget - Flutter Web

【英文标题】：Using BackdropFilter affects other widgets in a Row Widget - Flutter Web

【发布时间】：2021-05-07 03:05:59

【问题描述】：

当用户将鼠标悬停在 Row 小部件上时（在 Chrome 上）尝试模糊容器时，我遇到了问题。我有一个名为 PanelLink 的自定义小部件，当光标经过它时，它的大小应该会缩小并模糊背景。它可以工作，但由于某种原因，当将鼠标悬停在一个上时，它还会模糊左侧的每个小部件，而不仅仅是它本身。

FrontPage.dart：

import 'package:flutter/material.dart';
import 'package:website_v2/CustomWidgets/PanelLink.dart';

class FrontPage extends StatefulWidget 
  FrontPage();

  @override
  _FrontPageState createState() => _FrontPageState();


class _FrontPageState extends State<FrontPage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Website'),
        centerTitle: false,
        backgroundColor: Colors.blue[900],
      ),
      backgroundColor: Colors.blueGrey[900],
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            PanelLink(false, 'assets/education.jpg'),
            PanelLink(true, 'assets/about.jpeg'),
            PanelLink(false, 'assets/projects2.jpg'),
          ],
        ),
      ),
    );
  

PanelLink.dart：

import 'package:flutter/material.dart';
import 'dart:ui';

class PanelLink extends StatefulWidget 
  PanelLink(this._blur, this.imageLoc);
  final bool _blur;
  final String imageLoc;
  @override
  PanelLinkState createState() => PanelLinkState(_blur, imageLoc);


class PanelLinkState extends State<PanelLink> 
  PanelLinkState(this._blur, this.imageLoc);

  bool isHovering = false;
  bool _blur;
  String imageLoc;

  Widget build(BuildContext context) 
    return Expanded(
        child: InkWell(
      onTap: () => null,
      onHover: (hovering) 
        setState(() => isHovering = hovering);
      ,
      child: Stack(children: [
        AnimatedContainer(
          duration: const Duration(milliseconds: 1000),
          curve: Curves.ease,
          margin: EdgeInsets.all(isHovering ? 20 : 0),
          decoration: BoxDecoration(
              color: Colors.black,
              image: DecorationImage(
                  image: AssetImage(imageLoc), fit: BoxFit.cover)),
          child: BackdropFilter(
              filter: ImageFilter.blur(
                  sigmaX: isHovering ? 5 : 0, sigmaY: isHovering ? 5 : 0),
              child: Container(
                color: Colors.black.withOpacity(0.1),
              )),
        ),
        Text('Test')
      ]),
    ));
  

这是发生问题的图片。我将鼠标悬停在面板 2 上，但面板 1 和 2 都模糊了，但面板 3 没有。如果我将鼠标悬停在面板 1 上，则只有面板 1 模糊。如果我将鼠标悬停在面板 3 上，所有这些都是模糊的。

我只让面板 2 具有 BackdropFilter 小部件进行了实验，但是当将鼠标悬停在面板 2 上时，面板 1 仍然变得模糊。

【参考方案1】：

由于您使用 AnimatedContainer 小部件，问题可能是它无法识别他的子小部件之间的区别。尝试添加键值标识符

AnimatedContainer(
  child: Container(
    key: ValueKey("imageA"), //make sure that this is different on every widget, its better to passed some value here thats different on the other refactored widget
    Try experimenting it might work for you

  ),
),