如何使用Flutter for Web在鼠标悬停时对图像进行动画处理？

Question

我是JavaScript开发人员，对Flutter还是陌生的。我只想使用Flutter for Web在鼠标悬停上设置一组图像动画，例如this。它包括缩放，不透明度和灰度转换。如何在Flutter中做到这一点？预先感谢。

Answer 1

这只是一个演示，显示您可以使用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',              
            ),
          ),
        ),
      ),
    );
  }
}