当前位置:网站首页>[shutter] shutter gesture interaction (small ball following the movement of fingers)
[shutter] shutter gesture interaction (small ball following the movement of fingers)
2022-07-02 22:05:00 【Programmer community】
List of articles
- One 、Flutter gesture - A small ball that moves with your fingers
- 3、 ... and 、 Complete code example
- 3、 ... and 、 Related resources
One 、Flutter gesture - A small ball that moves with your fingers
Set the spherical coordinate variable : among currentX Is the distance from the left boundary , currentY Is the distance from the right boundary ;
/// Current ball x coordinate double currentX = 0; /// Current ball y coordinate double currentY = 0;
The position of the ball : The ball is in Stack In the frame layout Positioned Components , Its left and top The field value sets its coordinates , They correspond to each other currentX and currentY value ;
// Pellet Positioned( /// The current position left: currentX, top: currentY,)
Monitoring events : monitor GestureDetector Component's onPanUpdate event , The callback method is void Function(DragUpdateDetails details) Type of Method , It can be downloaded from DragUpdateDetails Get the current x , y The moving distance of , This distance needs to be accumulated with the previous distance , To get accurate coordinate values ;
Call... In the callback method setState Method , Modify member variables currentX and currentY , To modify Positioned Location of components , In order to achieve the goal of small ball movement ;
/// Gesture detection component child: GestureDetector( /// Mobile operating onPanUpdate: (e){
setState(() {
// e You can only get delta value , Need to accumulate step by step currentX += e.delta.dx; currentY += e.delta.dy; }); },)
Code example :
// Pellet Positioned( /// The current position left: currentX, top: currentY, /// Gesture detection component child: GestureDetector( /// Mobile operating onPanUpdate: (e){
setState(() {
// e You can only get delta value , Need to accumulate step by step currentX += e.delta.dx; currentY += e.delta.dy; }); }, // Black ball child: Container( width: 40, height: 40, decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.circular(20), ), ), ),),
3、 ... and 、 Complete code example
Complete code example :
import 'package:flutter/material.dart';class GesturePage extends StatefulWidget {
@override _GesturePageState createState() => _GesturePageState();}class _GesturePageState extends State<GesturePage> {
/// Current ball x coordinate double currentX = 0; /// Current ball y coordinate double currentY = 0; @override Widget build(BuildContext context) {
return MaterialApp( // Set the theme theme: ThemeData( primarySwatch: Colors.amber, ), // Set the body component home: Scaffold( // Set the title bar appBar: AppBar( title: Text(" Gesture detection "), // Back to button settings leading: GestureDetector( // Click the event callback function onTap: (){
// Exit the current interface Navigator.pop(context); }, // Back button icon child: Icon(Icons.arrow_back), ), ), // level / Tile components vertically body: FractionallySizedBox( // Tile horizontally widthFactor: 1, // Frame layout child: Stack( children: <Widget>[ // Vertical linear layout Column( children: <Widget>[ // Gesture detection component GestureDetector( // Click event onTap: (){
print(" double-click "); }, // Double-click the event onDoubleTap: (){
print(" double-click "); }, // Long press event , ()=> Method name ( parameter list ) You can call back an existing method onLongPress: () => _longPress(), // Click Cancel onTapCancel: (){
print(" Click Cancel "); }, // Click to press onTapDown: (e){
print(" Click to press "); }, // Click to lift onTapUp: (e){
print(" Click to lift "); }, // Action component of gesture detection , Monitor various gestures on the component child: Container( // The sub components are centered alignment: Alignment.center, // padding padding: EdgeInsets.all(100), // Background decoration decoration: BoxDecoration( color: Colors.green, ), child: Text( " Gesture detection ", style: TextStyle( fontSize: 50, color: Colors.red, ), ), ), ) ], ), // Pellet Positioned( /// The current position left: currentX, top: currentY, /// Gesture detection component child: GestureDetector( /// Mobile operating onPanUpdate: (e){
setState(() {
// e You can only get delta value , Need to accumulate step by step currentX += e.delta.dx; currentY += e.delta.dy; }); }, // Black ball child: Container( width: 40, height: 40, decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.circular(20), ), ), ),), ], ), ), ), ); } /// Long press event void _longPress(){
print(" Long press "); }}
Running effect :
3、 ... and 、 Related resources
Reference material :
- Flutter Official website : https://flutter.dev/
- Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
- official GitHub Address : https://github.com/flutter
- Flutter The Chinese community : https://flutter.cn/
- Flutter Practical tutorial : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart Chinese document : https://dart.cn/
- Dart Developer website : https://api.dart.dev/
- Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )
Blog source download :
GitHub Address : https://github.com/han1202012/flutter_cmd ( Keep updating with the progress of the blog , There may not be the source code of this blog )
Blog source snapshot : https://download.csdn.net/download/han1202012/15484718 ( The source code snapshot of this blog , You can find the source code of this blog )
边栏推荐
- Record the functions of sharing web pages on wechat, QQ and Weibo
- Read a doctor, the kind that studies cows! Dr. enrollment of livestock technology group of Leuven University, milk quality monitoring
- MySQL learning record (8)
- How do I access the kubernetes API?
- A specially designed loss is used to deal with data sets with unbalanced categories
- About test cases
- 【零基础一】Navicat下载链接
- *C语言期末课程设计*——通讯录管理系统(完整项目+源代码+详细注释)
- Find objects you can't see! Nankai & Wuhan University & eth proposed sinet for camouflage target detection, and the code has been open source
- [sword finger offer] 56 - I. the number of numbers in the array
猜你喜欢
《ActBERT》百度&悉尼科技大学提出ActBERT,学习全局局部视频文本表示,在五个视频-文本任务中有效!
Kubernetes resource object introduction and common commands (4)
[Yu Yue education] reference materials of analog electronic technology of Nanjing Institute of information technology
"New programmer 003" was officially launched, and the cloud native and digital practical experience of 30+ companies such as Huawei and Alibaba
Cardinality sorting (detailed illustration)
Redis分布式锁故障,我忍不住想爆粗...
[shutter] shutter layout component (wrap component | expanded component)
The difference between include < > and include ""
Landingsite eband B1 smoke test case
D4:非成对图像去雾,基于密度与深度分解的自增强方法(CVPR 2022)
随机推荐
Les trois principaux points de douleur traités par servicemesh
如何访问kubernetes API?
如何防止你的 jar 被反编译?
Daily book - low code you must understand in the era of digital transformation
Sql service intercepts string
Blue Bridge Cup Eliminate last one (bit operation, code completion)
Capacity expansion mechanism of ArrayList
"New programmer 003" was officially launched, and the cloud native and digital practical experience of 30+ companies such as Huawei and Alibaba
分享一下如何制作专业的手绘电子地图
使用 EMQX Cloud 实现物联网设备一机一密验证
Servicemesh mainly solves three pain points
: last child does not take effect
【leetcode】1380. Lucky number in matrix
C language, to achieve three chess games
Basic IO interface technology - microcomputer Chapter 7 Notes
Redis分布式锁故障,我忍不住想爆粗...
Introduction to the principle of geographical detector
The web version of xshell supports FTP connection and SFTP connection [detailed tutorial] continued from the previous article
ServiceMesh主要解决的三大痛点
The failure rate is as high as 80%. What should we do about digital transformation?