Flutter桌面滚动条插件 desktop_scrollbar 的使用

desktop_scrollbar 是一个专为桌面和Web应用设计的Flutter滚动条插件，它实现了正确的轨道点击跳转行为。与默认的Flutter滚动条不同，当用户点击轨道时，滚动条会直接跳到点击位置，而不是仅移动一小段距离。

功能特性

• 正确实现轨道点击后滚动条跳转的行为。
• 使用与Flutter内置的 RawScrollbar 相同的代码，因此API保持一致。

安装步骤

要安装此插件，请在您的项目中执行以下命令：

flutter pub add desktop_scrollbar

或者手动将 desktop_scrollbar 添加到 pubspec.yaml 文件中的依赖项部分：

dependencies:
  desktop_scrollbar:

然后，在源码中导入库：

import 'package:desktop_scrollbar/desktop_scrollbar.dart';

使用方法

为了使用桌面滚动条，您需要将可滚动的小部件（如 ListView）包裹在 DesktopScrollbar 中，并将同一个 ScrollController 实例传递给两者。

示例代码

下面是一个完整的示例演示如何使用 DesktopScrollbar 包装 ListView.builder 小部件，并配置一些自定义选项，比如滚动条轨道的颜色、可见性以及厚度等。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.dark,
      home: MyHomePage(title: "Test"),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title}) : scrollController = ScrollController();

  final String title;
  final ScrollController scrollController;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: DesktopScrollbar(
        controller: widget.scrollController,
        trackVisibility: true,
        thumbVisibility: true,
        thickness: 10,
        trackColor: Colors.black,
        child: ScrollConfiguration(
          behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
          child: ListView.builder(
            controller: widget.scrollController,
            addAutomaticKeepAlives: false,
            addRepaintBoundaries: false,
            addSemanticIndexes: false,
            itemCount: 100,
            itemExtent: 35,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text("Row: ${index + 1}"),
              );
            },
          ),
        ),
      ),
    );
  }
}