パーシャルリフレッシュ

私たちは、プロジェクトを行っている、我々は全体のインターフェイスが再描画されるのではなく、単一の値を更新する必要があります。我々は、すべて知っているsetState再描画するための方法ですが、彼はライフサイクルを実行しますbuild全体のインターフェイスが再描画されるようになり、。私は個人的に使用するために好きではないので、もちろん、我々は、彼の状態の管理に言うだろう、プロバイダの状態管理のために、しかし、の使用蒸気とevent_busは、値と経営者によって行われ、もちろん、コードは私も探していますので、より自然になりますプロバイダより簡単な方法は、当然のことながら、他の人と話すとき、ここで言う、そして長い間更新されていないことを言ったことができません。それはちょっと忙しいので、それは怠惰になっています。今ちょうど旧正月のこの期間を利用して、作成するためのいくつかのフラッターは、私たちは小さな例を与えるスキルのいくつかを開発しています。

フラッター状態クラス

私も先進フラッターフラッターは、2つの基本的な状態があることを知って、小さなデモを書く人々について調べるために行われて信じています。一つはStatelessWidget、他のですStatefulWidget。

StatelessWidgetは、彼が行われたときにページの準備が固定されており、何の対応が存在しないのでこと、変更することはできない状態ないクラスを参照するsetState方法は。
StatefulWidgetは、状態が変化したとき、我々は呼び出すことができる、ステートフルなクラスを指し、setState再ページにビルドステータスページを更新します。

当然のことながら、我々は呼んでsetState再にページ更新ビルド時間を、その後、setState方法は自然な柱を横断します、我々は構築し、次の書かれた各ウィジェットのState.buildを、誰もが理解し、私はそれを言ったので、これは大きななり、パフォーマンスのオーバーヘッド、我々はパーシャルリフレッシュモードの使用を最適化することができますので。

通常リフレッシュモード

class _MyHomePageState extends State<MyHomePage> {
  int count = 0;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            Text('$count'),
            FlatButton(
              color: Theme.of(context).accentColor,
              onPressed: () {
                count++; 
                setState(() {});
              },
              child: new Text('按钮 $count'),
            ),
          ],
        ),
      ),
    );
  }
}

我々が更新すると、変更はすべての値のカウントことが起こり見ることができます。それを行うにはどのようにページを再描画しないように、下のボタン上のテキストを変更する必要があり、我々はそう？

使用GlobalKeyパーシャルリフレッシュモード

我々はまだ達成するために、上記の方法を使用しますが、我々は、パーシャルリフレッシュテキストを実行するためのウィジェット、使用GlobalKeyの方法良いパッケージを持っていました。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int count = 0;

  GlobalKey<_TextWidgetState> textKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            TextWidget(textKey), //需要更新的Text
            FlatButton(
              child: new Text('按钮 $count'),
              color: Theme.of(context).accentColor,
              onPressed: () {
                count++; // 这里我们只给他值变动，状态刷新交给下面的Key事件
                textKey.currentState.onPressed(count);  //其实这个count值已经改变了 但是没有重绘所以我们看到的只是我们定义的初始值
              },             
            ),
          ],
        ),
      ),
    );
  }
}

//封装的widget
class TextWidget extends StatefulWidget {
  final Key key;

  const TextWidget(this.key);

  @override
  _TextWidgetState createState() => _TextWidgetState();
}

class _TextWidgetState extends State<TextWidget> {
  String text = "0";

  void onPressed(int count) {
    setState((){
      text = count.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Text(text);
  }
}

効果：
それは見ることができ、ボタンのカウント値が変更されていないが、更新が必要なコンポーネントは、部分的にリフレッシュされています。

原則

テキストキーGlobalKey使ってcurrentState呼び出すカプセル化方式ウィジェット内のonPressed方法、ちょうどonPressed地元のSETSTATEをリフレッシュするために持っているメソッドウィジェットの状態を。

依然ゝ心碎

公開された23元の記事・ウォンの賞賛2 ・ビュー1392

プライベートの手紙の懸念