颤动垂直滑动并避免滚动列表视图

Question

在 flutter 中，我有一个挑战，我想要一个简单的 Listview，其中包含一些项目，每个项目的底部都有图像和文本，你假设我们有 Instagram 卡片，

正如我们所知，当我们有一个垂直的 ListView 时，我们可以滚动顶部或底部，滚动列表视图可以发生在列表视图的每个项目上。

现在我想在这个列表视图的每个项目上滑动顶部，就像滚动顶部一样，而不是将列表视图滚动到顶部我想在这个项目上显示另一个小部件

我的问题 是如何避免在将图像刷入卡片时滚动列表视图

Answer 1

您可以使用 GestureDetector 包装您的图像小部件，并使用方法在用户点击图像小部件时禁用滚动行为。

我发现使用此方法的一个方便行为是，用户仍然可以根据需要向上或向下滚动（点击并立即滑动，而不是点击然后滑动）。这可能不是最好的方法，因为我不能只阻止向上滚动行为。

这是我的例子：

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 swip up action.
                if (details.delta.dy < 0) {
                  print('Swipping up the element $i');
                }
                // Catch the swip down action.
                if (details.delta.dy > 0) {
                  print('Swipping 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')),
          ],
        ],
      ),
    );
  }
}

颤动垂直滑动并避免滚动列表视图

Flutter vertical swipe and avoiding scrolling Listview

listview

dart

flutter