flutter 抖动网页缩放和平移鼠标悬停

ctzwtxfj 于 2023-02-13 发布在 Flutter

关注(0)|答案(1)|浏览(166)

我在Flutter网页项目工作，我需要使小部件包含图像缩放和平移鼠标悬停我尝试使用鼠标区域+ InteractiveViewer，但我不能让它工作的方式，我想要的
我试图模仿这一点：https://sb-topdeal2.mybigcommerce.com/sample-laundry-detergent/（尝试悬停在图像上）

MouseRegion(
              onExit: (event) {
                transformationController.value = Matrix4.identity();
              },
              onHover: (h){
                print(h.position.dy);
                transformationController.value = Matrix4.identity()
                  ..translate(h.position.dx , h.position.dy)
                  ..scale(1.5);
              },
              child: Container(
                height: Responsive.is1200(context) ? 360 : 260,
                child: InteractiveViewer(
                    scaleEnabled: false,
                    panEnabled: true,
                    minScale: 0.1, // min scale
                    maxScale: 1.0, // max scale
                    transformationController: transformationController,
                    child: Image.asset(
                      image,
                    )),
              ),
            )

flutter

来源：https://stackoverflow.com/questions/71235360/flutter-web-zoom-and-pan-on-mouse-hover

1条答案

按热度按时间

lyr7nygr1#

您可以使用ImageZoomOnMove软件包：

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  final imageUrl = "https://images.unsplash.com/photo-1619360142632-031d811d1678?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Zoom on Move'),
      ),
      body: Center(
        child: ImageZoomOnMove(
          width: 500,
          height: 500,
          image: Image.network(
            imageUrl,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-02-13

我来回答

flutter 抖动网页缩放和平移鼠标悬停

1条答案

相关问题

热门标签

最新问答