在 Flutter 中触摸空白区域时如何使 GestureDetector 也能正常工作 [英] How to make GestureDetector also work when touch empty space in Flutter

问题描述

我在 GestureDetector 中有 2 个 Text 小部件.onTap 回调仅在我触摸 Text 时通知，而不是在我的 Container 内的空白处.如何让这个通知就像我触摸按钮一样?

I have 2 Text widget inside an GestureDetector. The onTap callback only notify when I touch on the Text but not the empty space inside my Container. How to make this notify like I touch on a button?

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

推荐答案

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

You can use behavior: HitTestBehavior.opaque property of GestureDetector widget, that helps to tap on the placeholder inside Container even if Container widget doesn't have any child.

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

这篇关于在 Flutter 中触摸空白区域时如何使 GestureDetector 也能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！