Flutter中的widget和其生命周期

1.Widget

在Flutter中所有的组成都是widget,可以成为组件或者控件
Widget可以分为2类

  1. StatelessWidget:一般适用于固定界面布局
  2. StatefulWidge：t用于界面数据交互传递
  1. 从Widget的源码中，我们可以发现@immutable关键字，是不可变的，所以反正extends继承的组件，实例化中的成员变成，需要使用final修饰
  2. Widget的是一个abstract修饰的抽象类，里面定义了方法API 需要我们自己手动实现
image

2.StatelessWidget

StatelessWidget也是一个抽象类，我们要实现bulid方法返回一个widget实例
通过一个小例子说明

image
//导入material的设计风格 库
import 'package:flutter/material.dart';
  main(){
  //调用系统的runApp方法
  //创建自定义的widget实例 MyApp()
  runApp(MyApp());
}

调用runApp()方法是需要传入一个widget对象实例

image
// 1.创建一个MyAPP类
class MyApp extends StatelessWidget {
  // 2.重写build方法
  @override
  Widget build(BuildContext context) {
   //返回一个 widget实例
    return MaterialApp(
      home: JCHome(),
    );
  }
}

//首页
// Scaffold脚手架，类似iOS中的ViewController
class JCHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //初始化一个脚手架
    return Scaffold(
      appBar: AppBar(
        title: Text("一个认知Flutter的案例"),
      ),
      body:JCHomeContent(),
    );
  }
}


//内容
class JCHomeContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    //创建一个ListView
    return ListView(
      children: <Widget>[
        JCHomeGoods("商品一", "这是一本奇书", "http://t9.baidu.com/it/u=1307125826,3433407105&fm=79&app=86&f=JPEG?w=5760&h=3240"),
        JCHomeGoods("风景二", "这是一本奇书", "http://img.shu163.com/uploadfiles/wallpaper/2010/6/2010082606113848.jpg"),
        JCHomeGoods("狗狗", "这是一本奇书", "http://pic1.win4000.com/wallpaper/e/5652d1b71a9f1.jpg"),

      ],
    );
  }
}



//列表对象
// 注意 widget是用 immutable 修饰的，意思说是不可变化的 所以其子类成员变量需要使用final

class JCHomeGoods extends StatelessWidget {

  final String title;
  final String des;
  final String imagePath;

  //实现便利构造器方法
  JCHomeGoods(this.title,this.des,this.imagePath);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Container(
      padding: EdgeInsets.all(10),
      //修饰
      decoration: BoxDecoration(
        //边框
        border: Border(
          //底部边框
          bottom: BorderSide(
            color: Colors.black12,
            width: 5,
          )
        )
      ),
      child:  Column(
        //侧抽对其方式
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(title,style: TextStyle(
            fontSize: 20,
            color: Colors.red
          ),),
          SizedBox(height: 8,),
          Text(des,style: TextStyle(
            fontSize: 18,
            color: Colors.orange
          ),),
          Image.network(imagePath)
        ],
      ),
    ) ;
  }
}

3. StatefulWidget

  1. 只要有界面数据发生变化就需要继承StatefulWidget
  2. StatefulWidget是用来存储状态变化的
  • 2.1 继承 StatefulWidget的组件，需要自己常见一个State状态类，来管理状态的变化
  • 2.2 通过定义的状态类,重新实现build方法，构建一个widget来更新界面数据


//这个界面有状态发生了变化 这里需要创建一个State状态
class JCHomeContent extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    //返回一个State状态类
    return JCState();
  }
}


//创建一个状态管理类 用来管理状态 泛型你的StatefulWidget
//当状态发生变化的时候调用 setState() 方法改变
class JCState extends State <JCHomeContent> {

  //定义一个变量
  var flag = false;

 
  @override
  Widget build(BuildContext context) {
    return Text();
  }
}
在这里插入图片描述
例子

import 'package:flutter/material.dart';


//main函数入口
main() => runApp(MyApp());


//MyApp类
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home:JCHomePage() ,
    );
  }

}


//创建一个JCHomePage的widget类
class JCHomePage extends StatelessWidget {

   @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("StatefulWidget的认知"),
      ),
      body: JCHomeContent(),
    );
  }
}


//创建一个 JCHomeContent继承StatefulWidget
class JCHomeContent extends StatefulWidget {

  //创建一个State的子类来管来状态
   @override
  State<StatefulWidget> createState() {

    return _JCState();
  }
}


// 注意: 带_的类或者成员变量，都只能在自己的模块中使用，正在其他模块不能被使用的，属于自己私有

class _JCState extends State<JCHomeContent>{

   int _count = 0;

  @override
  Widget build(BuildContext context) {

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            child: Text(
              "点击+1",
              style: TextStyle(
                fontSize: 20,
                color: Colors.white
              ),
            ),
            color:Colors.pink ,
              onPressed: (){
              //更新数据状态
                setState(() {
                   this._count ++;
                });
              }
              ),
          SizedBox(height: 8,),
          Text(
            "当前数字是:${this._count}",
            style: TextStyle(
              fontSize: 20
            ),
          ),
        ],
      ),
    );
  }
}

4. 生命周期

4.1StatelessWidget的生命周期

StatelessWidget的生命周期 比较简单 ，调用widget的build方法就完成了


//创建一个JCHomePage的widget类
class JCHomePage extends StatelessWidget {
  
  //重写build方法
   @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("StatefulWidget的认知"),
      ),
      body: JCHomeContent(),
    );
  }
}
4.2 StatefulWidget生命周期
此图片来自网络
  1. 调用继承StatefulWidget组件的 构造器方法
  2. 执行StatefulWidget的createState方法，来创建一个维护StatefulWidget的State对象
  3. 执行State类的构造方法（Constructor）来创建State对象；
  4. 执行initState，我们通常会在这个方法中执行一些数据初始化的操作
  5. 执行build方法，渲染Widget
  6. 手动调用setState方法，会根据最新的状态（数据）来重新调用build方法，构建对应的Widgets；
  7. 执行didUpdateWidget方法是在当父Widget触发重建（rebuild）时，系统会调用didUpdateWidget方法
  8. 当前的Widget不再使用时，会调用dispose进行销毁
  9. 在上面我们还看到了 didChangeDependencies方法
  • 这个方法是在 对象中依赖一些数据发生改变时会被调用

//创建一个 JCHomeContent继承StatefulWidget
class JCHomeContent extends StatefulWidget {

  JCHomeContent(){
    print("1.-----JCHomeContent的构造器方法");
  }

  //创建一个State的子类来管来状态
   @override
  State<StatefulWidget> createState() {
     print("2.-----JCHomeContent的createState方法");

    return _JCState();
  }
}


// 注意: 带_的类或者成员变量，都只能在自己的模块中使用，正在其他模块不能被使用的，属于自己私有

class _JCState extends State<JCHomeContent>{

   _JCState(){
     print("3.-----_JCState的搞构造器方法");
   }

   @override
   void initState(){
     // 调用: 这里是必须调用super
     final TextStyle style = TextStyle();
     super.initState();

     print("4.-----_JCState的initState方法");
   }

   @override
   void didUpdateWidget(JCHomeContent oldWidget) {
     super.didUpdateWidget(oldWidget);
     print("didUpdateWidget");
   }

   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
     print("调用_HYHomeContentState的didChangeDependencies方法");
   }



   int _count = 0;



  @override
  Widget build(BuildContext context) {
    print("5.-----_JCState的build方法");
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            child: Text(
              "点击+1",
              style: TextStyle(
                fontSize: 20,
                color: Colors.white
              ),
            ),
            color:Colors.pink ,
              onPressed: (){
                setState(() {
                  print("6.-----_JCState的setState方法");
                   this._count ++;
                });
              }
              ),
          SizedBox(height: 8,),
          Text(
            "当前数字是:${this._count}",
            style: TextStyle(
              fontSize: 20
            ),
          ),
        ],
      ),
    );
  }
}






// 我们在上面的代码中 添加上述的生命周期方法，打印结果
flutter: 1.-----JCHomeContent的构造器方法
flutter: 2.-----JCHomeContent的createState方法
flutter: 3.-----_JCState的搞构造器方法
flutter: 4.-----_JCState的initState方法
flutter: 调用_HYHomeContentState的didChangeDependencies方法
flutter: 5.-----_JCState的build方法
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,390评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,821评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,632评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,170评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,033评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,098评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,511评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,204评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,479评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2赞 335