flutter - 颤动悬停式触摸处理 - 无需抬起手指即可检测来自不同小部件的触摸
问题描述
假设我Container
在屏幕上有 3 秒,通过改变颜色来对触摸做出反应。当用户的手指放在它们上时,它们应该会改变颜色,当触摸结束时它们应该恢复正常。我想要的是这些容器在用户手指/指针在它们上时做出反应,即使触摸开始于容器外部屏幕上的随机区域。所以基本上我正在寻找的东西就像 css hover 一样。
如果我分别包装每个容器GestureDetector
,它们将不会对在它们之外开始的触摸事件做出反应。在另一个问题上(不幸的是我现在没有链接)建议用一个包装所有容器GestureDetector
并为每个容器分配一个GlobalKey
以使它们彼此不同。
这是检测触摸手势的板:
class MyBoard extends StatefulWidget {
static final keys = List<GlobalKey>.generate(3, (ndx) => GlobalKey());
...
}
class _MyBoardState extends State<MyBoard> {
...
/// I control the number of buttons by the number of keys,
/// since all the buttons should have a key
List<Widget> makeButtons() {
return MyBoard.keys.map((key) {
// preapre some funcitonality here
var someFunctionality;
return MyButton(key, someFunctionality);
}).toList();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (tapDownDetails) {
handleTouch(context, tapDownDetails.globalPosition);
},
onTapUp: (tapUpDetails) {
finishTouch(context);
},
onPanUpdate: (dragUpdateDetails) {
handleTouch(context, dragUpdateDetails.globalPosition);
},
onPanEnd: (panEndDetails) {
finishTouch(context);
},
onPanCancel: () {
finishTouch(context);
},
child: Container(
color: Colors.green,
width: 300.0,
height: 600.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: makeButtons(),
),
),
);
}
这是简单的MyButton
:
class MyButton extends StatelessWidget {
final GlobalKey key;
final Function someFunctionality;
MyButton(this.key, this.someFunctionality) : super(key: key);
@override
Widget build(BuildContext context) {
return Consumer<KeyState>(
builder: (buildContext, keyState, child) {
return Container(
width: 100.0,
height: 40.0,
color: keyState.touchedKey == this.key ? Colors.red : Colors.white,
);
},
);
}
}
这_MyBoardState
就是我处理检测MyButton
触摸的方式:
MyButton getTouchingButton(Offset globalPosition) {
MyButton currentButton;
// result is outside of [isTouchingMyButtonKey] for performance
final result = BoxHitTestResult();
bool isTouchingButtonKey(GlobalKey key) {
RenderBox renderBox = key.currentContext.findRenderObject();
Offset offset = renderBox.globalToLocal(globalPosition);
return renderBox.hitTest(result, position: offset);
}
var key = MyBoard.keys.firstWhere(isTouchingButtonKey, orElse: () => null);
if (key != null) currentButton = key.currentWidget;
return currentButton;
}
我正在使用提供程序包,而不是重建整体MyBoard
,setState
只重建相关的相关部分MyButton
。仍然每个按钮都有一个监听器,它在每次更新时重建,我正在使用GlobalKey
. 在颤振文档上它说:
全局密钥相对昂贵。如果您不需要上面列出的任何功能,请考虑改用 Key、ValueKey、ObjectKey 或 UniqueKey。
但是,如果我们查看getTouchingButton
方法,我需要GlobalKey
获取renderBox
object 并获取currentWidget
. 我还必须为每个GlobalKey
. 此计算在onPanUpdate
触发时重复,这意味着当用户的手指移动一个像素时。
UI 更新速度不够快。只需轻按一下(以常规速度轻按和轻按),您通常看不到MyButton
s 上的任何变化。
如果我需要总结我的问题,当手指以更有效和优雅的方式悬停在不同小部件上时,我如何检测到来自不同小部件的相同单次触摸(不抬起)?
解决方案
由于还没有人回答,我正在分享我自己最近想出的解决方案。现在我可以看到每次触摸时的视觉反应。它足够快,但仍然感觉 UI 上有一点延迟,感觉有点 hacky 而不是具体的解决方案。如果有人可以提供更好的解决方案,我可以将其标记为接受的答案。
我的解决方案:
首先要做的事;因为我们必须检测平移手势并且我们正在使用onPanUpdate
and onPanEnd
,所以我可以擦除onTapDown
andonTapUp
而只是使用onPanStart
. 这也可以检测到不动的简单点击触摸。
我也不再使用Provider
andConsumer
了,因为它会Consumer
在每次更新时重建所有 s。当 s 的数量增加时,这确实是一个大问题MyButton
。我没有保持MyButton
简单和虚拟,而是将触摸处理工作移入其中。每个人都MyButton
保存着他们此刻是否被触摸的数据。
更新按钮是这样的:
class NewButton extends StatefulWidget {
NewButton(Key key) : super(key: key);
@override
NewButtonState createState() => NewButtonState();
}
class NewButtonState extends State<NewButton> {
bool isCurrentlyTouching = false;
void handleTouch(bool isTouching) {
setState(() {
isCurrentlyTouching = isTouching;
});
// some other functionality on touch
}
@override
Widget build(BuildContext context) {
return Container(
width: 100.0,
height: 40.0,
color: isTouched ? Colors.red : Colors.white,
);
}
}
请注意,这NewButtonState
不是私有的。我们将使用globalKey.currentState.handleTouch(bool)
我们检测到触摸手势的地方。
推荐阅读
- django - Sorl-thumbnail--> 图像高度不等于给定高度
- javascript - 你如何将事件传递给 setTimeout
- linux - Bash:从CSV循环读取N行
- flutter - 使用 Dismissible 小部件时,有没有办法在对话框中显示正在关闭的项目?
- python - 从 Pandas 中的列生成对
- javascript - Quill - 提及未在 Quill JS 编辑器内容中插入提及值(使用 React Quill)
- c++ - 如何将函数作为参数传递给 transform() 函数?
- django - 在 Django 应用程序中使用 HAProxy 和 uWSGI 执行第 7 层健康检查
- r - 在具有多个逻辑条件的 r 中使用 unique
- python - 使用 socket.recv 检查传入的数据类型