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



  }
}