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((){});
  }

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

• イベントをキャッチして実際に変数を変更する関数は場合によってどう実装するかは変わる。
• StateのなかでonTapをキャッチして変数を変更
• StatefulWidgetにある関数をStateにコールバックを渡して、StateのonTapから呼び出してもらう。
• 実際にどういうふうに実装するか、大きく分けて3パターン考えられるってよ

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