请帮我处理图标按钮的长按检测。
我正在尝试创建一个图标按钮,如果点击一次则将数量值增加1,而在长按时则将其增加10。
但是,在Flutter 2.12中,IconButton
没有提供长按事件处理程序,这是一个问题。
因此,我使用了以下代码中的Container
内部的Icon
来实现:
GestureDetector(
child: Container(
child: const Icon(
Icons.add,
),
padding: EdgeInsets.symmetric(vertical: 6.0, horizontal: 18.0),
),
onTap: () {
increment(1);
},
onLongPressStart: (_) async {
startPressing(() => increment(10));
},
onLongPressCancel: () {
cancelPress();
},
onLongPressEnd: (_) {
cancelPress();
},
),
它能工作,但问题在于按压区域非常小,在移动设备上很难找到按压点而感到不舒适。
我尝试将图标大小增加到48,但结果很糟糕,图标过于不自然地变大。
const Icon(
Icons.add,
size: 48,
),
对我而言,看起来不错的设计是使用GestureDetector
(用于长按)和IconButton
(以及onPressed用于单击检测):
GestureDetector(
child: IconButton(
onPressed: () => decrement(1),
icon: const Icon(
Icons.remove,
),
padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 18.0),
color: Theme.of(context).primaryColor,
),
onLongPressStart: (_) async {
startPressing(() => decrement(10));
},
onLongPressCancel: () {
cancelPress();
},
onLongPressEnd: (_) {
cancelPress();
},
),
Flutter使用GestureDetector
来处理长按事件,使用IconButton
来处理点击事件是否可行?我在某些特定的Android版本上会遇到问题吗?
onPressed
时,它也会触发onLongPressEnd
,请尝试添加print()
来查看发生了什么。 - cahyo