当前位置:网站首页>[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 )
边栏推荐
- Using emqx cloud to realize one machine one secret verification of IOT devices
- :last-child 不生效解决
- Sql service intercepts string
- 如何防止你的 jar 被反编译?
- MySQL installation failed -gpg verification failed
- D4: unpaired image defogging, self enhancement method based on density and depth decomposition (CVPR 2022)
- pyqt圖片解碼 編碼後加載圖片
- Kubernetes resource object introduction and common commands (4)
- MySQL learning record (7)
- The web version of xshell supports FTP connection and SFTP connection
猜你喜欢
Etcd Raft 协议
C language, to achieve three chess games
A specially designed loss is used to deal with data sets with unbalanced categories
Ransack combined condition search implementation
Redis分布式锁故障,我忍不住想爆粗...
Riding the wind of "cloud native" and stepping on the wave of "digitalization", new programmer 003 starts pre-sale
[shutter] shutter layout component (physicalmodel component)
D4:非成对图像去雾,基于密度与深度分解的自增强方法(CVPR 2022)
Lightgbm principle and its application in astronomical data
GEE:(二)对影像进行重采样
随机推荐
About test cases
How to test the process of restoring backup files?
pip安裝whl文件報錯:ERROR: ... is not a supported wheel on this platform
Chargement de l'image pyqt après décodage et codage de l'image
一周生活
ServiceMesh主要解决的三大痛點
【C 题集】of Ⅴ
Find objects you can't see! Nankai & Wuhan University & eth proposed sinet for camouflage target detection, and the code has been open source
100 important knowledge points that SQL must master: using cursors
pyqt图片解码 编码后加载图片
Basic knowledge of tree and binary tree (detailed illustration)
Image segmentation using pixellib
Lightgbm principle and its application in astronomical data
SQL必需掌握的100个重要知识点:使用游标
如何访问kubernetes API?
暑期第一周总结
MySQL installation failed -gpg verification failed
图像基础概念与YUV/RGB深入理解
100 important knowledge points that SQL must master: management transaction processing
#include<>和#include“”的区别