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 required | Widget | - | 主要 child widget,倾斜和各种效果将应用于该 widget。 |
| childLayout | ChildLayout | ChildLayout() | 其它 child 布局。 例如:位于 child 外部、内部、后面的视差布局。 |
| lightConfig | LightConfig | LightConfig() | 光照效果配置。 |
| shadowConfig | ShadowBaseConfig | ShadowBaseConfig() | 阴影效果配置。 |
| border | BoxBorder? | null | BoxDecoration border。 |
| borderRadius | BorderRadiusGeometry? | null | BoxDecoration borderRadius。 |
| clipBehavior | Clip | Clip.antiAlias | 容器的裁剪表现。 |
| filterQuality | FilterQuality? | null | Transform 的质量。 |
ChildLayout
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| outer | List<Widget> | <Widget>[] | 与 Stack 一样,你可以使用 Stack 布局来创建一些位于 child 外部 的 widget。 例如:视差效果。 |
| inner | List<Widget> | <Widget>[] | 与 Stack 一样,你可以使用 Stack 布局来创建一些位于 child 内部 的 widget。 例如:视差效果。 |
| behind | List<Widget> | <Widget>[] | 与 Stack 一样,你可以使用 Stack 布局来创建一些位于 child 后面 的 widget。 例如:视差效果。 |
LightConfig
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| disable | bool | false | 仅禁用光照效果。 |
| color | Color | Color(0xFFFFFFFF) | 光照颜色。 |
| minIntensity | double | 0.0 | 颜色最小不透明度,也是初始不透明度。 |
| maxIntensity | double | 0.5 | 颜色最大不透明度,跟随倾斜最大进度。 |
| spreadFactor | double | 4.0 | 光源扩散系数,相对于当前 widget 尺寸。 |
| direction | LightDirection | LightDirection.around | 光照方向。 影响: [ShadowBaseConfig.direction](配置后不受影响)。 |
| enableReverse | bool | false | 反转光照方向。 影响: [ShadowBaseConfig.direction](配置后不受影响)。 [ShadowBaseConfig.enableReverse](配置后不受影响)。 |
ShadowBaseConfig
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| disable | bool | false | 仅禁用阴影效果。 |
| color | Color | Color(0xFF9E9E9E) | 阴影颜色。 |
| minIntensity | double | 0.0 | 颜色最小不透明度,也是初始不透明度。 |
| maxIntensity | double | 0.5 | 颜色最大不透明度,跟随倾斜最大进度。 |
| offsetInitial | Offset | Offset(0.0, 0.0) | 阴影偏移初始值。 例如:(0.0, 0.0) 中心 (40.0, 40.0) 向左上角偏移 40。 |
| offsetFactor | double | 0.1 | 阴影偏移系数,相对于当前 widget 尺寸。 |
| direction | ShadowDirection? | null | 阴影方向。 |
| enableReverse | bool? | null | 反转阴影方向。 |
| spreadInitial | double | 0.0 | 阴影扩散半径初始值。 |
| spreadFactor | double | 0.0 | 阴影扩散半径系数,相对于当前 widget 尺寸。 |
| minBlurRadius | double | 10.0 | 最小阴影模糊半径,也是初始模糊半径。 |
| maxBlurRadius | double | 20.0 | 最大阴影模糊半径,跟随倾斜最大进度。 |