Flutter StatefulWidget 刷新机制

  • StatefulWidget 拥有 State,对外的类
  • State 是 StatefulWidget 的内部逻辑,包括状态管理和UI创建

State 状态发生改变后,调用 setState 会将 StatefulWidget 标记为 需要重建,在下个事件循环中,会将所有白哦纪委需要重建的 widget 一起计算布局并生成渲染树,然后对比新老渲染树,更新需要更细的部分。

setState后发生的事情

  1. 状态更新
    状态更新后,调用 setState
  2. 标记为需要重建
    setState后,Flutter框架会将与State关联的Widget标记为需要更新,并在下个事件循环重新绘制这个Widget的UI
    3.事件循环
    Flutter的事件循环用来处理各种事件,例如用户输入、定时器回调等,当进入事件回调是,Flutter会检查是否有被标记为需要重建的Widget
  3. 绘制UI
    重建过程中,Flutter会计算出Widget的布局、尺寸、外观,然后将这些更新合并到一个渲染树
  4. 更新UI
    Flutter对比新旧渲染树,找到改变的部分,并把变化应用到屏幕上

setState性能

  1. 需要保持StatefulWidget足够小
    控制刷新的Widget范围,尽量减少Widget的刷新
    总结:不要在页面节点使用 setState
// setState会刷新整体,影响范围大
import 'package:flutter/material.dart';

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

  
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  var _value1 = false;
  var _value2 = false;

  
  Widget build(BuildContext context) {
    this.widget;
    return ListView(
      children: [
        Switch(
            value: _value1,
            onChanged: (value) {
              _value1 = !_value1;
              setState(() {});
            }),
        Switch(
            value: _value2,
            onChanged: (value) {
              _value2 = !_value2;
              setState(() {});
            }),
      ],
    );
  }
}

// setState刷新局部,影响范围小
import 'dart:ffi';

import 'package:best_flutter_ui_templates/fitness_app/bottom_navigation_view/bottom_bar_view.dart';
import 'package:flutter/material.dart';

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

  
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  var _value1 = false;
  var _value2 = false;

  
  Widget build(BuildContext context) {
    this.widget;
    return ListView(
      children: [
        MySwitch(_value1),
        MySwitch(_value2),
      ],
    );
  }
}

class MySwitch extends StatefulWidget {
  final value;
  const MySwitch(this.value, {super.key});

  
  State<MySwitch> createState() => _MySwitchState(value);
}

class _MySwitchState extends State<MySwitch> {
  _MySwitchState(this.value);
  bool value;

  
  Widget build(BuildContext context) {
    return Switch(
        value: value,
        onChanged: (value) {
          value = !value;
          setState(() {});
        });
  }
}


  1. 不要滥用setState
    initState和build方法中不要调用setState,initState结束后会触发build构建,无需调用setState
    3.setState快速执行
    setState结束后会触发 build 构建,不能阻塞它的速度
    4.setState() 和 setState(…) 作用相同
setState((){
name= "tom";
})

和下面的效果相同

name= "tom";
setState((){

})

最后

如果想要成为架构师或想突破20~30K薪资范畴,那就不要局限在编码,业务,要会选型、扩展,提升编程思维。此外,良好的职业规划也很重要,学习的习惯很重要,但是最重要的还是要能持之以恒,任何不能坚持落实的计划都是空谈。

如果你没有方向,这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》,帮大家将杂乱、零散、碎片化的知识进行体系化的整理,让大家系统而高效地掌握Android开发的各个知识点。
img
相对于我们平时看的碎片化内容,这份笔记的知识点更系统化,更容易理解和记忆,是严格按照知识体系编排的。

欢迎大家一键三连支持,若需要文中资料,直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓(文末还有ChatGPT机器人小福利哦,大家千万不要错过)

PS:群里还设有ChatGPT机器人,可以解答大家在工作上或者是技术上的问题
图片

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值