フラッターの研究ノート（9） - コンポーネントウィジェットフラッターの研究ノート（9） - コンポーネントウィジェット

転載の場合は、ソースを明記してください：フラッターの研究ノート（9） -コンポーネントウィジェット

フラッターでは、すべてのディスプレイは、ウィジェットが、ウィジェットはすべての基盤であり、我々はデータを変更した後、SETSTATEデータを設定することができます（フレームワークに通知するSETSTATEを（呼び出し）、フレームワークは、再度、ユーザーインターフェイスを更新するために、国家の建設メソッドを呼び出します）、フラッターウィジェットは自動的にデータバインディングを更新しますので、あなたは何をする必要があるウィジェットインターフェース、およびデータバインドを実現することです。

ウィジェットステートフルとステートレスStatefulWidget StatelessWidget 2種類に、フラッタに、ウィジェットは、使い捨て全体インターフェースをレンダリングすることが理解される、唯一のサポートフレームの描画ない仕上げは、フレームがこのに維持されていないときの状態を指しデータの更新は、実際には、ある状態のウィジェットは、保存データの同期のフレームを達成するために、単に状態を越え、新しいウィジェットを描画する一方でそれは、状態を変更しません。

単純にウィジェットの状態と非国家二種類の上に置く、私たちはどのように行うウィジェットの種類を選択する時間を持っているのですか？ここで何を説明するための2つの簡単な例があります

1.この絵を発生するアプリの開始ページで、私たちは地図を表示するために開始する必要がありますが、ショーの後、我々はすべての変更を必要としないが、その上にこのフレームでは、この時間を保ち、私たちは選択することができますステートレスStatelessWidget

2.テキストとボタンでページ内、需要がクリックボタンで、テキストの内容が変更が発生する必要があり、それはユーザとの対話やネットワーク要求に基づいて、ページを変更する必要がある、あなたが再描画される必要があり、この場合は、我々はStatefulWidgetの地位を持っている必要があります。

あなたはまだ一つのことを理解していない場合、それは一つのルールを覚えている：ウィジェット引き分けた後、発生していない場合（たとえば、ユーザーとの対話、ページを更新するためのネットワーク要求など）ウィジェットの変更は、それは、逆に、ステートフルである場合すべての変更は、それはステートレスです。

我々はすでに、これらの2つの実装に関する具体的な話が続き、ステートレスとステートフルウィジェットについて話しています：

ステートレスStatelessWidget

継承StatelessWidget、ビルドによって成分の良好なレイアウトを返します。

インポート' パッケージ：フラッター/ material.dart ' ;

ボイドメイン（）=> runApp（DEMOWidget（））。


クラスDEMOWidgetはStatelessWidgetを{延び

  @オーバーライド
  ウィジェットビルド（BuildContextコンテキスト）{
    返す（MaterialAppを
      タイトル：「ステートレスウィジェット」、
      ホーム：足場（
        アプリケーションバー：アプリケーションバー（
          タイトル：テキスト（「ステートレスデモウィジェット」）、
        ）、
        ボディ：センター（
          子供：（テキスト「ステートレスデモです」）、
        ）、
      ）、
    ）;
  }
}

状態がありますStatefulWidget

インポート' パッケージ：フラッター/ material.dart ' ;

ボイドメイン（）=> runApp（SampleApp（））。


クラスSampleAppはStatelessWidgetは{拡張
   // このウィジェットは、アプリケーションのルートです。
  @オーバーライド
  ウィジェットビルド（BuildContextコンテキスト）{
    返す 新しいMaterialApp（
      タイトル：「サンプルアプリケーション」、
      テーマ：新ThemeData（
        primarySwatch：Colors.blue、
      ）、
      ホーム：新しいSampleAppPage（）、
    ）;
  }
}

クラスSampleAppPageはStatefulWidgetを{延び
  SampleAppPage（{キーキー}）：スーパー（キー：キー）

  @オーバーライド
  _SampleAppPageState createState（） => 新しい_SampleAppPageState（）。
}

クラス _SampleAppPageStateは州立<SampleAppPage>拡張{
   // デフォルトのプレースホルダーテキスト 
  文字列textToShow = 「Iのようにフラッターを」。

  @オーバーライド
  ウィジェットビルド（BuildContextコンテキスト）{
    返す 新しい（足場を
      アプリケーションバー：新しいアプリケーションバー（
        タイトル：新しいテキスト（「サンプルアプリケーション」）、
      ）、
      ボディ：新しいセンター（子：新しいテキスト（textToShow））、
      floatingActionButton：新しいFloatingActionButton（
        onPressed：_updateText、
        ツールチップ：「更新テキスト」、
        子供：新しいアイコン（Icons.update）、
      ）、
    ）;
  }

  ボイド_updateText（）{
    SETSTATE（（）{
      // テキストを更新することは 
      textToShow = 「フラッターは素晴らしいです！」。
    }）;
  }
}

次の章：フラッターの研究ノート（10） - 基本

フラッターの研究ノート（9） - コンポーネントウィジェットフラッターの研究ノート（9） - コンポーネントウィジェット

転載の場合は、ソースを明記してください：フラッターの研究ノート（9） -コンポーネントウィジェット

ステートレスStatelessWidget

状態がありますStatefulWidget

おすすめ