如何在 Flutter Web 中使用 dots_indicator？

Question

我在 Flutter 中使用 dots_indicator 2.0.0，它非常适合 IOS 和 Android。但是，我在网络上进行测试，但它不起作用（它不允许用鼠标从一侧滚动到另一侧，并且不显示任何错误消息）。

我的dots_indicator相关的有状态代码如下...

初始化状态...

  @override
  void initState() {
    _pageController.addListener(() {
      if (_pageController.page!.round() != currentIndex) {
        currentIndex = _pageController.page;
        print('Current Index: $currentIndex');
        setState(() {});
      }
    });
    super.initState();
  }

构建页面...

  Widget _crearPages(BuildContext context) {
    List<Widget> _pages = [];
    _pages.add(Page1());
    _pages.add(Page2());
    _pages.add(Page3());
    _pages.add(Page4());

    
    return Stack(
      children: [
        PageView(
                children: _pages,
                controller: _pageController,
                onPageChanged: (int page) {
                  currentIndex = _pageController.page;
                },
              ),
        _dotsIndicator(context, _pages.length),
      ],
    );
  }

点指示器...

    Widget _dotsIndicator(BuildContext context, int dotsCount) {
    final _size = MediaQuery.of(context).size;
      return Positioned(
          bottom: 11.0,
          width: 200.0,
          left: (_size.width-200.0)/2,
          child: DotsIndicator(
            dotsCount: dotsCount,
            position: currentIndex!,
            decorator: DotsDecorator(
              activeColor: (dotsCount == 1) ? Colors.transparent : Theme.of(context).primaryColor,
            ),
          ),
        );
  }

dots_indicator 真的兼容 Flutter Web 吗？

如何使 dots_indicator 在网络上工作？

Answer 1

你需要像这样创建自定义滚动行为类

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

并将scrollBehavior 属性添加到MaterialApp 小部件

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(), // <- this one
      home: HomePage(), // your widget 
    );
  }
}

也读过这个https://docs.flutter.dev/release/breaking-changes/default-scroll-behavior-drag