Как анимировать изображения при наведении мышки с помощью Flutter for Web? - PullRequest
Новая
       8

Как анимировать изображения при наведении мышки с помощью Flutter for Web?

0 голосов
/ 04 февраля 2020

Я JavaScript разработчик, и я новичок во Флаттере. Я просто хочу анимировать набор изображений при наведении курсора мыши, например this , используя Flutter for Web. Включает преобразования Масштабирование, Непрозрачность и Оттенки серого. Как это сделать во флаттере? Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 24 марта 2020

Кроме анимации часть вашего вопроса. Аргумент 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:

Значение, переданное обратному вызову, имеет значение true, если указатель вошел в эту часть материала, и false, если указатель вышел из этой части материала.

0 голосов
/ 04 февраля 2020

Это просто демонстрация, показывающая, что вы можете использовать onHover из Inkwell виджета для выполнения sh задачи. Вам нужно будет придумать логи c, чтобы решить, какое смещение и масштаб следует использовать и как расположить виджет. В моем примере я использовал вид сетки. Возможно, вы можете использовать стек для установки текущего активного виджета на основе наведения.

Вот пример с видом сетки. Живая версия этого доступна в этом дартпад . 

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',              
            ),
          ),
        ),
      ),
    );
  }
}
...