深入理解Flutter生命周期函数之StatefulWidget(一)

目录

前言

1.为什么需要生命周期函数

2.开发过程中常用的生命周期函数

1.initState() 

2.didChangeDependencies()

3.build()

4.didUpdateWidget()

5.setState() 

6.deactivate()

7.dispose()

3.Flutter生命周期总结

1.调用顺序

2.函数调用时机以及主要作用

4.生命周期函数的验证

1.创建和销毁时期函数的验证

2.didUpdateWidget函数验证

3.didChangeDependencies函数验证

前言

        在Flutter中，生命周期函数是管理StatefulWidget状态的关键机制。通过生命周期函数，我们可以控制Widget的初始化、更新和销毁过程，使得应用的状态管理和资源控制更加灵活。本文将详细介绍Flutter中的生命周期函数，帮助你更好地掌握Flutter应用的生命周期。

1.为什么需要生命周期函数

        生命周期函数允许我们在Widget的创建、更新和销毁过程中执行特定操作，比如数据的初始化、网络请求、资源的释放等。尤其是在StatefulWidget中，这些函数确保了应用在不同状态下的正确行为。

2.开发过程中常用的生命周期函数

1.initState() 

        这个方法在State对象被插入到树中时调用，仅调用一次。

        适合做初始化操作，例如初始化变量、加载数据或创建动画控制器。

@override
void initState() {
  super.initState();
  debugPrint("initState method is called!");
}

2.didChangeDependencies()

        这个方法在initState()调用之后，或者当依赖的InheritedWidget发生变化时调用。

        这个方法适用于需要访问依赖于上下文的情况，比如当Widget依赖于某个InheritedWidget的变化。

        下面的代用于打印"didChangeDependencies method is called!"。

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  debugPrint("didChangeDependencies method is called!");
}

3.build()

        build函数是构建UI的核心函数。

        build()在每次Widget需要重建时都会调用，包括在初次加载时、调用setState()之后。

        build方法用于描述Widget在屏幕上的展示方式。这个函数会频繁调用，因此确保代码尽量简洁高效。

        在这段代码中，build()函数返回一个带有计数器的页面，并包含一个按钮用于增加计数器。

@override
Widget build(BuildContext context) {
  debugPrint("build method is called!");
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          ElevatedButton(onPressed: (){
            // 跳转逻辑
          }, child: const Text('跳转下一个页面')),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ),
  );
}

4.didUpdateWidget()

        调用时机：当父Widget重新构建，并将新的Widget传递给子Widget时调用。

        作用：适合在父Widget属性变化时执行相应操作，比如更新状态或重新初始化数据。

        在下面代码中，它打印"didUpdateWidget method is called!"，用于展示父级属性更新时的情况。

@override
void didUpdateWidget(covariant MyHomePage oldWidget) {
  super.didUpdateWidget(oldWidget);
  debugPrint("didUpdateWidget method is called!");
}

5.setState() 

        调用时机：在状态变化时，通过手动调用setState()来触发。

        作用：通知Flutter框架状态已改变，触发build()方法重新构建Widget。注意避免频繁调用setState()以减少性能开销。

@override
void didUpdateWidget(covariant MyHomePage oldWidget) {
  super.didUpdateWidget(oldWidget);
  debugPrint("didUpdateWidget method is called!");
}

6.deactivate()

        调用时机：当State对象被临时从树中移除时调用。

       作用：可以在这里执行一些临时清理工作。通常不需要在这里执行大量操作，使用场景不多。

        在这段代码中，deactivate()打印了"deactivate method is called!"。

@override
void deactivate() {
  super.deactivate();
  debugPrint("deactivate method is called!");
}

7.dispose()

        调用时机：当State对象永久性地从树中移除时调用。

        作用：适合释放资源，比如取消订阅、关闭控制器等。
        在代码中，dispose()打印了"dispose method is called!"，用来展示页面被销毁时的情况。

@override
void dispose() {
  super.dispose();
  debugPrint("dispose method is called!");
}

3.Flutter生命周期总结

1.调用顺序

        通过上面的介绍，可以看到StatefulWidget的生命周期有以下顺序：

  1. 创建阶段：initState() → didChangeDependencies()
  2. 更新阶段：build() → didUpdateWidget() → setState()
  3. 销毁阶段：deactivate() → dispose()

       每个函数在Widget生命周期中扮演着不同的角色：

2.函数调用时机以及主要作用

函数

调用时机主要作用

initState()

Widget被插入树中时调用一次

初始化操作，仅调用一次

didChangeDependencies()

initState()后及依赖变化时调用

处理依赖项

build()

每次Widget需要重建时

构建UI并返回Widget

didUpdateWidget()

父Widget重新构建并传入新参数时调用

处理父组件属性变化

setState()

状态变化时手动调用

更新Widget并触发重建

deactivate()

State从树中暂时移除时

清理临时状态（不常用）

dispose()

State永久移除时

释放资源，避免内存泄漏

4.生命周期函数的验证

1.创建和销毁时期函数的验证

        我们以下面的代码为例，当app启动的之后：

        图1.示例demo

     控制台打印信息如下：

图2.进入页面控制台打印日志

        当我们点击remove按钮之后，移除子控件，控制台的打印信息如下：

图3.点击Remove之后控制台打印日志

2.didUpdateWidget函数验证

        要确保 didUpdateWidget 函数被调用，需要使 StatefulWidget 的 父级组件对其属性进行更新，而不是使用 UniqueKey 强制组件重新创建。我们修改下代码，点击按钮之后，修改子组件的颜色，通过更新 ChildWidget 的 color 属性触发 didUpdateWidget 的调用。     

        效果图如下：   

       图4.didUpdateWidge函数验证demo
        然后我们在didUpdateWidge中打印该函数，点击按钮之后，控制台打印信息如下：

图5.控制台打印日志

        完整代码如下：

import 'package:flutter/material.dart';

class LifecycleDemoApp extends StatelessWidget {
  const LifecycleDemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const ParentPage(),
    );
  }
}

class ParentPage extends StatefulWidget {
  const ParentPage({super.key});

  @override
  State<ParentPage> createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  Color childColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Lifecycle Demo')),
      body: Center(child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              setState(() {
                // Toggle color between blue and green
                childColor = childColor == Colors.blue ? Colors.green : Colors.blue;
              });
            },
            child: const Text('Change Child Widget Color'),
          ),
          const SizedBox(height: 20),
          ChildWidget(
            color: childColor, // Pass updated color
          ),
        ],
      ),)
    );
  }
}

class ChildWidget extends StatefulWidget {
  final Color color;

  const ChildWidget({super.key, required this.color});

  @override
  State<ChildWidget> createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  @override
  void initState() {
    super.initState();
    debugPrint("ChildWidget: initState");
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    debugPrint("ChildWidget: didChangeDependencies");
  }

  @override
  void didUpdateWidget(covariant ChildWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    debugPrint("ChildWidget: didUpdateWidget - Old color: ${oldWidget.color}, New color: ${widget.color}");
  }

  @override
  Widget build(BuildContext context) {
    debugPrint("ChildWidget: build");
    return Container(
      height: 100,
      width: 100,
      color: widget.color,
    );
  }

  @override
  void deactivate() {
    super.deactivate();
    debugPrint("ChildWidget: deactivate");
  }

  @override
  void dispose() {
    super.dispose();
    debugPrint("ChildWidget: dispose");
  }
}

3.didChangeDependencies函数验证

        要验证 didChangeDependencies 的调用时机，我们需要引入一个可以触发依赖改变的机制，比如 InheritedWidget 或 MediaQuery 的更新。以下是代码的更新版本，通过使用 InheritedWidget 来测试 didChangeDependencies 的调用。

        我们修改下代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const LifecycleDemoApp());
}

class LifecycleDemoApp extends StatelessWidget {
  const LifecycleDemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return InheritedColorProvider(
      color: Colors.blue,
      child: MaterialApp(
        home: const ParentPage(),
      ),
    );
  }
}

class InheritedColorProvider extends InheritedWidget {
  final Color color;

  const InheritedColorProvider({
    super.key,
    required this.color,
    required Widget child,
  }) : super(child: child);

  static InheritedColorProvider? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<InheritedColorProvider>();
  }

  @override
  bool updateShouldNotify(InheritedColorProvider oldWidget) {
    return color != oldWidget.color;
  }
}

class ParentPage extends StatefulWidget {
  const ParentPage({super.key});

  @override
  State<ParentPage> createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  Color appColor = Colors.blue;

  void _changeColor() {
    setState(() {
      appColor = appColor == Colors.blue ? Colors.green : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return InheritedColorProvider(
      color: appColor,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Lifecycle Demo'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _changeColor,
              child: const Text('Change Inherited Color'),
            ),
            const SizedBox(height: 20),
            const ChildWidget(),
          ],
        ),
      ),
    );
  }
}

class ChildWidget extends StatefulWidget {
  const ChildWidget({super.key});

  @override
  State<ChildWidget> createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  @override
  void initState() {
    super.initState();
    debugPrint("ChildWidget: initState");
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    debugPrint("ChildWidget: didChangeDependencies - Color: ${InheritedColorProvider.of(context)?.color}");
  }

  @override
  Widget build(BuildContext context) {
    debugPrint("ChildWidget: build");
    final color = InheritedColorProvider.of(context)?.color ?? Colors.transparent;

    return Container(
      height: 100,
      width: 100,
      color: color,
    );
  }

  @override
  void didUpdateWidget(covariant ChildWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    debugPrint("ChildWidget: didUpdateWidget");
  }

  @override
  void deactivate() {
    super.deactivate();
    debugPrint("ChildWidget: deactivate");
  }

  @override
  void dispose() {
    super.dispose();
    debugPrint("ChildWidget: dispose");
  }
}

        在修改之后的代码中，我们做了以下工作：

1.引入了InheritedWidget

        InheritedColorProvider 是一个简单的 InheritedWidget，用来共享 color 属性。

 2.修改了更新逻辑

        在 ParentPage 中，通过修改 InheritedColorProvider 的 color 属性触发 didChangeDependencies。

3.验证依赖关系

        子组件 ChildWidget 会依赖 InheritedColorProvider，当 color 发生变化时，didChangeDependencies 会被调用。

        当我们点击修改按钮之后，控制台打印日志如下：

ChildWidget: initState
ChildWidget: didChangeDependencies - Color: Color(0xff0000ff)
ChildWidget: build
ChildWidget: didChangeDependencies - Color: Color(0xff00ff00)
ChildWidget: build

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/919956.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

uniapp vue3小程序报错Cannot read property ‘__route__‘ of undefined

uniapp vue3小程序报错Cannot read property ‘__route__‘ of undefined

在App.vue里有监听应用的生命周期 <script>// 只能在App.vue里监听应用的生命周期export default {onError: function(err) {console.log(AppOnError:, err); // 当 uni-app 报错时触发}} </script>在控制台打印里无意发现 Cannot read property ‘__route__‘ of …
阅读更多...
ESP32移植Openharmony外设篇（5）aht20温湿度传感器

ESP32移植Openharmony外设篇（5）aht20温湿度传感器

模块简介 产品概述 AHT20&#xff0c;新一代温湿度传感器在尺寸与智能方面建立了新的标准&#xff1a;它嵌入了适于回流焊的双列扁平无引脚SMD封装&#xff0c;底面 3 x 3mm &#xff0c;高度1.0mm。传感器输出经过标定的数字信号&#xff0c;标准 I2 C 格式。 AHT20 配有一个…
阅读更多...
量子计算来袭：如何保护未来的数字世界

量子计算来袭：如何保护未来的数字世界

目录 前言 一、量子计算安全的学习方向 1. 量子物理学基础 2. 量子计算原理与技术 3. 传统网络安全知识 4. 量子密码学 5. 量子计算安全政策与法规 二、量子计算的漏洞风险 1. 加密算法被破解风险 2. 区块链安全风险 3. 量子密钥分发风险 4. 量子计算系统自身风险 …
阅读更多...
Git入门图文教程 -- 深入浅出 ( 保姆级 )

Git入门图文教程 -- 深入浅出 ( 保姆级 )

01、认识一下Git&#xff01;—简介 Git是当前最先进、最主流的分布式版本控制系统&#xff0c;免费、开源&#xff01;核心能力就是版本控制。再具体一点&#xff0c;就是面向代码文件的版本控制&#xff0c;代码的任何修改历史都会被记录管理起来&#xff0c;意味着可以恢复…
阅读更多...
C++之异常

C++之异常

1.异常的概念及其使用 1.1 异常的概念 异常是一种用于处理错误的机制&#xff0c;它允许程序在检查到错误条件时&#xff0c;能够从一个代码块转到另一个代码块&#xff0c;以处理改错误&#xff0c;而不是直接崩溃返回不确定的结果。 C的异常处理机制依赖于三个关键字&#x…
阅读更多...
Golang语言整合jwt+gin框架实现token

Golang语言整合jwt+gin框架实现token

1.下载jwt go get -u github.com/dgrijalva/jwt-go2.新建生成token和解析token文件 2.1 新建common文件夹和jwtConfig文件夹 新建jwtconfig.go文件 2.2 jwtconfig.go文件代码 /* Time : 2021/8/2 下午3:03 Author : mrxuexi File : main Software: GoLand */ package jwtC…
阅读更多...
河工oj（1101-1113）

河工oj（1101-1113）

1101 求组合数&#xff08;函数专题&#xff09; 代码 #include<bits/stdc.h> using namespace std;int fact(int n) {int res 1;while(n) {res * n--;}return res; } int main() {int m, k;cin >> m >> k;cout << fact(m)/fact(k)/fact(m-k) <&l…
阅读更多...
07架构面试题

07架构面试题

目录 一、关于合生元的面试题的架构分析的问题 1. 陈述两种方案的优劣 2. 在那些条件下&#xff0c;会选择哪一个方案 3. 你倾向那一种&#xff1f; 4. 如果要实施方案二的&#xff0c;准备步骤和流程 一、关于合生元的面试题的架构分析的问题 1. 陈述两种方案的优劣 方案…
阅读更多...
递归：编程世界的奇妙魔法之旅

递归：编程世界的奇妙魔法之旅

模块一&#xff1a;递归的神秘面纱 —— 初窥魔法之门 1. 递归的概念&#xff1a;神秘的魔法回响 &#x1f60e;嘿&#xff01;各位编程大侠们&#xff0c;今天咱们要来聊聊一个超级神奇的玩意儿 —— 递归。这递归啊&#xff0c;简直就是编程世界里神秘得不能再神秘的魔法回…
阅读更多...
力扣题目总结

力扣题目总结

1.游戏玩法分析IV AC: select IFNULL(round(count(distinct(Result.player_id)) / count(distinct(Activity.player_id)), 2), 0) as fraction from (select Activity.player_id as player_idfrom (select player_id, DATE_ADD(MIN(event_date), INTERVAL 1 DAY) as second_da…
阅读更多...
Ubuntu22.04LTS 部署前后端分离项目

Ubuntu22.04LTS 部署前后端分离项目

一、安装mysql8.0 1. 安装mysql8.0 # 更新安装包管理工具 sudo apt-get update # 安装 mysql数据库&#xff0c;过程中的选项选择 y sudo apt-get install mysql-server # 启动mysql命令如下 &#xff08;停止mysql的命令为&#xff1a;sudo service mysql stop&#xff0…
阅读更多...
(Linux)搭建静态网站——基于http/https协议的静态网站

(Linux)搭建静态网站——基于http/https协议的静态网站

简单了解nginx配置文件 1.下载并开启nginx服务 下载 [rootlocalhost ~]# dnf install nginx -y开启 [rootlocalhost ~]# systemctl restart nginx 1.(1)搭建静态网站——基于http协议的静态网站 实验1&#xff1a;搭建一个web服务器&#xff0c;访问该服务器时显示“hello w…
阅读更多...
vue3:scss引用

vue3:scss引用

原文查看&#xff1a;https://mp.weixin.qq.com/s?__bizMzg3NTAzMzAxNA&mid2247484356&idx2&sn44b127cd394e217b9e3c4eccafdc0aa9&chksmcec6fb1df9b1720b7bd0ca0b321bf8a995fc8cba233deb703512560cbe451cfb1f05cdf129f6&token1776233257&langzh_CN#rd…
阅读更多...
Oracle - 多区间按权重取值逻辑 ，分时区-多层级-取配置方案(二)

Oracle - 多区间按权重取值逻辑 ，分时区-多层级-取配置方案(二)

Oracle - 多区间按权重取值逻辑 &#xff0c;分时区-多层级-取配置方案https://blog.csdn.net/shijianduan1/article/details/133386281 某业务配置表&#xff0c;按配置的时间区间及组织层级取方案&#xff0c;形成报表展示出所有部门方案的取值&#xff1b; 例如&#xff0…
阅读更多...
13.C++内存管理2（C++ new和delete的使用和原理详解，内存泄漏问题）

13.C++内存管理2（C++ new和delete的使用和原理详解，内存泄漏问题）

⭐本篇重点&#xff1a;new, delete的使用和原理 ⭐本篇代码&#xff1a;c学习/04.c-动态内存管理 橘子真甜/c-learning-of-yzc - 码云 - 开源中国 (gitee.com) 目录 一. new和delete的使用 1.1 操作内置类型 1.2 操作自定义类型 二. new, delete与malloc, free的区别 2.1…
阅读更多...
用源码编译虚幻引擎，并打包到安卓平台

用源码编译虚幻引擎，并打包到安卓平台

用源码编译虚幻引擎&#xff0c;并打包到安卓平台 前往我的博客,获取更优的阅读体验 作业内容: 源码编译UE5.4构建C项目&#xff0c;简单设置打包到安卓平台 编译虚幻 5 前置内容 这里需要将 Epic 账号和 Github 账号绑定&#xff0c;然后加入 Epic 邀请的组织&#xff0c…
阅读更多...
golang通用后台管理系统09(系统操作日志记录)

golang通用后台管理系统09(系统操作日志记录)

1.日志工具类 package log/**** 日志记录 wangwei 2024-11-18 15:30*/ import ("log""os""path/filepath""time" )// 获取以当前日期命名的日志文件路径 func getLogFilePath() string {currentDate : time.Now().Format("2006-…
阅读更多...
基于yolov8、yolov5的电塔缺陷检测识别系统（含UI界面、训练好的模型、Python代码、数据集）

基于yolov8、yolov5的电塔缺陷检测识别系统（含UI界面、训练好的模型、Python代码、数据集）

摘要&#xff1a;电塔缺陷检测在电力设备巡检、运行维护和故障预防中起着至关重要的作用&#xff0c;不仅能帮助相关部门实时监测电塔运行状态&#xff0c;还为智能化检测系统提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的电塔缺陷检测模型&#xf…
阅读更多...
论文阅读 SeedEdit: Align Image Re-Generation to Image Editing

论文阅读 SeedEdit: Align Image Re-Generation to Image Editing

目录 摘要 1 INTRODUCTION 2 SEEDEDIT 2.1 T2I MODEL FOR EDITING DATA GENERATION 2.2 CAUSAL DIFFUSION MODEL WITH IMAGE INPUT 2.3 ITERATIVE ALIGNMENT 3 EXPERIMENTS 3.1 BENCHMARK AND METRICS 3.2 IMAGE EDITING COMPARISON 4 CONCLUSION 摘要 SeedEdit&…
阅读更多...
昇思MindSpore第四课---GPT实现情感分类

昇思MindSpore第四课---GPT实现情感分类

1. GPT的概念 GPT 系列是 OpenAI 的一系列预训练模型&#xff0c;GPT 的全称是 Generative Pre-Trained Transformer&#xff0c;顾名思义&#xff0c;GPT 的目标是通过Transformer&#xff0c;使用预训练技术得到通用的语言模型。和BERT类似&#xff0c;GPT-1同样采取pre-trai…
阅读更多...
最新文章

Copyright @ 2022~2023