如何使用 Flutter for Web 在鼠标悬停时动画图像？

Question

我是一名 JavaScript 开发人员，我是 Flutter 的新手。我只想动画鼠标悬停像一组图像的这种使用颤振的Web。它包括缩放、不透明度和灰度转换。如何在 Flutter 中实现这一点？提前致谢。

Answer 1

除了您问题的动画部分。的onHover的说法InkWell，如果你指定只能onTap第一个参数。

InkWell(
  child: SomeWidget(),
  onTap: () {
    //You can leave it empty, like that.
  }
  onHover: (isHovering) {
    if (isHovering) {
      //The mouse is hovering.
    } else {
      //The mouse is no longer hovering.
    }
  }
)

从文档中，boolean这是传递给onHover回调的好处：

如果指针已进入材料的这一部分，则传递给回调的值为真，如果指针已退出材料的这一部分，则传递给回调的值为假。

Answer 2

这只是一个演示，旨在展示您可以使用onHover小Inkwell部件来完成任务。您必须想出逻辑来决定应使用多少偏移和比例以及如何定位小部件。在我的示例中，我使用了网格视图。您也许可以使用堆栈根据悬停来设置当前活动的小部件。

这是带有网格视图的示例。此dartpad中提供了该版本的实时版本。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,      
      children: <Widget>[ImageHover(),ImageHover(),ImageHover(),ImageHover(),ImageHover(),ImageHover(),ImageHover(),],
    );
  }
}

class ImageHover extends StatefulWidget {
  @override
  _ImageHoverState createState() => _ImageHoverState();
}

class _ImageHoverState extends State<ImageHover> {
  double elevation = 4.0;
  double scale = 1.0;
  Offset translate = Offset(0,0);
  @override
  Widget build(context) {
    return InkWell(      
      onTap: (){},
      onHover: (value){
        print(value);
        if(value){
          setState((){
            elevation = 20.0;     
            scale = 2.0;
            translate = Offset(20,20);
          });
        }else{
          setState((){
            elevation = 4.0; 
            scale = 1.0;
            translate = Offset(0,0);
          });
        }
      },
      child: Transform.translate(
        offset: translate ,        
        child: Transform.scale(
          scale: scale,
          child: Material(        
            elevation: elevation,        
            child: Image.network(           
                'https://i.ytimg.com/vi/acm9dCI5_dc/maxresdefault.jpg',              
            ),
          ),
        ),
      ),
    );
  }
}