Flutter InkWell 悬停功能

Question

尝试使用InkWell功能（onHover）放大我的图片（使用ClipPath进行裁剪），但当我悬停在图片上时，没有任何反应。

InkWell(
                        onTap: () {},
                        onHover: (isHovering) {
                          if (isHovering) {
                            setState(() {
                              sizeBool = !sizeBool;
                            });
                          }
                        },
                        child: ClipPath(
                          child: AnimatedContainer(
                            duration: Duration(seconds: 1),
                            width: MediaQuery.of(context).size.width,
                            height: sizeBool ? 450 : 150,
                            child: Image.network(
                              'image.url',
                              fit: BoxFit.cover,
                            ),
                          ),
                          clipper: CustomClipPath(),
                        ),
                      )
                    ],
                  )
                ],
              ),
            ),
          ),
        );
      }
    }

- Emir Kutlugün

---

你能展示InkWell的父控件吗？ - Haniel Baez

检查我的答案，你可以使用以下内容获得悬停效果：https://stackoverflow.com/a/63780118/5370550 - Nik

Answer 1

使用 onHover() 来定义 onTap()。它将起作用：

InkWell(
onTap: (){},
onHover: (val) {
setState(() {isHover = val;
      });
  },
),

- Muhammad Ullah

Answer 2

试试这个：DartPad链接

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  double sideLength = 50;

  Widget build(BuildContext context) {
    return AnimatedContainer(
      height: sideLength,
      width: sideLength,
      duration: Duration(seconds: 2),
      curve: Curves.easeIn,
      child: Material(
        color: Colors.yellow,
        child: InkWell(
          onTap:(){},
            onHover: (value) {
              print(value);
            setState(() {
              sideLength = value?150 :50;
            });
          },
        ),
      ),
    );
  }
}

- M.B

---

无法工作。你认为这是关于Clipper的问题吗？顺便说一下，它没有打印出值。 - Emir Kutlugün

不行，我刚刚移除了clipPath，代码和你的一样，但还是不起作用。 - Emir Kutlugün

我把我的代码放在Dartpad上，它正在工作中，链接。 - M.B

我可以看到你的所有小部件吗？ - M.B

我在Dartpad上测试了自己的小部件，我的小部件在Dartpad上也可以运行，但在模拟器上无法运行... - Emir Kutlugün

也许模拟器不能正常工作是因为你无法使用手机悬停，我的意思是你必须触摸屏幕才能做出逻辑操作。 - Emir Kutlugün

Answer 3

尝试使用颜色为Colors.transparent的"Material"小部件包装InkWell。

Material(
  color: Colors.transparent,
  child: InkWell(
    ...
  )
)

- Axot

---

没有打印OnHover: (val) { print('hover'); } ，这不起作用... - Yogi Arif Widodo