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

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(),

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)),
            ),
          ),

Answer 3

就我而言，它在网络版本中运行得很好，因为我希望垂直和水平滚动，谢谢。

Answer 4

初始化一个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),
                            ),
                          ),
                        ),
                      ),
                    ),

工作有魅力。