flutter web -水平singlehildscrollview不能用鼠标单击和拖动滚动

mnemlml8  于 2022-12-19  发布在  Flutter
关注(0)|答案(2)|浏览(171)

我想通过单击和拖动滚动行中的项目。当我尝试通过单击和拖动滚动时,它什么也不做..................................................................................................... .......

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

oxiaedzo1#

通过使用下面的你可以滚动点击和拖动它,甚至滚动鼠标滚轮
使用此自定义类

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

wlwcrazw2#

初始化选项卡控制器:

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

工作起来很有魅力。

相关问题