Flutter:尝试撸一个具有惯性跟阻力的旋转控件或用传感器控制其旋转

背景

一直都想写一个可以转动的 Widget,并且可以近似的模拟生活中的惯性跟阻力,因为设计到一些数学公式,作者还去请教了我的高中老师,最后学了点传感器,就直接外加个可选择传感器控制了

效果

实现方法

逻辑部分比较复杂,作者写了好几天,最后干脆直接写了一个 Dart Packages 上传到了 Pub,里面有大量的注释,代码还很不简化体谅一下,欢迎体验

将其添加到包的 pubspec.yaml 文件中:

1
2
dependencies:
rotated_view: ^1.0.1

然后导入包

1
import 'package:rotated_view/rotated_view.dart';

代码部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:rotated_view/rotated_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
StreamSubscription _subscription;

@override
void initState() {
super.initState();
}

@override
void dispose() {
if (_subscription != null) {
_subscription.cancel();
}
super.dispose();
}

@override
Widget build(BuildContext context) {
return MaterialApp(
color: Colors.black,
home: Scaffold(
body: Center(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(0, 100, 0, 0),
),
Container(
width: 400,
height: 400,
child: RotatedView(
child: Image.asset("images/launcher_background.png"),
usesensor: false,
issame: false,
haveinertia: true,
),
),
Text(""),
],
)),
),
);
}
}

我的 FlutterGithub

Flutter:尝试撸一个具有惯性跟阻力的旋转控件或用传感器控制其旋转

http://blog.nightmare.press/2019/01/13/Flutter:尝试撸一个具有惯性跟阻力的旋转控件或用传感器控制其旋转/

作者

梦魇兽

发布于

2019-01-13

更新于

2023-03-11

许可协议

评论