如何在Flutter中实现三击按钮?
单击三次后,该按钮会将条目存储在Firebase数据库中。
可能无法在颤动中实现“三次单击”按钮。但是,如果您真的想尽快使它工作,那么一种简单的方法可能是维护一个计数器以完成点击次数。一旦计数达到3,您需要将条目添加到Firestore。
我已经从flutter的计数器应用样板中修改了代码。 希望您的pubspec.yaml文件中有cloud_firestore。如果没有,则添加它,并将services.json也放入android的app文件夹或ios的相应目录中。
cloud_firestore: ^0.13.4+1
因此,现在您可以看一下我正在使用的代码。
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), ), ); } }
我已经编辑了_incrementCounter函数。我添加了一个条件语句来检查_counter是否为3。然后,我添加了Firestore条目。稍后,最重要的一点是将_counter设置为0,以便用户下次按下按钮3次时,代码将相应地工作。您可以根据需要自定义它。
但是请记住,尚未在颤动中发明出三次单击,这只是一种变通解决方案,请勿将其用于实际开发应用程序,因为这将是非常糟糕的做法。