任何 Flutter 可滚动组件的视差行为

视差动画

此插件可在任何可滚动组件中实现视差效果，只需将您的可滚动组件包装在 ParallaxArea 中，并在其中使用 ParallaxWidget。

交互式网页示例在此

垂直分页	水平分页

垂直列表	水平列表

功能

前景和背景视差重叠
视差幅度可自定义
适用于任何Scrollable
垂直、水平或同时视差
反向视差

用法

此插件依赖于 RenderBox 计算和 Scrollable 通知来相应地移动内容
只需用 ParallaxArea 包裹任何 Scrollable，并在可滚动视图中使用 ParallaxWidget 即可启用该效果

示例

以下示例显示了如何为PageView添加视差背景

ParallaxArea(
  child: PageView.builder(
    scrollDirection: Axis.vertical,
    itemBuilder: (context, index) {
      return ParallaxWidget(
        child: Center(
          child: Text(
            "PAGE ${index + 1}",
            style: TextStyle(
              color: Colors.white,
              fontSize: 40,
              fontWeight: FontWeight.w900,
            ),
          ),
       ),
      overflowWidthFactor: 1,
      background: Image.asset(
        "assets/background_${index % 3}.jpg",
          fit: BoxFit.cover,
      ),
    );
  }),
),

视差属性

Widget 子项

要显示的主要子项，背景的大小将与此子项匹配。

Widget? 背景

要放置在背景中的小部件，它将包含在OverflowBox中，并根据overflowWidthFactor和overflowHeightFactor进行缩放。

double overflowWidthFactor

宽度乘数因子，背景的大小将是子项乘以overflowWidthFactor，增加此值将在水平滚动时增加视差效果。

最小值为 1，默认值为 2。

double overflowHeightFactor

高度乘数因子，背景的高度将是子项乘以overflowHeightFactor，增加此值将在垂直滚动时增加视差效果。

最小值为 1，默认值为 2。

bool fixedHorizontal

如果为 true，则禁用水平轴上的视差效果。

默认值为 false。

bool fixedVertical

如果为 true，则禁用垂直轴上的视差效果。

默认值为 false。

bool inverted

如果为 true，则反转两个轴上的视差效果。

默认值为 false。

Alignment alignment

定义此视差应居中的点，对齐将相对于父 ParallaxArea。
例如，如果您设置了 Alignment.topLeft，当 ParallaxWidget 的顶部和左侧与父 ParallaxArea 的顶部和左侧对齐时，背景小部件将居中。

默认值为 Alignment.center。

bool clipOverflow

定义是否裁剪溢出，如果不裁剪，内容将溢出 ParallaxWidget 外部。

默认值为 true。

EdgeInsets parallaxPadding

为视差提供通用内边距，用于避免像素溢出，如果内容未完全覆盖视口。

默认值为 EdgeInsets.zero。

bool showDebugInfo

显示一些调试信息，例如当前视差边界上的定位和溢出。

GitHub

https://github.com/3rein/parallax_animation

任何 Flutter 可滚动组件的视差行为

视差动画

功能

用法

示例