{"id":19273019,"url":"https://github.com/fluttercandies/flutter_tilt","last_synced_at":"2025-04-04T12:06:29.646Z","repository":{"id":181787753,"uuid":"662842351","full_name":"fluttercandies/flutter_tilt","owner":"fluttercandies","description":"👀 Easily apply tilt parallax hover effects for Flutter, which supports tilt, light, shadow effects, and gyroscope sensors","archived":false,"fork":false,"pushed_at":"2025-03-12T11:45:41.000Z","size":40619,"stargazers_count":189,"open_issues_count":2,"forks_count":9,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-27T00:38:42.022Z","etag":null,"topics":["animation","flutter","flutter-package","hover","parallax","sensors","tilt","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flutter_tilt","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fluttercandies.png","metadata":{"files":{"readme":"README-ZH.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-06T02:25:01.000Z","updated_at":"2025-03-14T19:47:39.000Z","dependencies_parsed_at":"2023-10-01T12:47:37.124Z","dependency_job_id":"4d5c06c2-2d79-447e-9a16-a7b0191dc4d1","html_url":"https://github.com/fluttercandies/flutter_tilt","commit_stats":{"total_commits":391,"total_committers":4,"mean_commits":97.75,"dds":0.03324808184143224,"last_synced_commit":"4408e162924a0c0692a3e47b343dfbe45b88eb0a"},"previous_names":["amoshuke/flutter_tilt","fluttercandies/flutter_tilt"],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fflutter_tilt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fflutter_tilt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fflutter_tilt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fflutter_tilt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fluttercandies","download_url":"https://codeload.github.com/fluttercandies/flutter_tilt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174407,"owners_count":20896076,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","flutter","flutter-package","hover","parallax","sensors","tilt","widget"],"created_at":"2024-11-09T20:40:03.833Z","updated_at":"2025-04-04T12:06:29.626Z","avatar_url":"https://github.com/fluttercandies.png","language":"Dart","readme":"[![GitHub stars](https://img.shields.io/github/stars/fluttercandies/flutter_tilt?style=social\u0026logo=github\u0026logoColor=1F2328\u0026label=stars)](https://github.com/fluttercandies/flutter_tilt)\n[![Pub.dev likes](https://img.shields.io/pub/likes/flutter_tilt?style=social\u0026logo=flutter\u0026logoColor=168AFD\u0026label=likes)](https://pub.dev/packages/flutter_tilt)\n\n📓 语言：[English](README.md) | 中文  \n🎁 查看：[在线示例][]  \n💡 查看：[迁移指南][] 了解如何从破坏性改动中迁移为可用代码  \n\n\u003cbr/\u003e\u003cbr/\u003e\n\n\u003ch1 align=\"center\"\u003e\n  Flutter Tilt\n  \u003cbr/\u003e\n  \u003ca href=\"https://pub.dev/packages/flutter_tilt\"\u003e\u003cimg src=\"https://img.shields.io/pub/v/flutter_tilt?color=3e4663\u0026label=%E7%A8%B3%E5%AE%9A%E7%89%88\u0026logo=flutter\" alt=\"stable package\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://pub.dev/packages/flutter_tilt\"\u003e\u003cimg src=\"https://img.shields.io/pub/v/flutter_tilt?color=3e4663\u0026label=%E5%BC%80%E5%8F%91%E7%89%88\u0026logo=flutter\u0026include_prereleases\" alt=\"dev package\" /\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://pub.dev/packages/flutter_tilt/score\"\u003e\u003cimg src=\"https://img.shields.io/pub/dm/flutter_tilt?color=2E8B57\u0026label=%E4%B8%8B%E8%BD%BD\u0026logo=flutter\" alt=\"pub downloads\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://pub.dev/packages/flutter_tilt/score\"\u003e\u003cimg src=\"https://img.shields.io/pub/points/flutter_tilt?color=2E8B57\u0026label=%E5%88%86%E6%95%B0\u0026logo=flutter\" alt=\"pub points\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.codefactor.io/repository/github/fluttercandies/flutter_tilt\"\u003e\u003cimg src=\"https://img.shields.io/codefactor/grade/github/fluttercandies/flutter_tilt?color=0CAB6B\u0026label=%E4%BB%A3%E7%A0%81%E8%B4%A8%E9%87%8F\u0026logo=codefactor\" alt=\"CodeFactor\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/fluttercandies/flutter_tilt\"\u003e\u003cimg src=\"https://img.shields.io/codecov/c/github/fluttercandies/flutter_tilt?label=%E6%B5%8B%E8%AF%95%E8%A6%86%E7%9B%96\u0026logo=codecov\" alt=\"codecov\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://pub.dev/packages/flutter_tilt\"\u003e\u003cimg src=\"https://img.shields.io/github/languages/top/fluttercandies/flutter_tilt?color=00B4AB\" alt=\"top language\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong \u003e在 Flutter 上轻松创建倾斜视差悬停效果！\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable width=\"620\" align=\"center\" border=\"0\"\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"right\"\u003e\n        \u003cimg width=\"285px\" src=\"https://raw.githubusercontent.com/fluttercandies/flutter_tilt/main/README/preview2-small.gif\" alt=\"Example Preview GIF - Parallax image\" /\u003e\u003cbr/\u003e\u003cimg width=\"285px\" src=\"https://raw.githubusercontent.com/fluttercandies/flutter_tilt/main/README/preview-small.gif\" alt=\"Example Preview GIF\" /\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"left\"\u003e\n        \u003cimg width=\"320px\" src=\"https://raw.githubusercontent.com/fluttercandies/flutter_tilt/main/README/preview4-small.gif\" alt=\"Example Preview GIF - Parallax card\" /\u003e\u003cbr/\u003e\u003cimg width=\"320px\" src=\"https://raw.githubusercontent.com/fluttercandies/flutter_tilt/main/README/preview3-small.gif\" alt=\"Example Preview GIF - Layout\" /\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" colspan=\"2\"\u003e\n\n查看 [在线示例][]\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n## 目录 🪄\n\n\u003csub\u003e\n\n- [特性](#特性-)\n\n- [安装](#安装-)\n\n  - [版本兼容](#版本兼容-)\n\n  - [平台兼容](#平台兼容-)\n\n  - [添加 flutter_tilt](#添加-flutter_tilt-)\n\n- [传感器兼容][]\n\n- [手势优先级](#手势优先级-)\n\n- [简单用法](#简单用法-)\n\n  - [倾斜](#倾斜-)\n\n  - [视差](#视差-)\n\n- [使用](#使用-)\n\n  - [Tilt widget 参数][]\n\n  - [TiltParallax widget 参数][]\n\n  - [ChildLayout][]\n\n  - [StreamController\u0026lt;TiltStreamModel\u0026gt;][]\n\n  - [TiltConfig][]\n\n  - [LightShadowMode][]\n\n  - [LightConfig][]\n\n  - [ShadowConfig][]\n\n- [贡献者](#贡献者-)\n\n- [许可证](#许可证-)\n\n\u003c/sub\u003e\n\n\u003cbr/\u003e\n\n\n## 特性 ✨  \n\n- 📦 倾斜效果\n- 🔦 光照效果\n- 💡 阴影效果\n- 👀 视差效果\n- 📱 陀螺仪传感器支持（[传感器兼容][]）\n- 🧱 多种布局位置\n- 👇 支持鼠标、触摸和传感器事件\n- 🖼️ 流畅的动画\n- ⚙️ 许多自定义参数\n\n\n## 安装 🎯\n### 版本兼容 🐦  \n\n|       Flutter       |  3.0.0+  |  3.10.0+  |  3.19.0+  |  \n|      ---------      | :------: | :-------: | :-------: |  \n| flutter_tilt 3.0.0+ |    ❌    |    ❌    |    ✅    |  \n| flutter_tilt 2.0.0+ |    ❌    |    ✅    |    ✅    |  \n| flutter_tilt 1.0.0+ |    ✅    |    ❌    |    ❌    |  \n\n\n### 平台兼容 📱  \n\n| Android |  iOS  |  Web  | macOS | Windows | Linux |  \n| :-----: | :---: | :---: | :---: | :-----: | :---: |  \n|   ✅   |   ✅  |  ✅   |  ✅  |   ✅   |  ✅   |  \n\n\n### 添加 flutter_tilt 📦  \n\n使用 Flutter 运行以下指令，  \n\n```sh\n$ flutter pub add flutter_tilt\n```\n\n或手动将 `flutter_tilt` 添加到 `pubspec.yaml` 依赖项中。  \n\n```yaml\ndependencies:\n  flutter_tilt: ^最新版本\n```\n\n\n## 传感器兼容 📱  \n\n传感器仅在以下平台触发。  \n不支持传感器的平台不会影响其他功能的正常使用。  \n\n| Android |  iOS  |                 Web (HTTPS)                  | macOS | Windows | Linux |  \n| :-----: | :---: | :------------------------------------------: | :---: | :-----: | :---: |  \n|   ✅   |   ✅  | [浏览器兼容][Gyroscope Browser compatibility] |  ❌  |   ❌    |  ❌  |  \n\n\u003e [!NOTE]  \n\u003e 目前 Web 使用 [Sensor API - Gyroscope][]，但它不兼容部分主流浏览器，比如 Safari、Firefox。  \n\u003c!-- \u003e 之后也许会替换为 [DeviceMotionEvent][]。 --\u003e\n\n\n## 手势优先级 📱\n\n启用多个手势时，会按照优先级触发手势：\n\n\u003e Touch \u003e Hover \u003e Controller \u003e Sensors\n\n\n## 简单用法 📖  \n\n示例：[flutter_tilt/example][]\n\n\n### 倾斜 📦  \n\n[Tilt][Tilt widget 参数] widget 默认有倾斜、阴影和光照的效果。  \n\n```dart\n/// 导入 flutter_tilt\nimport 'package:flutter_tilt/flutter_tilt.dart';\n\nTilt(\n  child: Container(\n    width: 150.0,\n    height: 300.0,\n    color: Colors.grey,\n  ),\n),\n\n```\n\n\n### 视差 👀  \n\n[TiltParallax][TiltParallax widget 参数] widget 只能在 `Tilt` widget 的 `childLayout` 中使用。  \n\n```dart\n/// 导入 flutter_tilt\nimport 'package:flutter_tilt/flutter_tilt.dart';\n\nTilt(\n  childLayout: const ChildLayout(\n    outer: [\n      /// 此处为视差\n      Positioned(\n        child: TiltParallax(\n          child: Text('Parallax'),\n        ),\n      ),\n      /// 此处为视差\n      Positioned(\n        top: 20.0,\n        left: 20.0,\n        child: TiltParallax(\n          size: Offset(-10.0, -10.0),\n          child: Text('Tilt'),\n        ),\n      ),\n    ],\n  ),\n  child: Container(\n    width: 150.0,\n    height: 300.0,\n    color: Colors.brown,\n  ),\n),\n\n```\n\n\n## 使用 📖  \n### `Tilt` widget 参数 🤖  \n\n| 参数名 | 类型 | 默认值 | 描述 |  \n| --- | --- | --- | --- |\n| child \u003csup\u003e`必选`\u003c/sup\u003e | `Widget` | - | 创建一个 widget，使 child widget 有倾斜效果。 |  \n| childLayout | [ChildLayout][] | `ChildLayout()` | 其它 child 布局。 \u003cbr/\u003e 例如：位于 child 外部、内部、后面的视差布局。 |  \n| tiltStreamController | [StreamController\u0026lt;TiltStreamModel\u0026gt;][]? | `null` | 使用 `StreamController\u003cTiltStreamModel\u003e.broadcast()` 来自定义控制倾斜。 |  \n| disable | `bool` | `false` | 禁用所有效果。 |  \n| fps | `int` | `60` | 手势触发的帧数。 |  \n| border | `BoxBorder?` | `null` | BoxDecoration border。 |  \n| borderRadius | `BorderRadiusGeometry?` | `null` | BoxDecoration borderRadius。 |  \n| clipBehavior | `Clip` | `Clip.antiAlias` | Flutter 中的 clipBehavior。 |  \n| tiltConfig | [TiltConfig][] | `TiltConfig()` | 倾斜效果配置。 |  \n| lightShadowMode | [LightShadowMode][] | `LightShadowMode.base` | 光影 Mode。 |  \n| lightConfig | [LightConfig][] | `LightConfig()` | 光照效果配置。 |  \n| shadowConfig | [ShadowConfig][] | `ShadowConfig()` | 阴影效果配置。 |  \n| onGestureMove | `void Function(TiltDataModel, GesturesType)?` | `null` | 手势移动的回调触发。 |  \n| onGestureLeave | `void Function(TiltDataModel, GesturesType)?` | `null` | 手势离开的回调触发。 |  \n\n\n### `TiltParallax` widget 参数 🤖  \n\n| 参数名 | 类型 | 默认值 | 描述 |  \n| --- | --- | --- | --- |\n| child \u003csup\u003e`必选`\u003c/sup\u003e | `Widget` | - | 创建视差 widget。 |  \n| size | `Offset` | `Offset(10.0, 10.0)` | 视差大小。 |  \n| filterQuality | `FilterQuality` | `null` | Flutter FilterQuality。 |  \n\n\n### ChildLayout 📄  \n\n| 参数名 | 类型 | 默认值 | 描述 |  \n| --- | --- | --- | --- |\n| outer | `List\u003cWidget\u003e` | `\u003cWidget\u003e[]` | 与 Stack 一样，你可以使用 Stack 布局来创建一些位于 `child 外部` 的 widget。 \u003cbr/\u003e 例如：视差效果。 |  \n| inner | `List\u003cWidget\u003e` | `\u003cWidget\u003e[]` | 与 Stack 一样，你可以使用 Stack 布局来创建一些位于 `child 内部` 的 widget。 \u003cbr/\u003e 例如：视差效果。 |  \n| behind | `List\u003cWidget\u003e` | `\u003cWidget\u003e[]` | 与 Stack 一样，你可以使用 Stack 布局来创建一些位于 `child 后面` 的 widget。 \u003cbr/\u003e 例如：视差效果。 |  \n\n\n### StreamController\u0026lt;TiltStreamModel\u0026gt; 📄\n\n```dart\n\nfinal StreamController\u003cTiltStreamModel\u003e tiltStreamController =\n      StreamController\u003cTiltStreamModel\u003e.broadcast();\n\n/// 正在使用当前手势\ntiltStreamController.add(\n  TiltStreamModel(\n    position: Offset(xx, xx),\n  ),\n);\n\n/// 停止使用当前手势\ntiltStreamController.add(\n  TiltStreamModel(\n    position: Offset(xx, xx),\n    gestureUse: false,\n  ),\n);\n\n```\n\n| Parameter | Type | Default | Description |  \n| --- | --- | --- | --- |\n| position \u003csup\u003e`必选`\u003c/sup\u003e | `Offset` | - | 当前触发的坐标位置， \u003cbr/\u003e 会触发对应位置的倾斜效果。 \u003cbr/\u003e 例如： \u003cbr/\u003e 有一个组件尺寸为 width: 10, height: 10, \u003cbr/\u003e (0, 0)：会触发最左上的倾斜。 \u003cbr/\u003e (10, 10)：会触发最右下的倾斜。 |  \n| gesturesType | `GesturesType` | `GesturesType.controller` | 触发手势类型。 \u003cbr/\u003e 会根据 [手势优先级](#手势优先级-) 进行触发。 \u003cbr/\u003e 如果需要自定义动画或其他方式自行控制， \u003cbr/\u003e `推荐` 使用 `GesturesType.controller`。 \u003cbr/\u003e 如果使用其他的类型进行触发， \u003cbr/\u003e 那么就会受到对应类型相关配置、效果的影响。 \u003cbr/\u003e 例如： \u003cbr/\u003e 自行触发 `GesturesType.sensors` 的时候。 \u003cbr/\u003e 配置 `TiltConfig.enableSensorRevert` 为 false 的情况下， \u003cbr/\u003e 将同样不会复原至初始状态。 |  \n| gestureUse | `bool` | `true` | 手势是否正在使用。 \u003cbr/\u003e 用于确定手势是否正在使用，并根据手势优先级进行处理。 \u003cbr/\u003e 例如： \u003cbr/\u003e 如果在触发 `GesturesType.touch` 的时候永远不赋值为 false，那么优先级低于 `GesturesType.touch` 的手势将永远不会被触发。 |  \n\n\n### TiltConfig 📄  \n\n| 参数名 | 类型 | 默认值 | 描述 |  \n| --- | --- | --- | --- |\n| disable | `bool` | `false` | 仅禁用倾斜效果。 |  \n| initial | `Offset?` | `null` | 倾斜进度的初始值，范围 `(x, y)：(1, 1) 至 (-1, -1)`，\u003cbr/\u003e 你可以超过这个范围，但是手势移动过程中的最大倾斜角度始终按照 `[TiltConfig.angle]` 进行倾斜。 \u003cbr/\u003e 例如：(0.0, 0.0) 中心 \u003cbr/\u003e (1.0, 1.0) 左上角最大倾斜角度 `[TiltConfig.angle]`。 |  \n| angle | `double` | `10.0` | 最大倾斜角度。 \u003cbr/\u003e 例如：180 会翻转。 |  \n| direction | `List\u003cTiltDirection\u003e?` | `null` | 倾斜方向，多方向、自定义方向值。 |  \n| enableReverse | `bool` | `false` | 倾斜反向，可以向上或向下倾斜。 |  \n| filterQuality | `FilterQuality` | `null` | Flutter FilterQuality。 |  \n| enableGestureSensors | `bool` | `true` | 陀螺仪传感器触发倾斜。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.sensors` |  \n| sensorFactor | `double` | `10.0` | 传感器触发系数（灵敏度）。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.sensors` |  \n| enableSensorRevert | `bool` | `true` | 启用传感器倾斜复原，会复原至初始状态。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.sensors` |  \n| sensorRevertFactor | `double` | `0.05` | 传感器复原系数（阻尼），数值范围：`0-1`。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.sensors` |  \n| sensorMoveDuration | `Duration` | `Duration(milliseconds: 50)` | 传感器移动时的动画持续时间。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.sensors` |  \n| enableGestureHover | `bool` | `true` | Hover 手势触发倾斜。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.hover` |  \n| enableGestureTouch | `bool` | `true` | Touch 手势触发倾斜。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.touch` |  \n| enableRevert | `bool` | `true` | 启用倾斜复原，会复原至初始状态。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.touch` \u003cbr/\u003e `GesturesType.hover` \u003cbr/\u003e `GesturesType.controller` |  \n| enableOutsideAreaMove | `bool` | `true` | 可以继续在区域外触发倾斜。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.touch` \u003cbr/\u003e `GesturesType.controller` |  \n| moveDuration | `Duration` | `Duration(milliseconds: 100)` | 手势移动时的动画持续时间。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.touch` \u003cbr/\u003e `GesturesType.hover` |  \n| leaveDuration | `Duration` | `Duration(milliseconds: 300)` | 手势离开后的动画持续时间。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.touch` \u003cbr/\u003e `GesturesType.hover` |  \n| moveCurve | `Curve` | `Curves.linear` | 手势移动时的动画曲线。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.touch` \u003cbr/\u003e `GesturesType.hover` |  \n| leaveCurve | `Curve` | `Curves.linear` | 手势离开后的动画曲线。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.touch` \u003cbr/\u003e `GesturesType.hover` |  \n| controllerMoveDuration | `Duration` | `Duration(milliseconds: 100)` | controller 手势移动时的动画持续时间。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.controller` |  \n| controllerLeaveDuration | `Duration` | `Duration(milliseconds: 300)` | controller 手势离开后的动画持续时间。 \u003cbr/\u003e 仅以下手势生效： \u003cbr/\u003e `GesturesType.controller` |  \n\n\n### LightShadowMode 📄\n\n| 枚举值 | 描述 |  \n| --- | --- |\n| LightShadowMode.base | `[无性能风险]` \u003cbr/\u003e 仅对 `Tilt.child` 使用普通阴影效果，无性能损耗。 |  \n| LightShadowMode.projector | `[有性能风险]` \u003cbr/\u003e 对整个 `Tilt` widget 使用类似投影仪效果的阴影，\u003cbr/\u003e 会显示与 widget 非透明部分完全一致的阴影。 \u003cbr/\u003e 建议在以下场景使用：\u003cbr/\u003e - 仅图片 \u003cbr/\u003e - 无数据状态 \u003cbr/\u003e - 无 Hero 标签 |  \n\n\n### LightConfig 📄  \n\n| 参数名 | 类型 | 默认值 | 描述 |  \n| --- | --- | --- | --- |\n| disable | `bool` | `false` | 仅禁用光照效果。 |  \n| color | `Color` | `Color(0xFFFFFFFF)` | 光照颜色。 |  \n| minIntensity | `double` | `0.0` | 颜色最小不透明度，也是初始不透明度。 |  \n| maxIntensity | `double` | `0.5` | 颜色最大不透明度，跟随倾斜最大进度。 |  \n| spreadFactor | `double` | `4.0` | 光源扩散系数，相对于当前 widget 尺寸。 |  \n| projectorScale | `double` | `1.1` | 光照区域尺寸比例。 \u003cbr/\u003e 仅以下模式生效：\u003cbr/\u003e `[LightShadowMode.projector]` |  \n| direction | `LightDirection` | `LightDirection.around` | 光照方向。 \u003cbr/\u003e 影响：\u003cbr/\u003e `[ShadowConfig.direction]`（配置后不受影响）。 |  \n| enableReverse | `bool` | `false` | 反转光照方向。 \u003cbr/\u003e 影响：\u003cbr/\u003e `[ShadowConfig.direction]`（配置后不受影响）。 \u003cbr/\u003e `[ShadowConfig.enableReverse]`（配置后不受影响）。 |  \n\n\n### ShadowConfig 📄  \n\n| 参数名 | 类型 | 默认值 | 描述 |  \n| --- | --- | --- | --- |\n| disable | `bool` | `false` | 仅禁用阴影效果。 |  \n| color | `Color` | `Color(0xFF9E9E9E)` | 阴影颜色。 |  \n| minIntensity | `double` | `0.0` | 颜色最小不透明度，也是初始不透明度。 |  \n| maxIntensity | `double` | `0.5` | 颜色最大不透明度，跟随倾斜最大进度。 |  \n| offsetInitial | `Offset` | `Offset(0.0, 0.0)` | 阴影偏移初始值。 \u003cbr/\u003e 例如：(0.0, 0.0) 中心 \u003cbr/\u003e (40.0, 40.0) 向左上角偏移 40。 |  \n| offsetFactor | `double` | `0.1` | 阴影偏移系数，相对于当前 widget 尺寸。 |  \n| spreadInitial | `double` | `0.0` | 阴影扩散半径初始值。\u003cbr/\u003e 仅以下模式生效：\u003cbr/\u003e `[LightShadowMode.base]` |  \n| spreadFactor | `double` | `0.0` | 阴影扩散半径系数，相对于当前 widget 尺寸。\u003cbr/\u003e 仅以下模式生效：\u003cbr/\u003e `[LightShadowMode.base]` |  \n| minBlurRadius | `double` | `10.0` | 最小阴影模糊半径，也是初始模糊半径。\u003cbr/\u003e 仅以下模式生效：\u003cbr/\u003e `[LightShadowMode.base]` |  \n| maxBlurRadius | `double` | `20.0` | 最大阴影模糊半径，跟随倾斜最大进度。\u003cbr/\u003e 仅以下模式生效：\u003cbr/\u003e `[LightShadowMode.base]` |  \n| projectorScaleFrom | `double` | `1.0` | 最小倾斜进度的阴影尺寸比例，也是初始尺寸比例。\u003cbr/\u003e 仅以下模式生效：\u003cbr/\u003e `[LightShadowMode.projector]` |  \n| projectorScaleTo | `double` | `1.0` | 最大倾斜进度的阴影尺寸比例。 \u003cbr/\u003e 仅以下模式生效：\u003cbr/\u003e `[LightShadowMode.projector]` |  \n| projectorBlurSigmaFrom | `double` | `5.0` | 最小倾斜进度的阴影模糊 Sigma，也是初始模糊 Sigma。\u003cbr/\u003e 仅以下模式生效：\u003cbr/\u003e `[LightShadowMode.projector]` |  \n| projectorBlurSigmaTo | `double` | `10.0` | 最大倾斜进度的阴影模糊 Sigma。\u003cbr/\u003e 仅以下模式生效：\u003cbr/\u003e `[LightShadowMode.projector]` |  \n| direction | `ShadowDirection?` | `null` | 阴影方向。 |  \n| enableReverse | `bool?` | `null` | 反转阴影方向。 |  \n\n\n## 贡献者 ✨  \n\n更多详情，请查看 [graphs/contributors](https://github.com/fluttercandies/flutter_tilt/graphs/contributors)。  \n欢迎任何形式的的贡献！ ([emoji key](https://allcontributors.org/docs/en/emoji-key))  \n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n        \u003ca href=\"https://github.com/AmosHuKe\"\u003e\n          \u003cimg src=\"https://avatars.githubusercontent.com/u/32262985?v=4\" width=\"100px\" alt=\"AmosHuKe\"/\u003e\n          \u003cbr /\u003e\n          \u003csub\u003e\u003cb\u003eAmosHuKe\u003c/b\u003e\u003c/sub\u003e\n          \u003cbr /\u003e\n          \u003ca href=\"https://github.com/fluttercandies/flutter_tilt/commits?author=AmosHuKe\" title=\"Code\"\u003e💻\u003c/a\u003e\u0026nbsp;\n          \u003ca href=\"https://github.com/fluttercandies/flutter_tilt/pulls?q=is:pr+reviewed-by:AmosHuKe\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u0026nbsp;\n          \u003ca href=\"https://github.com/fluttercandies/flutter_tilt/commits?author=AmosHuKe\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u0026nbsp;\n          \u003ca href=\"https://github.com/AmosHuKe/flutter_tilt_book\" title=\"Examples\"\u003e💡\u003c/a\u003e\u0026nbsp;\n          \u003ca href=\"https://github.com/fluttercandies/flutter_tilt/commits?author=AmosHuKe\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u0026nbsp;\n          \u003ca href=\"#maintenance\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u0026nbsp;\n          \u003ca href=\"#design\" title=\"Design\"\u003e🎨\u003c/a\u003e\u0026nbsp;\n          \u003ca href=\"#ideas\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u0026nbsp;\n          \u003ca href=\"#question\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e\u0026nbsp;\n          \u003cbr /\u003e\n          \u003cp align=\"left\"\u003e\n            \u003cul align=\"left\"\u003e\n              \u003cli\u003e\u003csub\u003eExample: \u003ca href=\"https://github.com/AmosHuKe/flutter_tilt_book\" title=\"Examples\"\u003eflutter_tilt_book\u003c/a\u003e\u003c/sub\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n          \u003c/p\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n        \u003ca href=\"https://github.com/LOCKEDFILE\"\u003e\n          \u003cimg src=\"https://avatars.githubusercontent.com/u/41106126?v=4\" width=\"100px\" alt=\"LOCKEDFILE\"/\u003e\n          \u003cbr /\u003e\n          \u003csub\u003e\u003cb\u003eLOCKEDFILE\u003c/b\u003e\u003c/sub\u003e\n          \u003cbr /\u003e\n          \u003ca href=\"https://github.com/fluttercandies/flutter_tilt/pulls?q=author:LOCKEDFILE\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\n        \u003ca href=\"https://github.com/aytunch\"\u003e\n          \u003cimg src=\"https://avatars.githubusercontent.com/u/6442915?v=4\" width=\"100px\" alt=\"aytunc\"/\u003e\n          \u003cbr /\u003e\n          \u003csub\u003e\u003cb\u003eaytunch\u003c/b\u003e\u003c/sub\u003e\n          \u003cbr /\u003e\n          \u003ca href=\"https://github.com/fluttercandies/flutter_tilt/issues?q=author:aytunch\" title=\"Ideas\"\u003e🤔\u003c/a\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctbody\u003e\n\u003c/table\u003e\n\n\n## 许可证 📄  \n\n[![MIT License](https://img.shields.io/badge/license-MIT-green)](https://github.com/fluttercandies/flutter_tilt/blob/main/LICENSE)  \n根据 MIT 许可证开源。\n\n© AmosHuKe\n\n[在线示例]: https://amoshuke.github.io/flutter_tilt_book\n[迁移指南]: https://github.com/fluttercandies/flutter_tilt/blob/main/guides/migration_guide.md\n[flutter_tilt/example]: https://github.com/fluttercandies/flutter_tilt/tree/main/example\n[传感器兼容]: #传感器兼容-\n[Tilt widget 参数]: #tilt-widget-参数-\n[TiltParallax widget 参数]: #tiltparallax-widget-参数-\n[ChildLayout]: #childlayout-\n[StreamController\u0026lt;TiltStreamModel\u0026gt;]: #streamcontrollertiltstreammodel-\n[TiltConfig]: #tiltconfig-\n[LightShadowMode]: #lightshadowmode-\n[LightConfig]: #lightconfig-\n[ShadowConfig]: #shadowconfig-\n[Gyroscope Browser compatibility]: https://developer.mozilla.org/en-US/docs/Web/API/Sensor_APIs#api.gyroscope\n[Sensor API - Gyroscope]: https://developer.mozilla.org/en-US/docs/Web/API/Gyroscope\n\u003c!-- [DeviceMotionEvent]: https://developer.mozilla.org/zh-CN/docs/Web/API/DeviceMotionEvent --\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercandies%2Fflutter_tilt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffluttercandies%2Fflutter_tilt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercandies%2Fflutter_tilt/lists"}