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



  }
}

增加 GestureDetector 区域的最佳方法

Best way to increase GestureDetector area

flutter

flutter-layout

flutter-widget