3.0.flutter之生命周期和渲染原理

1.生命周期

生命周期是别人封装好的一套方法接口,然后提供回调方法给我们调用,生命周期本质是回调方法;

2.生命周期的作用

1.监听widget的事件
2.初始化数据
创建数据
发送网络请求
3.内存管理
销毁数据,销毁监听者
销毁timer等

3.StatelessWidget的生命周期

//1.StatelessWidget构造函数调用...1
//2.StatelessWidget的buil方法调用...2

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //去掉debug模式
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData( ),
      home: Scaffold(
        appBar: AppBar(
          
        ),
        body: MyHomePage(title: 'hello',),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({this.title}) {
    print('StatelessWidget构造函数调用...1');
  }
  @override
  Widget build(BuildContext context) {
    print('StatelessWidget的buil方法调用...2');
    return Center(
      child: Text(title),
    );
  }
}

4. StatefulWidget

//1.StatefulWidget的构造函数...1
//2.State的构造函数...2
//3.State的initState的方法...3
//4.State的build的方法...4
//5.State的dispose的方法...5

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //去掉debug模式
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          
        ),
        body: MyHomePage(title: 'hello',),
      ),
    );
  }
}

//StatefulWidget的生命周期
class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({this.title}) {
    print('StatefulWidget的构造函数...1');
  }
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  _MyHomePageState() {
    print('State的构造函数...2');
  }

  @override
  void initState() {
    super.initState();
    print('State的initState的方法...3');
  }

  @override
  Widget build(BuildContext context) {
    print('State的build的方法...4');
    return Center(
      child: Text(widget.title),
    );
  }

  @override
  void dispose() {
    super.dispose();
    print('State的dispose的方法...5');
  }
}

5.重写了 setState(() {})时,只走了build方法

截屏2020-06-19 10.24.00.png

setState(() {})
可被
StatefulElement _element = context;
_element.markNeedsBuild();
替代

 @override
  Widget build(BuildContext context) {
    StatefulElement _element = context;
    print('State的build的方法...4');
    return Column(
      children: [
        RaisedButton(
          child: Icon(Icons.add),
          onPressed: (){
            _count++;
//            setState(() {});
          _element.markNeedsBuild();
          },
        ),
        Text('$_count'),
      ],
    );
  }

6.数据共享

import 'package:flutter/material.dart';


//作为共享数据的类
class MyData extends InheritedWidget {
  //构造函数重定向为super()
  MyData({this.data, Widget child}) : super(child: child);
  //属性
final int data;

//提供给外界调用的类方法,让子widget访问共享数据
  static MyData of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType();
  }

//如果外界的data值改变,则必走以下方法
  //返回true,则改变内部的data
@override
  bool updateShouldNotify(MyData oldWidget) {
    return oldWidget.data != data;
  }
}


class InheritedDemo extends StatefulWidget {
  @override
  _InheritedDemoState createState() => _InheritedDemoState();
}

class _InheritedDemoState extends State {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return MyData(
      data: count,
      child:  Column(
        children: [
          Text1(),
          RaisedButton(
            child: Text('我是按钮'),
            onPressed: () => setState(() {
              count++;
            }),
          )
        ],
      ),
    ) ;
  }
}

class Text1 extends StatelessWidget {
  final int count;
  Text1({this.count});
  @override
  Widget build(BuildContext context) {
    return Text2();
  }
}

class Text2 extends StatelessWidget {
  final int count;
  Text2({this.count});
  @override
  Widget build(BuildContext context) {
    return Text3();
  }
}

class Text3 extends StatefulWidget {
  final int count;
  Text3({this.count});
  @override
  _Text3State createState() => _Text3State();
}

class _Text3State extends State {

    @override
  void didChangeDependencies() {
    super.didChangeDependencies();
//    数据共享时的数据改变时会走这个方法
    print('didChangeDependencies');
  }

  @override
  Widget build(BuildContext context) {
    //拿到共享的data数据
    return Text(MyData.of(context).data.toString());
  }
}

总结:

截屏2020-06-19 15.41.48.png

截屏2020-06-19 15.41.56.png

截屏2020-06-19 15.42.20.png

参考:
https://book.flutterchina.club/chapter14/