在颤动中使用按钮手势旋转文本或图像 [英] Rotate text or image using button gesture in flutter
本文介绍了在颤动中使用按钮手势旋转文本或图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
现在，当我做出 360 度手势时，图像仅从左到右平滑旋转.
Now, the image is smoothly rotating only from left to right when I make a gesture of 360 degree.
要求的结果:
- 当我们做出 360 度手势时，应该从右向左旋转.
- 完成:当我们做出 360 度手势时，应该从右向左旋转.
- 一旦我们在某个点开始从左向右旋转，然后又从右向左旋转，它应该从做出手势的任一方向旋转.
- Should rotate from right to left when we make a gesture of 360 degree.
- Done: Should rotate from right to left when we make a gesture of 360 degree.
- Once we start rotating from left to right at some point and again back to right to left it should rotate from either direction from which the gesture is made.
import 'dart:math';
import 'package:flutter/material.dart';
class RotateImage extends StatefulWidget {
RotateImage({Key key}) : super(key: key); // changed
@override
_RotateImageState createState() => _RotateImageState();
}
class _RotateImageState extends State<RotateImage> {
double finalAngle = 0.0;
@override
Widget build(BuildContext context) {
return _defaultApp(context);
}
_defaultApp(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Single finger Rotate text'), // changed
),
body: Center(
child: Column(
children: <Widget>[
Container(
color: Colors.red,
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(top: 50),
child: Transform.rotate(
angle: finalAngle,
origin: Offset(0, 0),
child: Container(
height: 100.0,
width: 100.0,
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
),
),
GestureDetector(
onPanStart: (detials) {},
onPanEnd: (detials) {},
onPanUpdate: (details) {
setState(
() {
finalAngle += details.delta.distance * -pi / 180;
},
);
},
child: Container(
margin: EdgeInsets.only(top: 30),
color: Colors.black54,
width: 50,
height: 50,
child: Icon(
Icons.rotate_left,
color: Colors.white,
),
),
)
],
),
),
);
}
}
推荐答案
这里如果你在图标周围做手势(用一根手指)，它会旋转.
Here if you do gesture (with one finger) in circle around the icon, it will rotate.
源代码 1:(此处角度基于手指距GestureDetector中心的位置)
Source Code 1: (Here the angle is based on finger position from the center of GestureDetector)
演示: DartPad,
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: RotateText(),
);
}
}
class RotateText extends StatefulWidget {
RotateText({Key key}) : super(key: key); // changed
@override
_RotateTextState createState() => _RotateTextState();
}
class _RotateTextState extends State<RotateText> {
double finalAngle = 0.0;
@override
Widget build(BuildContext context) {
return _defaultApp(context);
}
_defaultApp(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Single finger Rotate text'), // changed
),
body: Center(
child: Column(
children: <Widget>[
Container(
color: Colors.red,
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(top: 50),
child: Transform.rotate(
angle: finalAngle,
child: Container(
height: 100.0,
width: 100.0,
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
),
),
Container(
width: 250,
height: 250,
color: Colors.grey,
margin: EdgeInsets.all(30.0),
child: LayoutBuilder(
builder: (context, constraints) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onPanUpdate: (details) {
Offset centerOfGestureDetector = Offset(
constraints.maxWidth / 2, constraints.maxHeight / 2);
final touchPositionFromCenter =
details.localPosition - centerOfGestureDetector;
print(touchPositionFromCenter.direction * 180/pi);
setState(
() {
finalAngle = touchPositionFromCenter.direction;
},
);
},
child: Transform.rotate(
angle: finalAngle,
child: Icon(
Icons.arrow_forward,
color: Colors.white,
size: 200,
),
),
);
},
),
)
],
),
),
);
}
}
源代码 2:(这里的角度是持续更新在每个onPanStart)
演示: DartPad,
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: RotateText(),
);
}
}
class RotateText extends StatefulWidget {
RotateText({Key key}) : super(key: key); // changed
@override
_RotateTextState createState() => _RotateTextState();
}
class _RotateTextState extends State<RotateText> {
double finalAngle = 0.0;
double offsetAngle = 0.0;
@override
Widget build(BuildContext context) {
return _defaultApp(context);
}
_defaultApp(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Single finger Rotate text'), // changed
),
body: Center(
child: Column(
children: <Widget>[
Container(
color: Colors.red,
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(top: 50),
child: Transform.rotate(
angle: finalAngle,
child: Container(
height: 100.0,
width: 100.0,
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
),
),
Container(
width: 250,
height: 250,
color: Colors.grey,
margin: EdgeInsets.all(30.0),
child: LayoutBuilder(
builder: (context, constraints) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onPanStart: (details) {
Offset centerOfGestureDetector = Offset(
constraints.maxWidth / 2, constraints.maxHeight / 2);
final touchPositionFromCenter =
details.localPosition - centerOfGestureDetector;
offsetAngle =
touchPositionFromCenter.direction - finalAngle;
},
onPanUpdate: (details) {
Offset centerOfGestureDetector = Offset(
constraints.maxWidth / 2, constraints.maxHeight / 2);
final touchPositionFromCenter =
details.localPosition - centerOfGestureDetector;
setState(() {
finalAngle =
touchPositionFromCenter.direction - offsetAngle;
});
},
child: Transform.rotate(
angle: finalAngle,
child: Icon(
Icons.settings,
color: Colors.white,
size: 200.0,
),
),
);
},
),
)
],
),
),
);
}
}
这篇关于在颤动中使用按钮手势旋转文本或图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
