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