Flutter Web - 水平SingleChildScrollView无法使用鼠标点击和拖动滚动

Question

我希望通过点击和拖动来滚动行中的项目。但当我尝试通过点击和拖动来滚动时，它没有任何反应。

Container(
            height: 300,
        width: double.infinity,
        color: Colors.green,
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: List.generate(
                
                   services.length, (index) => GalleryCard(index: index)),
          ),
        ),
          )

这是图库卡片类：

class GalleryCard extends StatefulWidget {
  const GalleryCard({
    Key? key,
    required this.index,
  }) : super(key: key);

  final int index;

  @override
  _GalleryCardState createState() => _GalleryCardState();
}

class _GalleryCardState extends State<GalleryCard> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(
          height: 300,
          width: 340,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10.0),
            child: Image.asset(
              recentWorks[widget.index].image,
              fit: BoxFit.fill,
            ),
          ),
        ),
      ],
    );
  }
}

- Dipesh Tripathi

---

请问您能分享一下 GalleryCard 的代码吗？ - Ahmad Raza

添加了 Gallerycard 代码。 - Dipesh Tripathi

我没有做任何修改就复制了你的代码，它可以正常工作。 - Ahmad Raza

它在移动端可以工作但在网页上不能工作。 - Dipesh Tripathi

Answer 1

这是一个关于 doc 的我成功实践的例子：

在 main.dart 中，我添加了这个类：

    class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    PointerDeviceKind.stylus,
    PointerDeviceKind.unknown,
  };
}

那么在“MaterialApp”内部添加这个

scrollBehavior: MyCustomScrollBehavior(),

- alireza alizade

Answer 2

通过使用以下内容，您可以通过单击和拖动来滚动，甚至可以使用鼠标滚轮进行滚动

使用此自定义类

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class CustomScrollbarWithSingleChildScrollView extends StatelessWidget {
  final ScrollController controller;
  final Widget child;
  final Axis scrollDirection;

  const CustomScrollbarWithSingleChildScrollView(
      {required this.controller,
      required this.child,
      required this.scrollDirection,
      Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScrollConfiguration(
      behavior: MyCustomScrollBehavior(),
      child: Scrollbar(
        controller: controller,
        child: SingleChildScrollView(
          controller: controller,
          scrollDirection: scrollDirection,
          child: child,
        ),
      ),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
        PointerDeviceKind.stylus,
        PointerDeviceKind.unknown,
      };
}

使用上述小部件类的方法

CustomScrollbarWithSingleChildScrollView(
            controller: con,
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: List.generate(
                  services.length, (index) => GalleryCard(index: index)),
            ),
          ),

- shanmkha

Answer 3

初始化一个 TabController：

 ScrollController con = ScrollController();

Container(
        height: 300,
        width: double.infinity,
        color: Colors.green,
        child: Scrollbar(
               scrollbarOrientation: ScrollbarOrientation.top,
               controller:con,
               child:SingleChildScrollView(
                     controller : con,
                     scrollDirection: Axis.horizontal,
                     child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: List.generate(
                                  services.length, (index) => GalleryCard(index: index),
                            ),
                          ),
                        ),
                      ),
                    ),

运行得非常顺畅。

- hamza aboshhiwa

---

这需要用户在滚动条上点击并拖动，而不是通过拖动项目来滚动。 - Shawn Ashton

你可以使用InkWell小部件来实现你想要的效果，检查这个包并复制粘贴InkWell的代码，链接，然后用你自己的滚动控制器替换动画控制器，并对其进行任何操作。 - hamza aboshhiwa