Flutterを初めてすぐに「StatefulWidgetとStatelessWidgetの違いは何?」って思わないだろうか?
私は思った。でGoogle先生に聞いてみても、「状態があるかないか」という意味のわからない答えしかない。
分からないまま使っていたのだが、やっと分かった(気がする)。

ヒントはFlutterのプロジェクトを作成するとデフォルトで記載されている初期コードで言うところの下記コードにある。

setState(() {
    _counter++;
  });

FloatingActionButtonをタップすると、カウンタが+1される。その変数をインクリメントするコードが、setState関数の引数で無名関数で渡されている。あまり気にもしていなかったのだが、よく考えると、これは何のためにあるのかと言うと、_counterの値を画面に反映させなければならないからだ。

画面に表示している部分は下記のコードだ。

Text(
    '$_counter',
    style: Theme.of(context).textTheme.display1,
  ),

通常、初期表示で上記のコードが実行された後、そこに使われていた変数が変更されても、更新処理をしない限りは反映されない。しかし、このコードは「Update」などの更新処理をしていないのに、_counterの値が変更されると、反映されている。

なぜ反映されているかというと、前者のコードsetStateによって通知されているからであると考えられる。

WindowsのプログラミングでWPFというのがある。リアクティブプロパティと言って、特定の変数の値が変更されると通知され、その変数が使用されている箇所が自動で反映されるというものだ。

setStateによって変更された変数がわかるため、内部的に通知され、自動的に画面を反映させる処理が動いているのである。とても便利だ。

この値変更を通知するためのsetState関数を使うには、Stateクラスを継承する必要がある。

Stateクラスを継承したクラスを使用する(インスタンスを作成するcreateState関数を使用する)には、StatefulWedgetが必要なのである。StatelessWedgetでは使えない。

いろんなサイトでStatefulの「状態がある場合」って言っているのは、この「変数を監視して変更を通知する機能を使う場合」という意味だったのだ。

逆に「状態がない場合」というのは、「変数を監視して変更を通知する機能を使わない場合」のことである。要するに画面表示が静的で、変更することがない場合のことである。

もっと分かりやすく説明して欲しいものである。きょうびの人は「状態がある場合」とか「状態がない場合」とか言われてすぐにわかるのだろうか?

すごいなぁ。。。こういうところでOld Programmerである劣等感が出てくるわ。。。

About The Author

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA