FlutterのState, StatefulWidget, setState()について

StatefulWidget

  • StatefulWidgetがStateを内包する。
  • 状態を表す変数(ここではhogehoge)はStatefulWidgetではなくてStateが持つ
  • ここではbuild()もかかない
class MyWidget extends StatefulWidget {
  @override
  MyState createState() => new MyState();
}

 

 

State

  • StateはStatefulWidget(のサブクラス)ジェネリクスを持つStateを継承する
  • 状態を表す変数を持つ
  • レイアウトを構築するbuild関数をもつ。StatefulWidgetじゃなくてStateがレイアウトを構成する!
class MyState extends State<MyWidget> {
  int _hogehoge = 0; //状態を表す変数

  Widget build(BuildContext context) {
    return new Text("hogehoge is ${_hogehoge}");
  }
}

 

  • なんとなくStatefulWidgetがbuildをもっててレイアウトを構成していたほうが自然な感じはするが、オフィシャルではこういうやり方。

 

 

状態が変化した場合

  • StateのなかでsetStateを呼ぶ
  • 変数を変更してからsetState();しちゃいかんよ!
  • setStateに変数を変更するfunctionを渡すんだ!
class MyState extends State<MyWidget> {
  int _hogehoge = 0; //状態を表す変数

  void functionCalledByAnyone(){
    setState(() {
      _hogehoge += 1
    });
  }

  Widget build(BuildContext context) {
    return new Text("hogehoge is ${_hogehoge}");
  }
}

 

  • setStateについては変数を変更する前後でチェックが入ったり、適切なタイミングで変数の変更が行われるために、このような呼び方になっているみたい。
  • とはいっても、現状でこの程度のコードであれば何もしないfunction渡しちゃっても、別にフツーに動く。
  void functionCalledByAnyone(){
    _hogehoge += 1
    setState((){});
  }

 


どこのだれが変数を変更するか?


トラックバックURL  -  http://mashi.exciton.jp/archives/268/trackback