使用颤动中的按钮手势旋转文本或图像 [英] 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上继续更新 )
Source Code 2: (Here the angle is persisted and will continue update on every 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屋！
查看全文
