Flutter垂直滑动并避免滚动Listview

Question

在颤振中我有一个挑战，我想有一个简单的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 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')),
          ],
        ],
      ),
    );
  }
}