Flutter渐变滚动效果插件faded_scrollable的使用

Faded Scrollable

Faded Scrollable 是一个Flutter小部件，它为可滚动的小部件的顶部和底部添加了淡入淡出的效果。淡入淡出的程度取决于滚动位置，并且可以根据滚动情况自定义成比例或固定。

特性

• 使可滚动小部件的顶部和/或底部淡入淡出。
• 自定义屏幕顶部和底部的最小和最大淡入区域。
• 配置淡入淡出效果，使其与滚动成比例或为固定量。

安装

在你的 pubspec.yaml 文件中的 dependencies 下添加以下内容：

dependencies:
  faded_scrollable: ^1.0.0

然后运行 flutter pub get 来安装这个包。

使用方法

下面是一个基本的例子，展示了如何使用 FadedScrollable:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Faded Scrollable Example')),
        body: const FadedScrollable(
          child: ListView.separated(
            separatorBuilder: (context, index) => const Divider(),
            itemCount: 40,
            itemBuilder: (context, index) => ListTile(
              dense: true,
              title: Text('Title $index'),
              subtitle: Text('Subtitle $index'),
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

你可以通过使用各种参数来自定义淡入淡出效果的行为：

• child (Widget): 将要从顶部和底部淡入淡出的小部件。此小部件或其子级之一必须是可滚动的（例如 ListView、SingleChildScrollView）。
• scrollRatioStart (double): 定义顶部淡入将在什么滚动比率开始。默认值为 0.0（从滚动开始时开始淡入）。
• scrollRatioEnd (double): 定义底部淡入将在什么滚动比率开始消失。默认值为 1.0（在滚动结束时开始淡入）。
• minTopScreenRatioFade (double): 应该从顶部淡入的屏幕最小部分。默认值为 0.05（屏幕的5%）。
• maxTopScreenRatioFade (double): 应该从顶部淡入的屏幕最大部分。默认值为 0.175（屏幕的17.5%）。
• minBottomScreenRatioFade (double): 应该从底部淡入的屏幕最小部分。默认值为 0.05。
• maxBottomScreenRatioFade (double): 应该从底部淡入的屏幕最大部分。默认值为 0.175。
• proportionalFade (bool): 淡入淡出量是否应该与滚动位置成比例。默认值为 true。

示例代码

以下是完整的示例代码，包含了更详细的设置：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Faded Scrollable Demo',
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.symmetric(vertical: 8),
          child: SafeArea(
            child: FadedScrollable(
              scrollRatioStart: 0.1, // 自定义滚动开始淡入的位置
              scrollRatioEnd: 0.9,   // 自定义滚动结束淡入的位置
              minTopScreenRatioFade: 0.05, // 自定义顶部淡入的最小屏幕占比
              maxTopScreenRatioFade: 0.2,  // 自定义顶部淡入的最大屏幕占比
              minBottomScreenRatioFade: 0.05, // 自定义底部淡入的最小屏幕占比
              maxBottomScreenRatioFade: 0.2,  // 自定义底部淡入的最大屏幕占比
              proportionalFade: true, // 是否淡入淡出量与滚动位置成比例
              child: ListView.separated(
                separatorBuilder: (context, index) => const Divider(),
                itemCount: 40,
                itemBuilder: (context, index) => ListTile(
                  minTileHeight: 32,
                  minVerticalPadding: 0,
                  dense: true,
                  title: Text('Title $index'),
                  subtitle: Text('Subtitle $index'),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

通过上述代码，你可以在Flutter应用中实现一个带有渐变滚动效果的列表视图。根据需要调整各个参数，以达到最佳的视觉效果。