Flutter视差滚动效果插件simple_parallax的使用

Flutter视差滚动效果插件simple_parallax的使用

这个视差插件通过两种模式（容器模式和部件模式）为您的小部件添加优雅的视差效果。该插件有助于创建具有滚动效果的动态且视觉上吸引人的用户界面。

特性

• 平滑的背景图像视差滚动。
• 可配置的视差滚动速度。
• 简单地集成到现有的Flutter项目中。
• 使用provider进行状态管理，确保高效的更新。

安装

在 pubspec.yaml 文件中添加 simple_parallax：

dependencies:
  flutter:
    sdk: flutter
  simple_parallax: ^0.1.0

将 ^0.1.0 替换为从 pub.dev 获取的最新版本。

使用方法

simple_parallax 插件提供了两个主要的小部件来创建视差效果：

容器模式 (SimpleParallaxContainer)

容器模式用于向带有背景图像的子小部件添加视差效果。

示例

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

void main() => runApp(const MyApp());

/// 应用程序演示
class MyApp extends StatelessWidget {
  /// 应用程序演示构造函数
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            //height: 300,
            //width: 600,
            child: SimpleParallaxContainer(
              //height: 300,
              imagePath: 'assets/images/background.webp', // 背景图像路径
              speed: 0.3, // 视差滚动速度
              autoSpeed: true, // 自动计算速度
              decal: 1.0, // 背景图像偏移
              child: Column(
                children: List<Widget>.generate(
                  20,
                  (int index) => Container(
                    height: 100,
                    margin: const EdgeInsets.symmetric(vertical: 10),
                    color: Colors.white.withOpacity(0.8),
                    child: Center(child: Text('Item $index')), // 列表项
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

部件模式 (SimpleParallaxWidget)

部件模式允许您在一个列表中应用视差效果到多个子部件。

示例

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

void main() => runApp(const MyApp());

/// 应用程序演示
class MyApp extends StatelessWidget {
  /// 应用程序演示构造函数
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SimpleParallaxWidget(
          children: [
            Container(
              color: Colors.red,
              padding: const EdgeInsets.symmetric(vertical: 200, horizontal: 0),
              child: const SizedBox(
                height: 50,
              ),
            ),
            const SimpleParallaxItem(
              imagePath: 'assets/images/background.webp', // 背景图像路径
              height: 300,
              child: Center(
                child: Text('TEST 1'), // 子部件
              ),
            ),
            Container(
              color: Colors.greenAccent,
              child: const SizedBox(
                height: 250,
              ),
            ),
            const SimpleParallaxItem(
              imagePath: 'assets/images/background.webp', // 背景图像路径
              height: 300,
              child: Center(
                child: Text('TEST 2'), // 子部件
              ),
            ),
            Container(height: 500, color: Colors.blueGrey),
          ],
        ),
      ),
    );
  }
}