Una breve introducción al widget stateful (StatefulWidget) de los componentes básicos de Flutter

Widget con estado

StatefulWidget se aplica al escenario en el que el widget cambiará en tiempo de ejecución, es decir, el contenido que se muestra en la página debe cambiar según la interacción del usuario o el estado de la solicitud de red, es decir, se debe volver a dibujar un nuevo widget.
Por ejemplo, la página de la aplicación tiene un componente de cuadro de texto Tex y un componente de botón FloatingActonButton, el contenido que se muestra en el componente Tet cambia después de hacer clic en el botón.

Para usar StatefulWidget para realizar el cambio dinámico de los elementos Widget en la página, primero debe crear una clase A que herede de StatefulWidget y devuelva un objeto State<StatefulWidget> al implementar el método createState() en esta clase; luego cree un clase A que hereda de State Class B, generalmente dibuja la interfaz de la aplicación y algunos módulos de procesamiento lógico en clase B. Los pasos de implementación específicos se describen en detalle a continuación.

(1) Cree StatefulWidgetPage en una clase personalizada
heredada de StatefulWidget. El código de implementación de la clase heredada de StatefulWidget es el siguiente.

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

(2) Cree una clase personalizada que herede de State - StatefulWidgetPageState.

State es la clase que usa Flutter para renderizar widgets dinámicos. Cuando cambia el estado del widget, el objeto State llamará al método setState() para notificar al marco Flutter que vuelva a dibujar el widget. El código de implementación de la clase StatefulWidgetPageState heredado de la clase State es el siguiente.

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。。。');
    },
    ),
    );
  }
}

El código *showhh();* indica que se llama al método showhh() cuando se hace clic en el botón flotante de la página, lo que cambia dinámicamente el contenido del componente Texto en la página llamando al método setState(), es decir, el valor de la variable hh.

La interfaz inicial después de abrir la página.

Después de hacer clic en el botón flotante, el texto se imprime y el contenido que se muestra en la página también cambia. .