本文介绍了在 Flutter 中触摸空白区域时如何使 GestureDetector 也能正常工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在 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 也能正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

06-05 13:35