使用GestureDetector时的油墨纹波效应

Question

我需要使用GestureDetector，因为它可以检测出比InkWell更多类型的用户交互，但与InkWell不同的是，它不会在用户点击或长时间按下它时提供任何视觉响应。

是否可以在GestureDetector中仍然处理用户交互的同时为抽头/长按压添加波纹效应？

Answer 1

只需使用这个插件

touch_ripple_effect: ^2.2.4

触觉纹波效应

TouchRippleEffect(
                borderRadius: _helloRadius,
                rippleColor: Colors.white60,
                onTap: (){
                  print("Anand !");
                },
                child: Container(
                  width: 110, 
                  height: 50, 
                  alignment: Alignment.center, 
                  decoration: BoxDecoration(color: Colors.pink, borderRadius: _helloRadius),
                  child: IconButton(
                    iconSize: 24.0, 
                    icon: Icon(Icons.search,color: Colors.white, size: 36,), 
                    onPressed: null
                    ),)
              ),

触觉反馈效应

TouchFeedback(
                onTap: (){
                  print(" I am Aditya");
                },
                rippleColor: Colors.blue[200],
                child: Container(
                  width: 120,
                  height: 40, 
                  alignment: Alignment.center,
                  decoration: BoxDecoration(color: Colors.yellow, borderRadius: BorderRadius.circular(5),), 
                  child: Text(
                    "Hit me !", 
                    style: TextStyle(fontSize: 20, fontWeight:  FontWeight.bold)
                    )
                    ),
              )

Answer 2

如果你想要一个快速的黑客，检查这个：

class Test extends StatelessWidget {
 const Test({
  Key? key,
  this.onTap,
 }) : super(key: key);
 final void Function()? onTap;
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Scaffold(
  body: GestureDetector(
    onTap: onTap,
    child: SizedBox(
      width: width * 0.2,
      height: 70,
      child: Card(
        color: Colors.red,
        child: InkWell(
          onTap: () {},
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

尝试以下代码：

InkWell(
  onLongPress: () {
    // Do what you want to do
  },
  child: child,
),