增加GestureDetector面积的最佳方法

Question

增加GestureDetector面积的最佳方法是什么？

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

我有此行的卡片：

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'),
)]),
      ));



  }
}