Flutter 视差滑动器 UI 挑战

概述

Flutter 视差滑动器 UI 挑战展示了一个动态的视差滑动器小部件，旨在提升您的用户界面体验。此小部件允许您创建一个水平滑动器，以迷人的视差滚动效果显示一系列图像。通过提供图像 URL、启用拖动滚动、设置视口比例、调整填充、控制视差因子以及切换前景淡入和背景缩放来定制其行为。

Flutter.Parallax.Swiper.mov

示例 1

使用具有默认值的 ParallaxSwiper（启用前景淡入和背景缩放）

ParallaxSwiper(
  images: [
    'image_url_1.jpg',
    'image_url_2.jpg',
    'image_url_3.jpg',
  ],
)

示例 2

使用没有前景淡入和背景缩放的 ParallaxSwiper

ParallaxSwiper(
  images: [
    'image_url_1.jpg',
    'image_url_2.jpg',
    'image_url_3.jpg',
  ],
  dragToScroll: true,
  viewPortFraction: 0.85,
  padding: EdgeInsets.all(16.0),
  parallaxFactor: 10.0,
  foregroundFadeEnabled: false, // Disable foreground image fading.
  backgroundZoomEnabled: false, // Disable background image zooming.
)

用法

ParallaxSwiper(
  images: [
    'image_url_1.jpg',
    'image_url_2.jpg',
    'image_url_3.jpg',
  ],
  dragToScroll: true,
  viewPortFraction: 0.85,
  padding: EdgeInsets.all(16.0),
  parallaxFactor: 10.0,
  foregroundFadeEnabled: true,
  backgroundZoomEnabled: true,
)

配置参数

  • images (List<String>): 要显示的图像 URL 列表。
  • dragToScroll (bool): 启用或禁用拖动滚动功能。
  • viewPortFraction (double): 设置图像显示的视口比例。
  • padding (EdgeInsets): 定义滑动器的填充。
  • parallaxFactor (double): 调整视差因子以控制滚动效果。
  • foregroundFadeEnabled (bool): 切换前景图像淡入。
  • backgroundZoomEnabled (bool): 切换背景图像缩放。

贡献

欢迎贡献！如果您遇到任何问题或有改进建议，请随时创建拉取请求。

许可证

Flutter 视差滑动器 UI 挑战根据 MIT 许可发布。详情请参阅 LICENSE。

GitHub

查看 Github