【Flutter】- 核心语法

知识回顾

【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