增加手势检测器区域的最佳方法

Question

增加手势检测器区域的最佳方法是什么？

我想避免使用具有自定义宽度和高度的容器

我有一张带有此行的卡片：

child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new IconButton(
icon: new Icon(
Icons.remove,
color: Colors.white,
),
onPressed: () => { _decreaseCounter() },
),
GestureDetector(
child: Text(
_counter.toString(),
style: new TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
onTap: () => _openDialog(),
),
new IconButton(
icon: new Icon(
Icons.add,
color: Colors.white,
),
onPressed: () => { _increaseCounter()},
)

当我点击文本时，它应该会打开一个对话框，但是GesutreDetector区域非常小，很难打开对话框。所以我需要的是增加这个检测区域。

Answer 1

好了，这是一个完整的工作演示供您实现。如您所见，我们在下面的示例中打印了以下区域。我用另一GestureDetector用hittestbehaviour.transcluent包裹了整行.这意味着它会侦听后面的元素，并且仍然识别事件。这就是为什么我们也不再需要文本GestureDetector。如果单击"添加"或删除"，请单击"作为事件进行跟踪"，如果单击"下一个"、"相邻"或行内的任何其他点，则可以对其执行功能。

import 'package:flutter/material.dart';
main() {
runApp(MaterialApp(home: TestPage()));
}
class TestPage extends StatefulWidget {
//static const routeName = '/';
@override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => print('COUNTER'),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new IconButton(
icon: new Icon(
Icons.remove,
color: Colors.white,
),
onPressed: () => print('REMOVE'),
),
GestureDetector(
child: Text(
'counter',
style: new TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
//onTap: () => 
),
new IconButton(
icon: new Icon(
Icons.add,
color: Colors.white,
),
onPressed: () => print('ADD'),
)]),
));

}
}