Flutter插件xl的使用_XL 是一个Flutter插件，提供了一个名为 XL 的堆栈小部件，用于实现基于加速度计和触摸/鼠标输入的视差动画
Flutter插件xl的使用_XL 是一个Flutter插件，提供了一个名为 XL 的堆栈小部件，用于实现基于加速度计和触摸/鼠标输入的视差动画
1. 插件简介
XL 是一个Flutter插件，提供了一个名为 XL 的堆栈小部件，用于实现基于加速度计和触摸/鼠标输入的视差动画。这些动画可以平滑地变换子组件，根据三维空间定义进行旋转、缩放和位移。插件支持触控和陀螺仪数据，允许开发者设计简单或复杂的交互界面。
2. 使用示例
2.1 基本用法
以下是一个简单的 XL 示例，展示了如何使用 XLayer 和 PLayer 来创建视差效果。XLayer 主要响应传感器数据（如加速度计），而 PLayer 主要响应指针数据（如触摸或鼠标）。
import 'package:flutter/material.dart';
import 'package:xl/xl.dart';
void main() => runApp(const Example());
class Example extends StatelessWidget {
const Example({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: XL(
layers: [
XLayer(
xRotation: 1.0,
yRotation: 1.0,
xOffset: 200,
yOffset: 200,
child: Center(
child: Container(
width: 250,
height: 250,
color: Colors.black,
),
),
),
XLayer(
xRotation: 1.5,
yRotation: 1.5,
xOffset: 300,
yOffset: 300,
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
),
],
),
),
);
}
}
2.2 高级用法
在更复杂的场景中，您可以混合使用 XLayer 和 PLayer，并通过 sharesPointer 和 sharesSensors 标志来控制它们对不同输入数据的响应。以下是一个示例，展示了如何通过不同的配置来处理输入数据：
import 'package:flutter/material.dart';
import 'package:xl/xl.dart';
void main() => runApp(const ExampleSharingInput());
class ExampleSharingInput extends StatelessWidget {
const ExampleSharingInput({Key? key}) : super(key: key);
static const _layers = <PLayer>[
XLayer(
dimensionalOffset: 0.002,
xRotation: 0.75,
yRotation: 0.5,
zRotationByX: 0.5,
xOffset: 60,
yOffset: 60,
child: Center(
child: SizedBox(
width: 230,
height: 350,
child: DecoratedBox(decoration: BoxDecoration(color: Colors.blue)),
),
),
),
PLayer(
dimensionalOffset: 0.0015,
xRotation: 1,
yRotation: 1,
zRotation: 1,
xOffset: 125,
yOffset: 125,
child: Center(
child: SizedBox(
width: 150,
height: 200,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.red,
boxShadow: [BoxShadow(blurRadius: 20, spreadRadius: -6)],
),
),
),
),
),
XLayer(
child: Center(
child: SizedBox(
width: 75,
height: 75,
child: DecoratedBox(decoration: BoxDecoration(color: Colors.black)),
),
),
)
];
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: Row(
children: [
const Expanded(
child: XL(
sharesPointer: true,
sharesSensors: true,
layers: _layers,
),
),
const Expanded(
child: XL(
sharesPointer: true, // default
sharesSensors: false, // default
layers: _layers,
),
),
],
),
),
Expanded(
child: Row(
children: [
const Expanded(
child: XL(
sharesPointer: false,
sharesSensors: true,
layers: _layers,
),
),
const Expanded(
child: XL(
sharesPointer: false,
sharesSensors: false,
layers: _layers,
),
),
],
),
),
],
),
);
}
}
2.3 自动化层
AutoXL 是 XL 的一个便捷版本，它可以根据提供的子组件自动生成具有渐进深度的视差效果。以下是一个使用 AutoXL 的示例：
import 'package:flutter/material.dart';
import 'package:xl/xl.dart';
void main() => runApp(const Automation());
class Automation extends StatelessWidget {
const Automation({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.amber.shade100,
body: Center(
child: Container(
width: 400,
height: 400,
color: Colors.cyan.shade200,
child: AutoXL.pane(
layers: [
Center(
child: Container(
width: 250,
height: 250,
color: Colors.purple.shade300,
),
),
Center(
child: Container(
width: 175,
height: 175,
color: Colors.pink.shade300,
),
),
],
),
),
),
),
);
}
}
2.4 星空效果
ExampleStarfield 是一个更复杂的示例，展示了如何使用 XL 创建一个基于加速度计的星空效果。用户可以通过触摸屏幕或倾斜设备来查看不同的视差效果。
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:xl/xl.dart';
void main() => runApp(const ExampleStarfield());
class ExampleStarfield extends StatefulWidget {
const ExampleStarfield({Key? key}) : super(key: key);
[@override](/user/override)
_ExampleStarfieldState createState() => _ExampleStarfieldState();
}
class _ExampleStarfieldState extends State<ExampleStarfield> {
[@override](/user/override)
Widget build(BuildContext context) {
const _duration = Duration(milliseconds: 250);
const _ms = Duration(milliseconds: 1);
final _starfield = <XL>[];
final _colors = List.from(Colors.primaries)..shuffle();
final _alignments = [
Alignment.bottomCenter,
Alignment.bottomLeft,
Alignment.bottomRight,
Alignment.center,
Alignment.centerLeft,
Alignment.centerRight,
Alignment.topCenter,
Alignment.topLeft,
Alignment.topRight,
]..shuffle();
for (var xl = 0; xl < 5; xl++) {
final duration = _duration + _ms * Random().nextInt(2500);
final d = Random().nextDouble();
_starfield.add(
XL(
sharesPointer: false,
sharesSensors: true,
duration: duration,
dragging: Dragging(duration: duration * 2), // FIXME ✝
normalization: const Normalization(delay: Duration(milliseconds: 2500)),
layers: [
for (var layer = 0; layer < 100; layer++)
XLayer(
dimensionalOffset: 0.05,
xRotation: 0.5,
yRotation: 0.5,
zRotationByX: 20,
xOffset: 0,
yOffset: 0,
child: Align(
alignment: (_alignments..shuffle())[0] +
Alignment(Random().nextDouble(), Random().nextDouble()) -
Alignment(Random().nextDouble(), Random().nextDouble()),
child: Container(
width: 1 + d,
height: 1 + d,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: (_colors..shuffle())[0],
),
),
),
)
],
),
);
}
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
systemNavigationBarDividerColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.light,
),
);
return Scaffold(
extendBody: true,
resizeToAvoidBottomInset: false,
backgroundColor: Colors.black,
floatingActionButton: FloatingActionButton(onPressed: () => setState(() {})),
body: InteractiveViewer(
boundaryMargin: const EdgeInsets.all(double.infinity),
minScale: 0.01,
maxScale: 12.5,
child: Stack(children: [for (final xl in _starfield) xl]),
),
);
}
}更多关于Flutter插件xl的使用_XL 是一个Flutter插件，提供了一个名为 XL 的堆栈小部件，用于实现基于加速度计和触摸/鼠标输入的视差动画的实战教程也可以访问 https://www.itying.com/category-92-b0.html
