使用 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

  ),
),