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

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

material_scrollbar

此插件提供了可自定义的滚动条，可以轻松地通过几行代码实现。

平台支持

• iOS
• Android
• Linux
• macOS
• Windows

许可证

• MIT License

Material Scrollbar

使用方法

示例代码

MaterialScrollBar(
  thumbColor: const Color(0xffe240fb), // 滚动条滑块的颜色
  trackColor: const Color(0xfff0c0f8), // 滚动条轨道的颜色
  thumbVisibility: true, // 是否始终显示滚动条滑块
  thickness: 10, // 滚动条的厚度
  radius: const Radius.circular(10), // 滚动条滑块的圆角半径
  child: ListView.builder(
    itemBuilder: (context, index) {
      return Material(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ListTile(
              title: Text(items[index]), // 列表项文本
            ),
            const Divider(
              height: 1, // 分割线高度
            )
          ],
        ),
      );
    },
    itemCount: items.length, // 数据项数量
  ),
);

必须参数

• thumbColor: 滚动条滑块的颜色。
• trackColor: 滚动条轨道的颜色。

可选参数

• thickness: 滚动条在滚动方向上的厚度。
• thumbVisibility: 指示滚动条滑块是否始终可见。
• radius: 滚动条滑块的圆角半径。
• thumbSize: 滚动条滑块的大小。

完整示例代码

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

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

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

  List items = List.generate(40, (index) => "Child item $index");

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Scroll Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material Scroll Bar Example'),
        ),
        body: SafeArea(
          child: MaterialScrollBar(
            thumbColor: const Color(0xffe240fb),
            trackColor: const Color(0xfff0c0f8),
            thumbVisibility: true,
            thickness: 10,
            radius: const Radius.circular(10),
            child: ListView.builder(
              itemBuilder: (context, index) {
                return Material(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      ListTile(
                        title: Text(items[index]),
                      ),
                      const Divider(
                        height: 1,
                      )
                    ],
                  ),
                );
              },
              itemCount: items.length,
            ),
          ),
        ),
      ),
    );
  }
}