Flutter自定义滚动条插件detached_scrollbar的使用

Flutter自定义滚动条插件detached_scrollbar的使用

安装 💻

为了开始使用Detached Scrollbar，您必须在机器上安装Flutter SDK。

通过以下命令添加插件：

dart pub add detached_scrollbar

持续集成 🤖

Detached Scrollbar 配备了一个由 Very Good Workflows 支持的 GitHub Actions 工作流。您也可以添加您喜欢的 CI/CD 解决方案。默认情况下，每次拉取请求和推送时，CI 会格式化、检查代码并运行测试。这确保了代码的一致性和正确性。项目使用 Very Good Analysis 进行严格的分析选项设置。代码覆盖率使用 Very Good Workflows 进行强制执行。

运行测试 🧪

对于新用户，安装 very_good_cli：

dart pub global activate very_good_cli

运行所有单元测试：

very_good test --coverage

生成覆盖率报告：

genhtml coverage/lcov.info -o coverage/

打开覆盖率报告：

open coverage/index.html

发布步骤

1. 更新 pubspec.yaml 中的版本。
2. 运行 dart pub publish。

使用示例

以下是一个简单的示例，展示了如何使用 detached_scrollbar 插件来创建一个带有自定义滚动条的应用程序。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const TestView();
  }
}

class TestView extends StatefulWidget {
  const TestView({super.key});

  [@override](/user/override)
  State<TestView> createState() => _TestViewState();
}

class _TestViewState extends State<TestView> {
  final ScrollController _horizontalController = ScrollController();
  final ScrollController _verticalController = ScrollController();

  [@override](/user/override)
  void dispose() {
    _horizontalController.dispose();
    _verticalController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final tableHeight = MediaQuery.of(context).size.height * 0.8;
    final tableWidth = MediaQuery.of(context).size.width * 0.8;
    final xTrackLength = MediaQuery.of(context).size.width * 0.5;
    final yTrackLength = MediaQuery.of(context).size.height * 0.5;

    // 表格内容
    final table = ScrollConfiguration(
      behavior: const ScrollBehavior().copyWith(scrollbars: false),
      child: SingleChildScrollView(
        controller: _verticalController,
        child: SingleChildScrollView(
          controller: _horizontalController,
          scrollDirection: Axis.horizontal,
          child: DataTable(
            columns: List.generate(
              20,
              (index) => DataColumn(label: Text('Header $index')),
            ),
            rows: List.generate(
              100,
              (index) => DataRow(
                cells: List.generate(
                  20,
                  (cellIndex) => DataCell(Text('Row $index Cell $cellIndex')),
                ),
              ),
            ),
          ),
        ),
      ),
    );

    // 自定义水平滚动条
    final horizontalScrollbar = DetachedScrollBar(
      scrollController: _horizontalController,
      trackLength: xTrackLength,
    );

    // 自定义垂直滚动条
    final verticalScrollbar = DetachedScrollBar(
      scrollController: _verticalController,
      trackLength: yTrackLength,
      isHorizontal: false,
    );

    return Scaffold(
      appBar: AppBar(title: const Text('自定义Detached滚动条')),
      body: Container(
        padding: const EdgeInsets.all(16),
        child: Center(
          child: Stack(
            children: [
              SizedBox(
                height: tableHeight,
                width: tableWidth,
                child: table,
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: horizontalScrollbar,
              ),
              // 如果禁用此，则水平滚动条将缩小
              Align(
                alignment: Alignment.topRight,
                child: verticalScrollbar,
              ),
            ],
          ),
        ),
      ),
    );
  }
}