文章目录
知识回顾
【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});
@override
State<MyApp3> createState() => _MyApp3State();
}
class _MyApp3State extends State<MyApp3> {
String name = '';
int age = 0;
@override
Widget 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;
@override
Widget 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
