Flutter网页平滑滚动插件web_smooth_scroll的使用

Web Smooth Scroll

web_smooth_scroll 是一个帮助你提供更流畅和美观的滚动体验的包。开发这个包的动机是，使用官方Flutter SDK时，网页上的滚动体验非常卡顿且感觉滞后。为了克服这个问题并提供更高质量的滚动体验，开发了这个包。

动机

在开发我的个人作品集网站时，我遇到了滚动不流畅的问题。在研究解决方法时，我发现了这个包 smooth_scroll_web，但它存在一些问题并且作者不再维护。它在滚动时存在问题，特别是在使用滚动条时，滚动行为不同。此外，当用户使用触控板滚动时，它会直接滚动到底部，使网站完全无法使用。而且该包不支持null safety，而本包支持。感谢Dezső Csete提供的灵感和基础工作。

滚动效果对比

未使用插件前的滚动效果

使用插件后的滚动效果

入门指南

安装

1. 在 pubspec.yaml 文件中添加依赖：

   dependencies:
     web_smooth_scroll: ^latest_version
   

2. 在项目根目录下运行以下命令：

   flutter packages get
   

基本用法

以下是使用 web_smooth_scroll 的基本步骤：

1. 导入包

   import 'package:web_smooth_scroll/web_smooth_scroll.dart';
   

2. 创建ScrollController

   // Controllers
   late ScrollController _scrollController;
   
   @override
   void initState() {
     // initialize scroll controllers
     _scrollController = ScrollController();
     super.initState();
   }
   

3. 使用控制器与包

   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: const Text('Web Smooth Scroll'),
       ),
       body: WebSmoothScroll(
         controller: _scrollController,
         child: SingleChildScrollView(
           physics: const NeverScrollableScrollPhysics(),
           controller: _scrollController,
           child: _buildScrollableList(),
         ),
       ),
     );
   }
   

WebSmoothScroll的高级用法

WebSmoothScroll 可以与任何可滚动的小部件一起使用，只需将相同的滚动控制器传递给 WebSmoothScroll 和可滚动小部件，并指定滚动物理为 NeverScrollableScrollPhysics()。

此外，还有一些可选参数可以使用：

WebSmoothScroll(
  controller: _scrollController,
  scrollOffset: 60, // 用户滚动输入的额外偏移量
  animationDuration: 500, // 滚动动画的持续时间（毫秒）
  curve: Curves.easeInOutCirc, // 动画曲线
  child: SingleChildScrollView(
    physics: const NeverScrollableScrollPhysics(),
    controller: _scrollController,
    child: _buildScrollableList(),
  ),
),

注意事项

1. 此插件仅用于网页平台，其他平台不要使用此插件。你可以检查平台是否为网页再决定是否使用 WebSmoothScroll。
2. 记住要将滚动物理设置为 NeverScrollableScrollPhysics()，否则你不会看到滚动行为的任何变化。

示例代码

以下是一个完整的示例代码，展示了如何使用 web_smooth_scroll 包：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Smooth Scroll',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Controllers
  late ScrollController _scrollController;

  @override
  void initState() {
    // initialize scroll controllers
    _scrollController = ScrollController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Web Smooth Scroll'),
      ),
      body: WebSmoothScroll(
        controller: _scrollController,
        scrollOffset: 100,
        animationDuration: 600,
        curve: Curves.easeInOutCirc,
        child: SingleChildScrollView(
          physics: const NeverScrollableScrollPhysics(),
          controller: _scrollController,
          child: _buildScrollableList(),
        ),
      ),
    );
  }

  /// Builder Functions
  ///
  ///
  Widget _buildScrollableList() => Column(
        children: List.generate(
          50,
          (index) => Container(
            height: 100,
            margin: const EdgeInsets.symmetric(vertical: 22.0, horizontal: 120.0),
            color: Colors.red,
          ),
        ),
      );
}

通过以上内容，你应该能够顺利地在Flutter网页项目中实现平滑滚动效果。如果有任何问题或需要进一步的帮助，请随时提问！