在这里,如果您用一个圆圈的手势(用一根手指)做手势,它将旋转。
源代码1: (这里的角度 基于手指位置从中心 的
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,), ), ); }, ), ) ], ), ), ); }}


