简单用法

简单示例帮助你快速上手。

倾斜

Tilt widget 仅管理手势、传感器以及动画的状态（无 UI 渲染）。
你可以在 Tilt widget 内组合 TiltBaseContainer widget，来封装默认的倾斜、光影效果。
此外，你也可以使用内置的 Tilt.base widget 来实现相同的效果。

想要了解更多关于 Tilt 容器的信息，请查看 Tilt 容器。

/// 导入 flutter_tilt
import 'package:flutter_tilt/flutter_tilt.dart';

...

/// 搭配 TiltBaseContainer 为 Tilt 实现默认的效果。
Tilt(
  child: TiltBaseContainer(
    child: SizedBox(
      width: 150,
      height: 300,
      child: DecoratedBox(
        decoration: const BoxDecoration(color: Colors.grey),
      ),
    ),
  ),
),

/// Tilt 内置 Tilt.base 实现默认的效果。
/// Tilt.base 是一个便捷的 widget，它由 Tilt 和 TiltBaseContainer 组合而成。
Tilt.base(
  child: SizedBox(
    width: 150,
    height: 300,
    child: DecoratedBox(
      decoration: const BoxDecoration(color: Colors.grey),
    ),
  ),
),

...

视差

TiltParallax widget 只能在 Tilt widget 中使用。

/// 导入 flutter_tilt
import 'package:flutter_tilt/flutter_tilt.dart';

...

Tilt(
  child: TiltBaseContainer(
    childLayout: const ChildLayout(
      outer: [
        /// 此处为视差
        Positioned(
          child: TiltParallax(
            child: Text('Parallax'),
          ),
        ),
        /// 此处为视差
        Positioned(
          top: 20.0,
          left: 20.0,
          child: TiltParallax(
            offset: Offset(-10.0, -10.0),
            child: Text('Tilt'),
          ),
        ),
      ],
    ),
    child: SizedBox(
      width: 150,
      height: 300,
      child: DecoratedBox(
        decoration: const BoxDecoration(color: Colors.brown),
      ),
    ),
  ),
),

...