Question

我在Text中有2个GestureDetector小部件。 onTap回调仅在我触摸Text时通知，而不是在Container内的空白处通知。如何像按下按钮一样发出通知？

+------------------------------------------------+
| Very very very long long ◎ng long text view   |
| Short ◎xt                   ⦿                |
+------------------------------------------------+

◎：打印Tapped。
⦿：什么都没发生。

我的源代码：

ListView.separated(
  itemCount: _listModel.length,
  padding: EdgeInsets.only(left: NOTIFICATION_LEFT_SPACE),
  separatorBuilder: (context, index) => Divider(),
  itemBuilder: (BuildContext context, int index) => GestureDetector(
    child: Container(
      child: Hero(
        tag: _listModel[index].title,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Very very very long long long long text view'),
            SizedBox(height: 10),
            Text('Short text')
          ],
        ),
      ),
    ),
    onTap: () {
      print('Tapped');
    },
  ),
)

Answer 1

您可以使用behavior: HitTestBehavior.opaque小部件的GestureDetector属性，即使Container小部件没有任何子级，也可以帮助点击Container内部的占位符。

GestureDetector(
                behavior: HitTestBehavior.opaque,
                child: Container(
                  child: Hero(
                    tag: 'test',
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text('Very very very long long long long text view'),
                        SizedBox(height: 10),
                        Text('Short text')
                      ],
                    ),
                  ),
                ),
                onTap: () {
                  print('Tapped');
                },
              ),

Answer 2

我找到了解决方法。为由 GestureDetector 包裹的容器提供一个盒子装饰，并在盒子装饰中提供一种颜色：Colors.transparent。这将用透明背景替换容器的空白，因此 UI 保持不变，并且 onTap 也将在单击空白时起作用。查看示例代码片段。

master

触摸Flutter中的空白区域时，如何使GestureDetector也起作用

2 个答案: