如何在颤动中悬停时设置图像缩放效果

Question

我想在悬停时缩放图像，我尝试使用 Transform 更改比例因子，但它仅将图像放大到右侧和底部，不像缩放。唯一有效的方法是更改图像小部件的 boxFit。但那不是像 Gif 那样的动画

Transform.scale(
                      scale: isHovering ? 1.2 : 1.0,
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.black.withOpacity(0.3),
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                      ),
                    )

AnimatedContainer(
                    duration: const Duration(milliseconds: 200),
                    curve: Curves.easeInOut,
                    child: ClipRRect(
                      child: Image.memory(
                        Uint8List.fromList(images!.bytes),
                        width: size,
                        height: size,
                        fit: BoxFit.cover,
                      ),
                    ),
                  )

两者都不满足要求。任何帮助将不胜感激

Answer 1

您可以使用

AnimatedContainer

的

transform

在悬停时进行缩放。我使用 InkWell 作为父级，而小部件需要点击事件。

child: AnimatedContainer(
  duration: Duration(milliseconds: 300),
  transform: Matrix4.identity()
    ..scale(isHovering ? 1.4 : 1.0),
  transformAlignment: Alignment.center,
  child: YourImage

并使用

child: Transform.scale(
  scale: isHovering ? 1.4 : 1.0,
  child: YourImage()

对内部项目使用缩放。

///* I am using same bool for both
class HZE extends StatelessWidget {
  const HZE({super.key});

  @override
  Widget build(BuildContext context) {
    bool isHovering = false;
    return Scaffold(
      body: Center(
        child: StatefulBuilder(
          builder: (BuildContext context, setState) {
            return Column(
              children: [
                InkWell(
                  onTap: () {},
                  onHover: (value) {
                    setState(() {
                      isHovering = value;
                    });
                  },
                  child: Container(
                    height: 100,
                    width: 100,
                    clipBehavior: Clip.antiAlias,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: isHovering ? Colors.red : Colors.blue,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Transform.scale(
                      scale: isHovering ? 1.4 : 1.0,
                      child: Text(
                        'Hello World',
                        style: TextStyle(
                          fontSize: 33,
                        ),
                      ),
                    ),
                  ),
                ),
                InkWell(
                  onTap: () {},
                  onHover: (value) {
                    setState(() {
                      isHovering = value;
                    });
                  },
                  child: Container(
                    height: 100,
                    width: 100,
                    clipBehavior: Clip.antiAlias,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: isHovering ? Colors.red : Colors.blue,
                        borderRadius: BorderRadius.circular(10.0)),
                    child: AnimatedContainer(
                      duration: Duration(milliseconds: 300),
                      transform: Matrix4.identity()
                        ..scale(isHovering ? 1.4 : 1.0),
                      transformAlignment: Alignment.center,
                      child: Text(
                        'Hello World',
                        style: TextStyle(
                          fontSize: 33,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}