web-dev-qa-db-ja.com

DartのTextField onChangeのデバウンス方法

Firestoreデータベースのデータが変更されたときに更新するTextFieldを開発しようとしています。動作しているようですが、onChangeイベントが複数回発生するのを防ぐ必要があります。

JSではlodash _debounce（）を使用しますが、Dartではその方法がわかりません。いくつかのデバウンスライブラリを読んだことがありますが、それらがどのように機能するのかわかりません。

それは私のコードであり、テストに過ぎないため、何かがおかしいかもしれません。

import 'package:flutter/material.Dart';
import 'package:cloud_firestore/cloud_firestore.Dart';


class ClientePage extends StatefulWidget {

  String idCliente;


  ClientePage(this.idCliente);

  @override
  _ClientePageState createState() => new _ClientePageState();


}

class _ClientePageState extends State<ClientePage> {

  TextEditingController nomeTextController = new TextEditingController();


  void initState() {
    super.initState();

    // Start listening to changes 
    nomeTextController.addListener(((){
        _updateNomeCliente(); // <- Prevent this function from run multiple times
    }));
  }


  _updateNomeCliente = (){

    print("Aggiorno nome cliente");
    Firestore.instance.collection('clienti').document(widget.idCliente).setData( {
      "nome" : nomeTextController.text
    }, merge: true);

  }



  @override
  Widget build(BuildContext context) {

    return new StreamBuilder<DocumentSnapshot>(
      stream: Firestore.instance.collection('clienti').document(widget.idCliente).snapshots(),
      builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
        if (!snapshot.hasData) return new Text('Loading...');

        nomeTextController.text = snapshot.data['nome'];


        return new DefaultTabController(
          length: 3,
          child: new Scaffold(
            body: new TabBarView(
              children: <Widget>[
                new Column(
                  children: <Widget>[
                    new Padding(
                      padding: new EdgeInsets.symmetric(
                        vertical : 20.00
                      ),
                      child: new Container(
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            new Text(snapshot.data['cognome']),
                            new Text(snapshot.data['ragionesociale']),
                          ],
                        ),
                      ),
                    ),
                    new Expanded(
                      child: new Container(
                        decoration: new BoxDecoration(
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(20.00),
                            topRight: Radius.circular(20.00)
                          ),
                          color: Colors.brown,
                        ),
                        child: new ListView(
                          children: <Widget>[
                            new ListTile(
                              title: new TextField(
                                style: new TextStyle(
                                  color: Colors.white70
                                ),
                                controller: nomeTextController,
                                decoration: new InputDecoration(labelText: "Nome")
                              ),
                            )
                          ]
                        )
                      ),
                    )
                  ],
                ),
                new Text("La seconda pagina"),
                new Text("La terza pagina"),
              ]
            ),
            appBar: new AppBar(
              title: Text(snapshot.data['nome'] + ' oh ' + snapshot.data['cognome']),
              bottom: new TabBar(          
                tabs: <Widget>[
                  new Tab(text: "Informazioni"),  // 1st Tab
                  new Tab(text: "Schede cliente"), // 2nd Tab
                  new Tab(text: "Altro"), // 3rd Tab
                ],
              ),
            ),
          )
        );

      },
    );

    print("Il widget id è");
    print(widget.idCliente);

  }
}
dartflutterdebouncing
15
DxW

ウィジェットの状態で、コントローラーとタイマーを宣言します。

final _searchQuery = new TextEditingController();
Timer _debounce;

リスナーメソッドを追加します。

_onSearchChanged() {
    if (_debounce?.isActive ?? false) _debounce.cancel();
    _debounce = Timer(const Duration(milliseconds: 500), () {
        // do something with _searchQuery.text
    });
}

メソッドをコントローラーにフックおよびフック解除します。

@override
void initState() {
    super.initState();
    _searchQuery.addListener(_onSearchChanged);
}

@override
void dispose() {
    _searchQuery.removeListener(_onSearchChanged);
    _searchQuery.dispose();
    super.dispose();
}

ビルドツリーで、コントローラーをTextFieldにバインドします。

child: TextField(
        controller: _searchQuery,
        // ...
    )
33
Jannie Theunissen

Debouncerを使用してTimerクラスを作成できます

import 'package:flutter/foundation.Dart';
import 'Dart:async';

class Debouncer {
  final int milliseconds;
  VoidCallback action;
  Timer _timer;

  Debouncer({ this.milliseconds });

  run(VoidCallback action) {
    if (_timer != null) {
      _timer.cancel();
    }

    _timer = Timer(Duration(milliseconds: milliseconds), action);
  }
}

宣言する

final _debouncer = Debouncer(milliseconds: 500);

そしてそれを引き起こす

onTextChange(String text) {
  _debouncer.run(() => print(text));
}
15
onmyway133

Rxdart libからBehaviorSubjectを使用するのが良い解決策です。前のX秒以内に発生した変更は無視されます。

final searchOnChange = new BehaviorSubject<String>();
...
TextField(onChanged: _search)
...

void _search(String queryString) {
  searchOnChange.add(queryString);
}   

void initState() {    
  searchOnChange.debounce(Duration(seconds: 1)).listen((queryString) { 
  >> request data from your API
  });
}
3
rickdroio

Rxdartパッケージを使用して、ストリームを使用してObservableを作成し、要件に従ってそれをデバウンスできます。これは link で始めるのに役立つと思います。

2
bhanu

Future.delayedメソッドを使用して簡単なデバウンスを実装できます

bool debounceActive = false;
...

//listener method
onTextChange(String text) async {
  if(debounceActive) return null;
  debounceActive = true;
  await Future.delayed(Duration(milliSeconds:700));
  debounceActive = false;
  // hit your api here
}
0
HasilT

他の人が示唆しているように、カスタムデバウンサークラスの実装はそれほど難しくありません。 EasyDebounce などのFlutterプラグインを使用することもできます。

あなたの場合、次のように使用します：

import 'package:easy_debounce/easy_debounce.Dart';

...

// Start listening to changes 
nomeTextController.addListener(((){
    EasyDebounce.debounce(
        '_updatenomecliente',        // <-- An ID for this debounce operation
        Duration(milliseconds: 500), // <-- Adjust Duration to fit your needs
        () => _updateNomeCliente()
    ); 
}));

完全開示：私は EasyDebounce 。の著者です

0
Magnus W