英文:
onVerticalDragUpdate and onPanUpdate of GestureDetector does not get called with a ListView as child of GestureDetector Flutter
问题
我想开发一个应用,其中我使用一个包含两个屏幕的TabBar
。在第一个屏幕上,我有一个ListView
。我希望当ListView
向下滚动时,TabBar
被隐藏,当ListView
向上滚动时再次显示出来。我使用GestureDetector
作为ListView
的父级来检测用户向上和/或向下滚动。通过在线搜索,我发现使用onVerticalDragUpdate
和onPanUpdate
可以检测垂直滚动的方向。但现在的问题是这些方法没有被调用!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,
),
],
),
),
],
),
)
以下是输出:
英文:
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:
答案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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论