栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用颤动中的按钮手势旋转文本或图像

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用颤动中的按钮手势旋转文本或图像

在这里,如果您用一个圆圈的手势(用一根手指)做手势,它将旋转。

源代码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,),         ),       );     },   ), )          ],        ),      ),    );  }}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/391288.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号