Flutter平滑滚动功能插件smooth_scroll_multiplatform的使用

smooth_scroll_multiplatform 是一个基于 dyn_mouse_scroll 包改进而来的插件，旨在为所有平台（包括移动设备、桌面和Web）提供平滑滚动体验。它修复了原版包在触控板、鼠标/触控板切换以及动画方面的问题，并优化了滚动方向改变时的“滑溜”效果。

特性

• 根据用户的滚动速度进行平滑滚动动画。
• 自动检测并更新不正确的 ScrollPhysics 设置。
• 调整滚动事件的持续时间。
• 选择所需的移动端物理特性。

基本用法

简单示例

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

void main() {
  runApp(const BasicUsageApp());
}

class BasicUsageApp extends StatelessWidget {
  const BasicUsageApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: DynMouseScroll(
          builder: (context, controller, physics) => ListView(
            controller: controller,
            physics: physics,
            children: List.generate(
              40,
              (index) => Container(
                height: 500,
                color: (index % 2 == 0) ? Colors.redAccent : Colors.blueAccent,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

带额外设置的示例

class CustomSettingsUsageApp extends StatelessWidget {
  const CustomSettingsUsageApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: DynMouseScroll(
          durationMS: 500,
          scrollSpeed: 4.4,
          animationCurve: Curves.easeOutQuart,
          builder: (context, controller, physics) => ListView(
            controller: controller,
            physics: physics,
            children: List.generate(
              40,
              (index) => Container(
                height: 500,
                color: (index % 2 == 0) ? Colors.redAccent : Colors.blueAccent,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

解决方案

Flutter 默认不支持指针事件的平滑滚动，导致用户体验不佳。smooth_scroll_multiplatform 插件通过以下方式解决这个问题：

• 检测用户平台并在必要时自动更新。
• 使用默认的移动端物理特性，并在鼠标滚轮滚动时切换到桌面端物理特性。
• 在最后一次滚动动画结束后切换回移动端物理特性。

复杂示例

以下是一个更复杂的示例，展示了如何在多个滚动区域之间链接滚动行为：

class LinkedPhysicsApp extends StatelessWidget {
  const LinkedPhysicsApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              Expanded(
                child: Row(
                  children: const [
                    MyScrollingWidget(height: 100, colors: [Colors.blue, Colors.red]),
                    MyScrollingWidget(height: 200, colors: [Colors.yellow, Colors.green]),
                  ],
                ),
              ),
              Expanded(
                child: Row(
                  children: const [
                    MyScrollingWidget(height: 150, colors: [Colors.purple, Colors.orange]),
                    MyScrollingWidget(height: 80, colors: [Colors.black, Colors.white]),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyScrollingWidget extends StatelessWidget {
  final List<Color> colors;
  final double height;

  const MyScrollingWidget({
    Key? key,
    required this.colors,
    required this.height,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: DynMouseScroll(
        hasParentListener: true,
        builder: (context, controller, physics) => ListView(
          controller: controller,
          physics: physics,
          children: List.generate(
            50,
            (index) => Container(
              width: MediaQuery.of(context).size.width / 2,
              height: height,
              color: (index % 2 == 0) ? colors[0] : colors[1],
            ),
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何使用 DynMouseScroll 包装器来实现多个滚动区域之间的联动滚动效果。希望这些示例能帮助你更好地理解和使用 smooth_scroll_multiplatform 插件。