TiltProjectorContainer widget

了解 TiltBaseContainer widget 参数。TiltProjectorContainer widget 具备倾斜效果以及类似投影的阴影效果。

TiltProjectorContainer widget 只能在 Tilt widget 中使用。

对整个 child、childLayout 使用类似投影仪效果的阴影，
它会显示与 widget 非透明部分完全一致的阴影。

存在性能风险

建议在以下场景使用：

  • 仅图片
  • 无数据状态
  • 无 Hero 标签

你应该自行评估性能风险， 如果你应用的场景运行流畅，则可继续使用。

简单用法

...

final childLayout = ChildLayout(
  outer: [
    TiltParallax(
      offset: Offset(20, 20),
      child: Image.asset(
        'assets/demo1.png',
        width: xxx,
        height: xxx,
      ),
    ),
    TiltParallax(
      offset: Offset(30, 30),
      child: Image.asset(
        'assets/demo2.png',
        width: xxx,
        height: xxx,
      ),
    ),
  ],
);

...

/// 搭配 TiltProjectorContainer 为 Tilt 实现效果。
Tilt(
  child: TiltProjectorContainer(
    childLayout: childLayout,
    child: SizedBox(width: 150, height: 300),
  ),
),

/// Tilt 内置 Tilt.projector 实现效果。
/// Tilt.projector 是一个便捷的 widget，它由 Tilt 和 TiltProjectorContainer 组合而成。
Tilt.projector(
  childLayout: childLayout,
  child: SizedBox(width: 150, height: 300),
),

...

TiltProjectorContainer widget 参数

参数名类型默认值描述
child requiredWidget-主要 child widget，倾斜和各种效果将应用于该 widget。
childLayoutChildLayoutChildLayout()其它 child 布局。
例如：位于 child 外部、内部、后面的视差布局。
shadowConfigShadowProjectorConfigShadowProjectorConfig()阴影效果配置。
borderBoxBorder?nullBoxDecoration border。
borderRadiusBorderRadiusGeometry?nullBoxDecoration borderRadius。
clipBehaviorClipClip.antiAlias容器的裁剪表现。
filterQualityFilterQuality?nullTransform 的质量。

ChildLayout

参数名类型默认值描述
outerList<Widget><Widget>[]与 Stack 一样，你可以使用 Stack 布局来创建一些位于 child 外部 的 widget。
例如：视差效果。
innerList<Widget><Widget>[]与 Stack 一样，你可以使用 Stack 布局来创建一些位于 child 内部 的 widget。
例如：视差效果。
behindList<Widget><Widget>[]与 Stack 一样，你可以使用 Stack 布局来创建一些位于 child 后面 的 widget。
例如：视差效果。

ShadowProjectorConfig

参数名类型默认值描述
disableboolfalse仅禁用阴影效果。
colorColorColor(0xFF9E9E9E)阴影颜色。
minIntensitydouble0.0颜色最小不透明度，也是初始不透明度。
maxIntensitydouble0.5颜色最大不透明度，跟随倾斜最大进度。
offsetInitialOffsetOffset(0.0, 0.0)阴影偏移初始值。
例如：(0.0, 0.0) 中心
(40.0, 40.0) 向左上角偏移 40。
offsetFactordouble0.1阴影偏移系数，相对于当前 widget 尺寸。
directionShadowDirection?null阴影方向。
enableReversebool?null反转阴影方向。
projectorScaleFromdouble1.0最小倾斜进度的阴影尺寸比例，也是初始尺寸比例。
projectorScaleTodouble1.0最大倾斜进度的阴影尺寸比例。
projectorBlurSigmaFromdouble5.0最小倾斜进度的阴影模糊 Sigma，也是初始模糊 Sigma。
projectorBlurSigmaTodouble10.0最大倾斜进度的阴影模糊 Sigma。