[英]Flutter vertical swipe and avoiding scrolling Listview
In flutter i have a challenge that i want to have a simple Listview
with some items which each item have a image and text on bottom of that, you suppose we have Instagram
card,在颤振中我有一个挑战,我想有一个简单的
Listview
,其中包含一些项目,每个项目的底部都有一个图像和文本,你假设我们有Instagram
卡,
as we know, when we have a vertical ListView
we can scroll that top or bottom, scrolling the listview can be happen on each item of the listview.正如我们所知,当我们有一个垂直的
ListView
时,我们可以滚动顶部或底部,滚动列表视图可以发生在列表视图的每个项目上。
now on each item of this listview i want to swipe top like with scrolling top, instead of scrolling the listview to top i want to show another widget on this item现在在这个列表视图的每个项目上,我想像滚动顶部一样滑动顶部,而不是将列表视图滚动到顶部我想在这个项目上显示另一个小部件
my question is how can i avoid scrolling the listview during we swipe on image into card我的问题是如何在我们将图像刷入卡片时避免滚动列表视图
You can wrap your image widget with GestureDetector
and use this method to disable the scroll behavior when users tap down on the image widget.您可以使用
GestureDetector
包装图像小部件,并使用此方法在用户点击图像小部件时禁用滚动行为。
A convenient behavior I found with this method is users can still scroll up or down if they want to (tap down and swipe IMMEDIATELY instead of tap down THEN swipe).我发现使用此方法的一个方便行为是用户仍然可以根据需要向上或向下滚动(点击并立即滑动而不是点击向下然后滑动)。 This may not be the best way because I can't only block the scroll-up behavior.
这可能不是最好的方法,因为我不能只阻止向上滚动行为。
This is my example:这是我的例子:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({
Key? key,
required this.title,
}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ScrollPhysics physics = const AlwaysScrollableScrollPhysics();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
// Add the scroll physics controller here
physics: physics,
children: [
for (int i = 0; i < 20; i++) ...[
// Wrap the Widget with GestureDetector
GestureDetector(
// Disable the scroll behavior when users tap down
onTapDown: (_) {
setState(() {
physics = const NeverScrollableScrollPhysics();
});
},
// Enable the scroll behavior when user leave
onTapCancel: () {
setState(() {
physics = const AlwaysScrollableScrollPhysics();
});
},
onPanUpdate: (details) {
// Catch the swipe up action.
if (details.delta.dy < 0) {
print('Swiping up the element $i');
}
// Catch the swipe down action.
if (details.delta.dy > 0) {
print('Swiping down the element $i');
}
},
// Your image widget here
child: Padding(
padding: const EdgeInsets.all(20),
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
),
Center(child: Text('Element $i')),
],
],
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.