增加 GestureDetector 区域的最佳方法答案

【问题标题】：Best way to increase GestureDetector area增加 GestureDetector 区域的最佳方法
【发布时间】：2020-09-05 06:04:24
【问题描述】：

增加 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 区域非常小，打开对话框非常困难。所以我需要的是增加这个检测区域。

【问题讨论】：

您好，您能多描述一些或显示一些代码吗？事实上，你几乎可以用手势检测器包裹每一种元素
@MarcelDz 当然，完成！

标签： flutter flutter-layout flutter-widget

【解决方案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'),
)]),
      ));



  }
}

【讨论】：