TiltBaseContainer widget

了解 TiltBaseContainer widget 参数。TiltBaseContainer widget 具备默认的倾斜、光照以及阴影效果。

TiltBaseContainer widget 只能在 Tilt widget 中使用。

一个基础容器 widget,提供倾斜和模拟的光影效果。
仅对 child 使用普通阴影效果。

简单用法

...

/// 搭配 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),
    ),
  ),
),

...

TiltBaseContainer widget 参数

参数名类型默认值描述
child requiredWidget-主要 child widget,倾斜和各种效果将应用于该 widget。
childLayoutChildLayoutChildLayout()其它 child 布局。
例如:位于 child 外部、内部、后面的视差布局。
lightConfigLightConfigLightConfig()光照效果配置。
shadowConfigShadowBaseConfigShadowBaseConfig()阴影效果配置。
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。
例如:视差效果。

LightConfig

参数名类型默认值描述
disableboolfalse仅禁用光照效果。
colorColorColor(0xFFFFFFFF)光照颜色。
minIntensitydouble0.0颜色最小不透明度,也是初始不透明度。
maxIntensitydouble0.5颜色最大不透明度,跟随倾斜最大进度。
spreadFactordouble4.0光源扩散系数,相对于当前 widget 尺寸。
directionLightDirectionLightDirection.around光照方向。
影响:
[ShadowBaseConfig.direction](配置后不受影响)。
enableReverseboolfalse反转光照方向。
影响:
[ShadowBaseConfig.direction](配置后不受影响)。
[ShadowBaseConfig.enableReverse](配置后不受影响)。

ShadowBaseConfig

参数名类型默认值描述
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反转阴影方向。
spreadInitialdouble0.0阴影扩散半径初始值。
spreadFactordouble0.0阴影扩散半径系数,相对于当前 widget 尺寸。
minBlurRadiusdouble10.0最小阴影模糊半径,也是初始模糊半径。
maxBlurRadiusdouble20.0最大阴影模糊半径,跟随倾斜最大进度。