Flutter旋转组件插件widget_spin的使用
Flutter旋转组件插件widget_spin的使用
Widget Spin 是一个 Flutter 包，它使你能够轻松地为组件添加沿 X、Y 或 Z 轴旋转的动画效果。你可以自定义旋转的持续时间、轴向等。非常适合为你的用户界面添加动态效果和交互性！
预览
如何使用？
WidgetSpin(
repeat: true,
child: Container(
width: 200,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.yellow,
),
child: Text('This is a test'),
),
);
参数
WidgetSpin(
controller: _animationController,
spinAxis: SpinAxis.x,
alignment: Alignment.topCenter,
duration: Duration(seconds: 10),
curve: Curves.elasticIn,
spinCount: 2,
is3D: true,
child: Container(
width: 200,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.deepPurple,
),
child: Text('This is a test 2'),
),
),
示例
以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 WidgetSpin 组件。
import 'package:flutter/material.dart';
import 'package:widget_spin/widget_spin.dart';
void main() {
runApp(const WidgetSpinExample());
}
class WidgetSpinExample extends StatefulWidget {
const WidgetSpinExample({super.key});
[@override](/user/override)
State<WidgetSpinExample> createState() => _WidgetSpinExampleState();
}
class _WidgetSpinExampleState extends State<WidgetSpinExample>
with SingleTickerProviderStateMixin {
late final AnimationController _animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 6),
)..repeat();
[@override](/user/override)
void dispose() {
_animationController.dispose();
super.dispose();
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
// 第一个旋转容器
WidgetSpin(
duration: Duration(seconds: 60),
child: Container(
width: 200,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.yellow,
),
child: Text('This is a test'),
),
),
// 第二个旋转容器
WidgetSpin(
controller: _animationController,
spinAxis: SpinAxis.x,
is3D: true,
child: Container(
width: 200,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('This is a test 2'),
),
),
// 第三个旋转容器
WidgetSpin(
controller: _animationController,
spinAxis: SpinAxis.x,
alignment: Alignment.topCenter,
duration: Duration(seconds: 10),
curve: Curves.easeInToLinear,
spinCount: 2,
is3D: true,
child: Container(
width: 200,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.deepPurple,
),
child: Text('This is a test 3'),
),
),
// 第四个旋转容器
WidgetSpin(
spinCount: 10,
repeat: true,
curve: Curves.elasticIn,
duration: Duration(seconds: 4),
spinAxis: SpinAxis.z,
alignment: Alignment.center,
child: Container(
width: 150,
height: 150,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
),
child: Text('This is a test 4'),
),
),
],
),
),
),
);
}
}
更多关于Flutter旋转组件插件widget_spin的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter旋转组件插件widget_spin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
widget_spin 是一个 Flutter 插件，用于在应用中创建旋转动画效果。它允许你将任何小部件包裹在一个旋转动画中，使其可以围绕中心点旋转。下面是 widget_spin 插件的基本使用方法。
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 widget_spin 插件的依赖：
dependencies:
flutter:
sdk: flutter
widget_spin: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
2. 导入插件
在你的 Dart 文件中导入 widget_spin 插件：
import 'package:widget_spin/widget_spin.dart';
3. 使用 WidgetSpin
WidgetSpin 是一个用于创建旋转动画的小部件。你可以将任何小部件包裹在 WidgetSpin 中，使其旋转。
以下是一个简单的示例，展示如何使用 WidgetSpin 来旋转一个图标：
import 'package:flutter/material.dart';
import 'package:widget_spin/widget_spin.dart';
class SpinDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('WidgetSpin Demo'),
),
body: Center(
child: WidgetSpin(
spin: true, // 是否旋转
speed: 1.0, // 旋转速度，1.0 表示每秒转一圈
child: Icon(
Icons.refresh,
size: 100.0,
color: Colors.blue,
),
),
),
);
}
}
void main() => runApp(MaterialApp(
home: SpinDemo(),
));
4. 参数说明
spin: 布尔值，控制是否启用旋转动画。默认值为true。speed: 旋转速度，表示每秒旋转的圈数。默认值为1.0。child: 要旋转的子小部件。
5. 控制旋转
你可以通过设置 spin 参数来控制旋转的开始和停止。例如，你可以在用户点击按钮时切换旋转状态：
bool isSpinning = true;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('WidgetSpin Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
WidgetSpin(
spin: isSpinning,
speed: 1.0,
child: Icon(
Icons.refresh,
size: 100.0,
color: Colors.blue,
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
setState(() {
isSpinning = !isSpinning;
});
},
child: Text(isSpinning ? 'Stop' : 'Start'),
),
],
),
),
);
}