Flutterで少し遅れてコードを実行する方法は?


123

ウィジェットを作成してから一定の遅延後に関数を実行したいのですが。Flutterでこれを行う慣用的な方法は何ですか?

私が達成しようとしていること:デフォルトのFlutterLogoウィジェットから始めて、styleしばらくしてからそのプロパティを変更したいと思います。

回答:


232

Future.delayedしばらくすると、を使用してコードを実行できます。例えば:

Future.delayed(const Duration(milliseconds: 500), () {

// Here you can write your code

  setState(() {
    // Here you can write your code for open new view
  });

});

setState関数では、アプリのUIに関連するコードを記述できます。たとえば、画面データの更新、ラベルテキストの変更などです。


警告を回避するには、setStateを呼び出す前にウィジェットがまだマウントされていることを確認してください
Tom

68

それを理解しました😎

class AnimatedFlutterLogo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _AnimatedFlutterLogoState();
}

class _AnimatedFlutterLogoState extends State<AnimatedFlutterLogo> {
  Timer _timer;
  FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly;

  _AnimatedFlutterLogoState() {
    _timer = new Timer(const Duration(milliseconds: 400), () {
      setState(() {
        _logoStyle = FlutterLogoStyle.horizontal;
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    _timer.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return new FlutterLogo(
      size: 200.0,
      textColor: Palette.white,
      style: _logoStyle,
    );
  }
}

1
どこTimerから輸入しましたか?
Lucem 2018

4
それを得たimport 'dart:async'
Lucem

1つの変更はtimer = ...initStateオーバーライドを配置することです。そうすればwidgetState<>コンストラクターで設定されているものにアクセスできます。
stevenspiel

私はこれが受け入れられるべき答えだとは思いません。なぜなら、それは遅延後にコードを実行するだけでなく、コードを繰り返すからです。遅延のためだけの@RahulSharmaソリューションの方がはるかに優れています。
アンドリス

Rahulの答えはタイマーをキャンセルしないので、ウィジェットが消えた場合、リークが発生しますか?(注:私は、私は数年前に一度これを使用し、フラッター開発者ではないよ!)
ブラッドリー・キャンベル

59

カウントダウン後にアクションをトリガーする

Timer(Duration(seconds: 3), () {
  print("Yeah, this line is printed after 3 seconds");
});

アクションを繰り返す

Timer.periodic(Duration(seconds: 5), (timer) {
  print(DateTime.now());
});

タイマーをすぐにトリガーする

Timer(Duration(seconds: 0), () {
  print("Yeah, this line is printed immediately");
});

10

上記の回答に説明を追加するだけです

タイマー機能は、以下の期間でも機能します。

const Duration(
      {int days = 0,
      int hours = 0,
      int minutes = 0,
      int seconds = 0,
      int milliseconds = 0,
      int microseconds = 0})

例:

  Timer(Duration(seconds: 3), () {
    print("print after every 3 seconds");
  });

7

(これはグーグルのトップの結果であるため、古いqに応答を追加します)

ブロック内のコールバックで新しい状態を生成しようとしましたが、機能しませんでした。TimerとFuture.delayedで試してみました。

しかし、うまくいったのは...

await Future.delayed(const Duration(milliseconds: 500));

yield newState;

空の未来を待って、その後関数を実行します。



4

次の2つの方法1でそれを行うことができますすることであるFuture.delayedと2がありますTimer

タイマーの使用

Timer は、時間の終わりに達するとアクションをトリガーするように構成されたカウントダウンタイマーを表すクラスであり、1回または繰り返し起動できます。

dart:async 使用するプログラムの開始にパッケージ をインポートしてください Timer

Timer(Duration(seconds: 5), () {
  print(" This line is execute after 5 seconds");
});

Future.delayedの使用

Future.delayed isは、遅延後に計算を実行するfutureを作成します。

import "dart:async"; 使用するプログラムの開始に必ずパッケージ化して ください Future.delayed

Future.delayed(Duration(seconds: 5), () {
   print(" This line is execute after 5 seconds");
});

3

誰もが探しているスニペットをここに残すだけです。

Future.delayed(Duration(milliseconds: 100), () {
  // Do something
});

2
import 'dart:async';   
Timer timer;

void autoPress(){
  timer = new Timer(const Duration(seconds:2),(){
    print("This line will print after two seconds");
 });
}

autoPress();

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.