Flutter

Flutter中的widget和其生命周期

2020-05-14  本文已影响0人  追逐_chase

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方法
上一篇 下一篇

猜你喜欢

热点阅读