[英]How to create triple click button in flutter
How can I implement a triple-click button in flutter?如何在颤振中实现三次单击按钮?
On triple-click, the button will store an entry in Firebase database.在三次单击时,该按钮将在 Firebase 数据库中存储一个条目。
Its pretty easy.它很容易。 You can use a GestureDetector()
to check for the number of taps then you can provide your logic if there are 3 taps.您可以使用GestureDetector()
检查点击次数,如果有 3 次点击,您可以提供逻辑。
GestureDetector(
onTap: () {
int now = DateTime.now().millisecondsSinceEpoch;
if (now - lastTap < 1000) {
print("Consecutive tap");
consecutiveTaps ++;
print("taps = " + consecutiveTaps.toString());
if (consecutiveTaps == 3){
// Do something
}
} else {
consecutiveTaps = 0;
}
lastTap = now;
},
child: ...
)
Implementing "triple click" button in flutter might not be possible.在颤动中实现“三次单击”按钮可能是不可能的。 But, if you really want to make it work ASAP then a simple method could be to maintain a counter for the number of clicks done.但是,如果你真的想让它尽快工作,那么一个简单的方法可能是维护一个完成点击次数的计数器。 Once the count reaches 3, you need to add your entry to Firestore.一旦计数达到 3,您需要将您的条目添加到 Firestore。
I have modified the code from the counter app boilerplate of flutter.我已经修改了颤振计数器应用程序样板中的代码。
Hope you have cloud_firestore in your pubspec.yaml file.希望您的 pubspec.yaml 文件中有 cloud_firestore。 If not then add it and put the services.json as well in the app folder of android or respective directory of ios.如果没有,则添加它并将 services.json 也放在 android 的 app 文件夹或 ios 的相应目录中。
cloud_firestore: ^0.13.4+1
So, now you can have a look at the code that I am using.所以,现在你可以看看我正在使用的代码。
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
_incrementCounter() {
setState(() {
_counter++;
});
if (_counter == 3) {
Firestore.instance
.collection('/sampleData')
.add({'data': "data"}).catchError((e) {
print(e);
});
setState(() {
_counter = 0;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
I have edited the _incrementCounter function.我已经编辑了 _incrementCounter 函数。 I added a conditional statement to check the _counter if it is 3 or not.我添加了一个条件语句来检查 _counter 是否为 3。 Then, I am adding the Firestore entry.然后,我添加 Firestore 条目。 Later on, the most important bit is to set the _counter as 0 so that the next time the user presses the button 3 times, then the code will work accordingly.稍后,最重要的一点是将 _counter 设置为 0,以便下次用户按下按钮 3 次时,代码将相应地工作。 You can customize it according to your needs.您可以根据需要对其进行自定义。
But remember, triple clicks have not been yet invented in flutter and this is just a work-around solution and don't use it for Real-life Development applications as this would be a very bad practice.但是请记住,在 Flutter 中还没有发明三次点击,这只是一个变通的解决方案,不要将它用于现实生活中的开发应用程序,因为这将是一个非常糟糕的做法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.