一時的な状態とアプリの状態を区別する

コンテンツ

このドキュメントでは、アプリの状態、一時的な状態、そして、Flutter アプリでそれぞれを管理する方法について説明します。

可能な限り最も広い意味で、アプリの状態とは、アプリの実行中にメモリ内に存在します。これにはアプリのアセットが含まれます。 Flutter フレームワークが UI に関して保持するすべての変数、アニメーションの状態、テクスチャ、フォントなど。これが最も広範ですが、状態の考えられる定義は有効ですが、次の場合にはあまり役に立ちませんアプリの設計。

まず、一部の状態 (テクスチャなど) さえ管理できません。フレームワークがこれらを処理します。したがって、より有用な定義は、状態とは、「UI を再構築するために必要なあらゆるデータ」です。時の瞬間」。第二に、あなたがする自分自身を管理できる一時的な状態とアプリの状態という 2 つの概念的なタイプに分けられます。

一時的な状態

一時的な状態 (一時的な状態と呼ばれることもあります)UIの状態またローカル状態) 一つのウィジェットに綺麗に収めることができる状態です。

これは意図的に曖昧な定義なので、いくつか例を示します。

の現在のページPageView
複雑なアニメーションの現在の進行状況
現在選択されているタブBottomNavigationBar

ウィジェットツリーの他の部分がこの種の状態にアクセスする必要はほとんどありません。シリアル化する必要はなく、複雑な変更もありません。

言い換えれば、状態管理テクニックを使用する必要はありません。 (ScopedModel、Redux など) この種の状態。必要なのはStatefulWidget。

以下に、下部ナビゲーションバーで現在選択されている項目がどのように表示されているかを示します。で開催された_indexのフィールド_MyHomepageStateクラス。この例では、_index一時的な状態です。

class MyHomepage extends StatefulWidget {
  const MyHomepage({super.key});

  @override
  State<MyHomepage> createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _index,
      onTap: (newIndex) {
        setState(() {
          _index = newIndex;
        });
      },
      // ... items ...
    );
  }
}

ここで、を使用して、setState()StatefulWidget の State 内のフィールド授業は完全に自然です。アプリの他の部分にアクセスする必要はありません_index。変数は内部でのみ変更されます。MyHomepageウィジェット。そして、ユーザーがアプリを閉じて再起動すると、それは気にしないでください_indexゼロにリセットされます。

アプリの状態

一時的ではない状態、アプリのさまざまな部分で共有したいもの、ユーザーセッション間で保持したいもの、いわゆるアプリケーションの状態です (共有状態とも呼ばれることもあります)。

アプリケーション状態の例:

ユーザー設定
ログイン情報
ソーシャルネットワーキングアプリでの通知
電子商取引アプリのショッピングカート
ニュースアプリの記事の既読/未読の状態

アプリの状態を管理するには、オプションを調べてください。選択はアプリの複雑さと性質によって異なります。チームのこれまでの経験、その他多くの側面。読む。

明確なルールはありません

はっきり言っておきますが、あなたはできる使用StateとsetState()すべてを管理するアプリ内の状態。実際、Flutter チームは多くの分野でこれを行っています。簡単なアプリのサンプル (すべての製品で入手できるスターターアプリを含む)flutter create）。

逆の場合もあります。たとえば、次のように決定するとします。特定のアプリのコンテキスト - 下部の選択したタブナビゲーションバーはいいえ一時的な状態。変更する必要があるかもしれませんクラス外から、セッション間で保持するなど。その場合、_index変数はアプリの状態です。

区別するための明確で普遍的なルールはありません特定の変数が一時的な状態であるか、アプリの状態であるか。場合によっては、あるものを別のものにリファクタリングする必要があります。たとえば、明らかに一時的な状態から始めます。しかし、アプリケーションの機能が増えるにつれて、アプリ状態に移行する必要がある場合があります。

このため、次の図は割り引いて考えてください。

A flow chart. Start with 'Data'. 'Who needs it?'. Three options: 'Most widgets', 'Some widgets' and 'Single widget'. The first two options both lead to 'App state'. The 'Single widget' option leads to 'Ephemeral state'.

Redux の作者である React の setState と Redux のストアについて尋ねられたとき、次のように答えました。ダン・アブラモフはこう答えた。

「経験則は次のとおりです。それほど面倒ではないことは何でもやってください」

要約すると、Flutter アプリには概念的に 2 つの状態タイプがあります。一時的な状態は次を使用して実装できます。StateとsetState()、多くの場合、単一のウィジェットに対してローカルです。残りはアプリの状態です。どちらのタイプも Flutter アプリで適切な位置を占めており、次の 2 つのタイプに分かれています。この 2 つは、ユーザー自身の好みとアプリの複雑さによって異なります。