使用 BackdropFilter 会影响行小部件中的其他小部件 - Flutter Web

Question

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

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 上使用 hover，只有面板 1 是模糊的。 如果我在面板 3 上使用 hover，所有这些都是模糊的。

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

Answer 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

  ),
),