Question

我正在尝试通过Flutter获得此结果；

我有这种行为；

代码；

    import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:html' as html;

class OverlayAnimatedGridElement extends StatefulWidget {
  OverlayAnimatedGridElement(this.imagepath, this.postDetail, this.postTitle);
  final String imagepath;
  final String postTitle;
  final String postDetail;

  @override
  _OverlayAnimatedGridElementState createState() =>
      _OverlayAnimatedGridElementState();
}

class _OverlayAnimatedGridElementState extends State<OverlayAnimatedGridElement>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _opacityTween;
  bool isHovered = false;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _opacityTween = Tween<double>(begin: 0, end: 1).animate(
        CurvedAnimation(parent: _controller, curve: Curves.easeInOutCirc));

    super.initState();
  }

  hoverActivation(hoverState) {
    bool hoverState;
    isHovered = hoverState;
    if (isHovered = true) {
      _controller.forward();
    } else if (isHovered = false) {
      _controller.reset();
    }
    print("activated");
  }

  @override
  Widget build(BuildContext context) {
    _opacityTween.addListener(() {
      setState(() {
        print(_opacityTween.value);
      });
    });

    return MouseRegion(
      onHover: hoverActivation(true),
      child: Container(
        constraints: BoxConstraints(maxHeight: 360, maxWidth: 640),
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            Image(image: AssetImage("${widget.imagepath}")),
            Opacity(
              opacity: _opacityTween.value,
              child: Container(
                color: Color.fromRGBO(128, 128, 128, 0.5),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text("${widget.postDetail}"),
                        Text("${widget.postTitle}")
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

一个独立的小部件可以正常工作，但是当我将其放入gridview或pageview时，当我滚动到它时，它会自动读取鼠标输入的内容。

我尝试使用其他小部件，例如Inkwell，Listener和其他。没有解决方案。如果有更好的解决方案，有人可以指导我吗？

我该如何解决？

编辑：

现在有这个问题。 MouseRegion导致多个controller.forwards

Answer 1

我已经创建了一个示例...请尝试一下，

try
        {

            CrystalReport1 cry1 = new CrystalReport1();
            cry1.Load(@"CrystalReport1.rpt");
      
            GlobalConfig.sql.ConnectionString = GlobalConfig.connectionString;
            GlobalConfig gb = new GlobalConfig();
            using (IDbConnection connection = GlobalConfig.sql)
            {
                List<string> ls = new List<string>();
                ls = gb.getConnectionlogin();
                cry1.SetDatabaseLogon(ls[0], ls[1]); 
                                                 
                cry1.SetParameterValue("@institute_id", instituteid);
                cry1.SetParameterValue("@date_from", from1);

                cry1.SetParameterValue("@date_to", to1);
                cry1.SetParameterValue("institutename", institutename);
                crysview.ViewerCore.ReportSource = cry1;
            }

        }
        catch(Exception es)
        {
            Console.WriteLine("Error load file   " + es);
        }


    }

Answer 2

我通过将addListener方法移动到initState解决了第二个问题。我猜它以前是在小部件本身内部的，这导致在每次重建中添加侦听器，并导致每个侦听器进行多次重建。

Flutter Web鼠标区域小部件触发

2 个答案: