浅识Flutter 基本组件之有状态的widget（StatefulWidget）

StatefulWidget

StatefulWidget应用于Widget会在运行时发生变化的场景，也就是应用程序根据用户交互或网络请求状态下，页面显示的内容需要发生变化,即需要重新绘制新的Widget.
例如，应用程序的页面上有一个文本框组件Tex和一个按钮组件FloatingActonButton,在点击按钮后Tet组件上显示的内容发生变化.

使用StatefulWidget实现页面中Widget元素的动态变化，首先需要创建一个继承自StatefulWidget的类A,并在该类中实现createState()方法时返回一个State< StatefulWidget>对象;然后创建一一个继承自State 的类B,通常在类B中绘制应用程序的界面和- 些逻辑处理模块。下面详细介绍具体实现步骤。

(1)创建继承自StatefulWidget 的自定义类中StatefulWidgetPage.
继承自StatefulWidget的类的实现代码如下。

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

(2)创建继承自State的自定义类一 StatefulWidgetPageState.

State是Flutter用来渲染动态Widget的类。当Widget 的State改变时,State对象会调用setState()方法,通知Flutter 框架去重绘Widget。 继承自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变量的值。

打开页面后的初界面

点击悬浮按钮后 打印出文本，同时页面显示的内容也发生改变。。