Flutterの基本コンポーネントのステートフルウィジェット(StatefulWidget)の簡単な紹介

Flutterの基本コンポーネントのステートフルウィジェット(StatefulWidget)の簡単な紹介

StatefulWidget

StatefulWidgetは、実行時にウィジェットが変更されるシナリオに適用されます。つまり、ページに表示されるコンテンツは、ユーザーの操作またはネットワーク要求の状態に応じて変更する必要があります。つまり、新しいウィジェットを再描画する必要があります。
たとえば、アプリケーションのページには、テキストボックスコンポーネントTexとボタンコンポーネントFloatingActonButtonがあり、ボタンがクリックされると、Tetコンポーネントに表示されるコンテンツが変更されます。

StatefulWidgetを使用してページ内のWidget要素の動的な変更を実現するには、最初にStatefulWidgetから継承するクラスAを作成し、このクラスでcreateState()メソッドを実装するときにState<StatefulWidget>オブジェクトを返す必要があります。状態クラスBから継承するクラスAは、通常、アプリケーションのインターフェイスとクラスBの一部のロジック処理モジュールを描画します。具体的な実装手順については、以下で詳しく説明します。

(1)StatefulWidgetから継承したカスタムクラスにStatefulWidgetPageを作成します。StatefulWidget
から継承したクラスの実装コードは以下のとおりです。


class mainpage extends StatefulWidget{
    
    
  @override
  State<StatefulWidget> createState() {
    
    
    // TODO: implement createState
    throw UnimplementedError();
  }
}

(2)State-StatefulWidgetPageStateから継承するカスタムクラスを作成します。

Stateは、Flutterが動的ウィジェットをレンダリングするために使用するクラスです。ウィジェットの状態が変更されると、StateオブジェクトはsetState()メソッドを呼び出して、ウィジェットを再描画するようにFlutterフレームワークに通知します。Stateクラスから継承されたStatefulWidgetPageStateクラスの実装コードは次のとおりです。

class dengji extends State{
    
    
   String hh="快传温太医,娘娘要生了!";
  @override

  void showhh(){
    
    
    setState(() {
    
    
     hh='皇上,娘娘生了!!是位公主!!!';
    });
  }
  @override
  Widget build(BuildContext context) {
    
    
    // TODO: implement build

    return Scaffold(
      appBar: AppBar(title: Text('碎玉轩')),
        body:Text(hh),
        floatingActionButton: FloatingActionButton(
          child:Icon(Icons.airline_seat_flat),
    onPressed: (){
    
    
            showhh();
            print('生孩子ing。。。');
    },
    ),
    );
  }
}

コード*showhh(); *は、ページのホバーボタンがクリックされたときにshowhh()メソッドが呼び出されることを示します。これは、setState()メソッドを呼び出すことによって、ページ上のTextコンポーネントのコンテンツを動的に変更します。 hh変数の値。

ページを開いた後の最初のインターフェイス
ここに画像の説明を挿入

フローティングボタンをクリックすると、テキストが印刷され、ページに表示されるコンテンツも変更されます。
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/qq_43336158/article/details/123620027