Flutter流畅列表滚动插件smooth_list_view的使用

smooth_list_view 是一个Flutter插件，用于在桌面和Web上实现平滑滚动效果。它不仅能在各种平台上（如Web、桌面、移动）提供更流畅的滚动体验，还支持鼠标和触控板之间的滚动切换。

功能特性

• 与标准 ListView 相比，提供了更好的滚动体验。
• 不论在哪个平台，都能确保滚动的平滑性。
• 支持在鼠标和触控板之间进行滚动方式的切换。

构造函数

• SmoothListView(…): 行为与经典的 ListView(...) 完全相同，只是使鼠标滚轮滚动更加平滑。
• SmoothListView.builder(…): 行为与经典的 ListView.builder(...) 完全相同，同样提升了鼠标滚轮滚动的平滑度。
• SmoothListView.adaptive(…): 行为与经典的 ListView(...) 类似，但允许你轻松地在平滑滚动和经典滚动之间切换。
• SmoothListView.adaptiveBuilder(…): 行为与经典的 ListView.builder(...) 类似，也允许你在平滑滚动和经典滚动间轻松切换。

入门指南

添加依赖

首先，在你的 pubspec.yaml 文件中添加此包：

flutter pub add smooth_list_view

然后在Dart代码中导入该包：

import 'package:smooth_list_view/smooth_list_view.dart';

使用方法

将原有的 ListView 替换为 SmoothListView 即可。例如：

ListView 替换

// ...
@override
Widget build(BuildContext context) {
    return SmoothListView(
      // 你可以保留相同的参数
      children: <Widget>[
        ListTile(title: Text('Item 1')),
        ListTile(title: Text('Item 2')),
        // 更多子项...
      ],
    );
}
// ...

ListView.builder() 替换

// ...
@override
Widget build(BuildContext context) {
    return SmoothListView.builder(
      itemCount: 50,
      itemBuilder: (context, index) {
        return ListTile(title: Text('Item $index'));
      },
    );
}
// ...

示例代码

下面是一个完整的示例代码，展示了如何使用 smooth_list_view 插件创建一个带有平滑滚动效果的列表，并可以通过浮动按钮切换滚动模式。

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

const List<Color> colorList = [Colors.red, Colors.blue, Colors.green];

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool smooth = false;
  late ScrollController controller;

  @override
  void initState() {
    super.initState();
    controller = ScrollController();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      showPerformanceOverlay: false,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Center(
              child: SizedBox(
                width: constraints.maxWidth * 0.8,
                height: constraints.maxHeight * 0.8,
                child: SmoothListView.builder(
                  smoothScroll: smooth,
                  duration: const Duration(milliseconds: 200),
                  controller: controller,
                  itemCount: 20,
                  itemBuilder: (ctx, idx) {
                    return ListTile(
                      textColor: colorList[idx % colorList.length],
                      onTap: () => debugPrint("pressed $idx"),
                      title: Text("$idx"),
                    );
                  },
                ),
              ),
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(smooth ? Icons.toggle_on : Icons.toggle_off),
          onPressed: () {
            setState(() {
              smooth = !smooth;
            });
          },
        ),
      ),
    );
  }
}

通过上述代码，我们可以创建一个具有平滑滚动功能的应用程序，用户可以点击浮动按钮来切换滚动模式。这使得开发者能够根据实际需求灵活调整应用的滚动行为，从而提升用户体验。