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

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

介绍

ScrollbarUltima 是一个强大的Flutter包，允许你创建高度可定制的滚动条。通过这个插件，你可以轻松地为你的应用添加美观且功能丰富的滚动条。

示例代码

默认示例

以下是一个简单的默认示例，展示了如何使用 ScrollbarUltima 创建一个基本的滚动条。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultExample(),
    );
  }
}

class DefaultExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text("默认示例")),
      ),
      body: SafeArea(
        child: ScrollbarUltima(
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: _buildItem,
          ),
        ),
      ),
    );
  }

  Widget _buildItem(BuildContext context, int index) {
    return ListTile(
      title: Text("第 $index 项的标题"),
      subtitle: Text("第 $index 项的副标题"),
      trailing: const Text("^_^"),
    );
  }
}

半圆滚动条示例

此示例展示了如何使用 ScrollbarUltima.semicircle 创建一个半圆形滚动条，并预计算项目索引以显示在标签中。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SemicircleExample(),
    );
  }
}

class SemicircleExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text("半圆示例")),
      ),
      body: SafeArea(
        child: ScrollbarUltima.semicircle(
          labelContentBuilder: (offset, index) => Padding(
            padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
            child: Text(
              index.toString(),
              style: const TextStyle(color: Colors.grey),
            ),
          ),
          precalculateItemByOffset: true,
          prototypeItem: _buildItem(context, 0),
          child: ListView.builder(
            itemCount: 100,
            itemBuilder: _buildItem,
          ),
        ),
      ),
    );
  }

  Widget _buildItem(BuildContext context, int index) {
    return ListTile(
      title: Text("第 $index 项的标题"),
      subtitle: Text("第 $index 项的副标题"),
      trailing: const Text("^_^"),
    );
  }
}

自定义示例

此示例展示了如何高度自定义 ScrollbarUltima 的外观和行为，包括固定滚动模式、标签显示行为等。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CustomizedExample(),
    );
  }
}

class CustomizedExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: ScrollbarUltima.semicircle(
        backgroundColor: Theme.of(context).colorScheme.surfaceContainerHighest,
        arrowsColor: Theme.of(context).colorScheme.onSurface,
        labelBehaviour: LabelBehaviour.showOnlyWhileAndAfterDragging,
        labelContentBuilder: (offset, index) => Padding(
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
          child: Text(index.toString()),
        ),
        isFixedScroll: true,
        precalculateItemByOffset: true,
        alwaysShowThumb: false,
        prototypeItem: _buildItem(context, 0),
        hideThumbWhenOutOfOffset: true,
        minScrollOffset: 200 - 70,
        itemPrecalculationOffset: 200 - 70,
        scrollbarPadding: EdgeInsets.only(
          top: MediaQuery.of(context).viewPadding.vertical + 70,
        ),
        child: CustomScrollView(
          slivers: [
            const SliverAppBar(
              forceElevated: true,
              pinned: true,
              expandedHeight: 200,
              collapsedHeight: 70,
              flexibleSpace: FlexibleSpaceBar(title: Text("自定义示例")),
            ),
            SliverList.builder(
              itemCount: 100,
              itemBuilder: _buildItem,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildItem(BuildContext context, int index) {
    return ListTile(
      title: Text("第 $index 项的标题"),
      subtitle: Text("第 $index 项的副标题"),
      trailing: const Text("^_^"),
    );
  }
}