文章目录
知识回顾
【Flutter】- 基础语法
前言
Flutter是以组件化的思想构建客户端页面的，类似于 vue 和 react，每个组件都有独立的结构、样式和交互。
Flutter的组件分为两大类：无状态组件 和 有状态组件
● StatelessWidget： 没有状态改变的Widget，通常这种Widget仅仅是做一些展示工作而已；
● StatefulWidget： 需要保存状态，并且可能出现状态改变的Widget；
源码分析
1. 有状态组件
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class MyApp3 extends StatefulWidget {const MyApp3({super.key});@overrideState<MyApp3> createState() => _MyApp3State();
}class _MyApp3State extends State<MyApp3> {String name = '';int age = 0;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('有状态组件'),),body: Center(child: Text('name:$name,age:$age'),),floatingActionButton: FloatingActionButton(onPressed: () {setState(() {age++;});},backgroundColor: Colors.red,child: const Icon(Icons.add),),);}
}2. 无状态组件
import 'package:flutter/material.dart';class MyApp2 extends StatelessWidget {MyApp2({super.key, this.name = '', this.age = 0});String name;int age;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('无状态组件')),body: Center(child: Text('name:$name,age:$age')),);}
}3. 组件生命周期
有状态组件的生命周期：
- 初始化
○ createState：当State组件开始被创建时会自动调用，生命周期内只会执行一次
○ initState：当 State 被初始化时会自动调用，生命周期内只会执行一次
■ 我们通常会在这个方法中执行一些数据初始化的操作，或者也可能会发送网络请求；
■ 注意：这个方法是重写父类的方法，必须调用super，因为父类中会进行一些其他操作
- 更新
○ didChangeDependencies：当 State 依赖的数据改变时，即初始化时或者是外部传入的数据改变时自动调用的, 这个方法在两种情况下会调用:
■ 情况一：调用initState会调用；
■ 情况二：从其他对象中依赖一些数据发生改变时，比如前面我们提到的InheritedWidget（这个后面会讲到）；
- 构建
○ build：构建组件结构并返回渲染好的组件实例，生命周期内会被执行多次
■ 手动调用setState方法，会根据最新的状态（数据）来重新调用build方法，构建对应的Widgets；
○ didUpdateWidget：该方法主要是组件重新构建时才会被调用的
■ 比如：热重载 或者 父组件发生 build 时子组件的该方法就会被调用
■ 注意：该方法被调用后，本组件中的 build 方法一定也会再被调用
- 销毁
○ deactivate：组件从节点中移除时会自动调用，可以监听组件是否即将被销毁
○ dispose：释放组件内存资源时会自动调用，可以监听组件是否被彻底销毁
import 'package:flutter/material.dart';class MyApp4 extends StatefulWidget {const MyApp4({super
