onVerticalDragUpdate and onPanUpdate of GestureDetector does not get called with a ListView as child of GestureDetector Flutter

huangapple go评论71阅读模式
英文:

onVerticalDragUpdate and onPanUpdate of GestureDetector does not get called with a ListView as child of GestureDetector Flutter

问题

我想开发一个应用,其中我使用一个包含两个屏幕的TabBar。在第一个屏幕上,我有一个ListView。我希望当ListView向下滚动时,TabBar被隐藏,当ListView向上滚动时再次显示出来。我使用GestureDetector作为ListView的父级来检测用户向上和/或向下滚动。通过在线搜索,我发现使用onVerticalDragUpdateonPanUpdate可以检测垂直滚动的方向。但现在的问题是这些方法没有被调用!GestureDetector的其他方法,如onTap,都被调用了。我认为原因是ListView吸收了垂直滚动事件。那么有什么解决办法呢?非常感谢您的帮助!

注意: 使用SliverAppBar不符合我的要求。

这是我的代码:

SafeArea(
  child: Stack(
    children: [
      TabBarView(
        controller: _controller,
        children: [
          GestureDetector(
            onTap: () {
              print('onTap called!');
            },
            onVerticalDragUpdate: (updates) {
              print('onVerticalDragUpdate is called!');
            },
            onPanUpdate: (update) {
              print('onPanUpdate is called!');
            },
            child: ListView.builder(
              itemCount: 20,
              itemBuilder: (ctx, index) => Card(
                child: ListTile(
                  title: Text('Hi there! $index'),
                ),
              ),
            ),
          ),
          Container(color: Colors.purpleAccent),
        ],
      ),
      Align(
        alignment: Alignment.topCenter,
        child: TabBar(
          controller: _controller,
          labelColor: Colors.black,
          indicator: UnderlineTabIndicator(
            borderRadius: BorderRadius.circular(8),
            borderSide: const BorderSide(
              color: Colors.black,
              width: 2,
            ),
            insets: const EdgeInsets.symmetric(horizontal: -8),
          ),
          indicatorSize: TabBarIndicatorSize.label,
          isScrollable: true,
          tabs: const [
            Tab(
              text: 'Social',
              height: 36,
            ),
            Tab(
              icon: Text('Videos'),
              height: 36,
            ),
          ],
        ),
      ),
    ],
  ),
)

以下是输出:

onVerticalDragUpdate and onPanUpdate of GestureDetector does not get called with a ListView as child of GestureDetector Flutter

英文:

I want to develop an app where I use a TabBar that consists of two screens. In the first screen, I have a ListView. I want the TabBar to be hidden when the ListView is scrolled down, and to be shown back when the ListView is scrolled up. I used GestureDetector as the parent of ListView to detect that the user scrolled up and/or down. By searching online, I found that using onVerticalDragUpdate and onPanUpdate can detect up and down vertical scroll. But now the problem is that these methods are not called! Other methods of GestureDetector such as onTap are called. I think the reason is that the ListView absorbs the vertical scroll. So what is the solution for this? Your help is strongly appreciated!!

Note: Using SliverAppBar does not match my requirements well.

Here is my code:

SafeArea(
        child: Stack(
          children: [
            TabBarView(
              controller: _controller,
              children: [
                GestureDetector(
                  onTap: () {
                    print('onTap called!');
                  },
                  onVerticalDragUpdate: (updates) {
                    print('onVerticalDragUpdate is called!');
                  },
                  onPanUpdate: (update) {
                    print('onPanUpdate is called!');
                  },
                  child: ListView.builder(
                    itemCount: 20,
                    itemBuilder: (ctx, index) => Card(
                      child: ListTile(
                        title: Text('Hi there! $index'),
                      ),
                    ),
                  ),
                ),
                Container(color: Colors.purpleAccent),
              ],
            ),
            Align(
              alignment: Alignment.topCenter,
              child: TabBar(
                controller: _controller,
                labelColor: Colors.black,
                indicator: UnderlineTabIndicator(
                  borderRadius: BorderRadius.circular(8),
                  borderSide: const BorderSide(
                    color: Colors.black,
                    width: 2,
                  ),
                  insets: const EdgeInsets.symmetric(horizontal: -8),
                ),
                indicatorSize: TabBarIndicatorSize.label,
                isScrollable: true,
                tabs: const [
                  Tab(
                    text: 'Social',
                    height: 36,
                  ),
                  Tab(
                    icon: Text('Videos'),
                    height: 36,
                  ),
                ],
              ),
            ),
          ],
        ),
      )

And here is the output:

onVerticalDragUpdate and onPanUpdate of GestureDetector does not get called with a ListView as child of GestureDetector Flutter

答案1

得分: 2

尝试这个

NotificationListener<ScrollNotification>(
   onNotification: (scrollNotification) {
       if (scrollNotification is UserScrollNotification) {
           ....
       }
       
       return false;
   },
   child: ... }

或者选择另一种类型的ScrollNotification,如果UserScrollNotification 不适合你。

英文:

try this

NotificationListener<ScrollNotification>(
   onNotification: (scrollNotification) {
       if (scrollNotification is UserScrollNotification) {
           ....
       }
       
       return false;
   },
   child: ... }

or choose another type of ScrollNotification if UserScrollNotification doesn't fit to you

huangapple
  • 本文由 发表于 2023年3月9日 16:27:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/75682037.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定