Flutter垂直滑动并避免滚动Listview

Question

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

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

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

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

Answer 1

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

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

这是我的例子：

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')),
          ],
        ],
      ),
    );
  }
}