Flutter视差滚动动画插件parallax_animation的使用

parallax_animation 是一个用于实现视差滚动效果的Flutter插件。它可以在任何 Scrollable 组件中添加视差背景，只需将你的 Scrollable 组件包裹在 ParallaxArea 中，并在其内部使用 ParallaxWidget 即可启用该效果。

功能特性

• 可重叠的前景和背景视差效果。
• 自定义视差幅度。
• 支持任意 Scrollable 组件。
• 支持垂直、水平或两者同时的视差滚动。
• 支持反向视差效果。

使用方法

要使用这个插件，首先需要确保已经添加了依赖项到你的 pubspec.yaml 文件中：

dependencies:
  parallax_animation: ^latest_version

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

示例代码

下面是一个简单的示例，展示了如何在一个 PageView 中添加视差背景：

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

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

class ParallaxApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ParallaxSample(),
    );
  }
}

class ParallaxSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Parallax sample"),
        actions: [
          IconButton(
              onPressed: () async {
                // 这里可以添加更多的交互体验
              },
              icon: Icon(
                Icons.gamepad,
                semanticLabel: "Interactive experience",
              ))
        ],
      ),
      body: ParallaxArea(
        child: PageView.builder(
          scrollDirection: Axis.vertical,
          itemBuilder: (context, index) {
            return ParallaxWidget(
              child: Center(
                child: Text(
                  "PAGE ${index + 1}",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                    fontWeight: FontWeight.w900,
                  ),
                ),
              ),
              background: Image.asset(
                "assets/background_${index % 4}.jpg", // 确保你有相应的图片资源
                fit: BoxFit.cover,
              ),
            );
          },
        ),
      ),
    );
  }
}

视差属性解释

• child: 主要显示的子组件，背景大小将与该子组件匹配。
• background: 背景组件，放置于 OverflowBox 中，并根据 overflowWidthFactor 和 overflowHeightFactor 调整大小。
• overflowWidthFactor: 宽度乘数因子，增加此值会增强水平滚动时的视差效果。
• overflowHeightFactor: 高度乘数因子，增加此值会增强垂直滚动时的视差效果。
• fixedHorizontal: 如果为 true，则禁用水平轴上的视差效果。
• fixedVertical: 如果为 true，则禁用垂直轴上的视差效果。
• inverted: 如果为 true，则反转两个轴上的视差效果。
• alignment: 定义视差应居中的点，相对于父级 ParallaxArea。
• clipOverflow: 定义是否裁剪溢出部分。
• parallaxPadding: 给视差添加通用填充，避免内容未完全覆盖视口时出现像素渗漏。
• showDebugInfo: 显示一些调试信息，如当前视差边界和溢出情况。

通过调整这些属性，你可以创建各种不同的视差滚动效果，适用于不同的应用场景。