Flutter丝滑滚动插件silky_scroll的使用

SilkyScroll 是一个Flutter包，它通过添加平滑动画和可定制的滚动物理效果来增强移动、桌面和Web平台上的滚动体验。

以下是三个展示不同滚动效果的动图：

• 第一个动图：缓慢滚动。
• 第二个动图：快速滚动（轻扫滚动）。
• 第三个动图：检测到移动端拖动滚动时，物理效果发生变化。

基本用法

SilkyScroll(
  builder: (context, controller, physics) => ListView(
    controller: controller,
    physics: physics,
    children: [
      // 列表项
    ],
  ),
)

自定义用法

以下是一个完整的示例代码，展示了如何使用 SilkyScroll 实现自定义滚动效果：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF132233)),
        useMaterial3: true,
      ),
      home: const ScrollExample(),
    );
  }
}

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

  [@override](/user/override)
  State<ScrollExample> createState() => _ScrollExampleState();
}

class _ScrollExampleState extends State<ScrollExample> {
  late final ScrollController _scrollController;

  [@override](/user/override)
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _scrollController.addListener(() {
      final double offset = _scrollController.offset;
      print("scrollController offset is $offset");
    });
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.primaryContainer,
      body: SilkyScroll(
        controller: _scrollController,
        physics: const BouncingScrollPhysics(), // 设置滚动物理效果为弹性滚动
        silkyScrollDuration: const Duration(milliseconds: 2000), // 设置滚动动画持续时间为2秒
        direction: Axis.vertical, // 设置滚动方向为垂直
        builder: (context, controller, physics) {
          return ListView.separated(
            controller: controller,
            physics: physics,
            scrollDirection: Axis.vertical,
            itemBuilder: (BuildContext context, int index) {
              return InnerScrollingItem(
                height: 200,
                number: index,
              );
            },
            separatorBuilder: (BuildContext context, int index) {
              return const Padding(
                padding: EdgeInsets.fromLTRB(20, 5, 20, 5),
                child: Divider(
                  color: Colors.black45,
                ),
              );
            },
            itemCount: 50, // 列表项数量
          );
        },
      ),
    );
  }
}

class InnerScrollingItem extends StatelessWidget {
  const InnerScrollingItem({
    super.key,
    required this.height,
    required this.number,
  });

  final double height;
  final int number;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(maxHeight: height),
      child: Card(
        color: Theme.of(context).colorScheme.onPrimary,
        elevation: 12,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Text(
                "Test Item $number",
                style: const TextStyle(fontSize: 20),
              ),
              Expanded(
                child: SilkyScroll(
                  builder: (context, controller, physics) {
                    return ListView.separated(
                      controller: controller,
                      physics: physics,
                      itemBuilder: (BuildContext context, int index) {
                        final Color color;
                        if (index % 2 == 0) {
                          color = Theme.of(context).colorScheme.secondaryContainer;
                        } else {
                          color = Theme.of(context).colorScheme.errorContainer;
                        }

                        return SizedBox(
                          height: 60,
                          child: Card(
                            elevation: 6,
                            margin: EdgeInsets.zero,
                            color: color,
                            child: Center(
                              child: Text(
                                "inner item number: $index",
                                style: const TextStyle(fontSize: 17),
                              ),
                            ),
                          ),
                        );
                      },
                      separatorBuilder: (BuildContext context, int index) {
                        return const Divider(
                          color: Colors.black45,
                        );
                      },
                      itemCount: 20, // 内部列表项数量
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}