【Flutter核心类分析】深入理解Widget

最新推荐文章于 2024-10-01 20:41:19 发布
最新推荐文章于 2024-10-01 20:41:19 发布
阅读量3.7k 收藏 17
点赞数 5
分类专栏： Flutter原理系列 文章标签： flutter android
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/huangbiao86/article/details/121364735
版权
本文深入分析了Flutter中的Widget，包括Widgets的背景、系统分类和核心源码。Widget作为UI的配置信息，主要分为无状态的StatelessWidget和有状态的StatefulWidget。文章详细解释了Widget的生命周期，特别是State对象的创建和更新过程，以及如何通过setState方法触发UI更新。此外，还讨论了Renderer Widget和InheritedWidget的作用。通过对Widget的深入理解，有助于提升Flutter应用的性能和开发效率。
摘要由CSDN通过智能技术生成

文章目录

背景

相信我们在Flutter开发过程中接触最多的无疑就是Widget了，通过Widget我们可以实现诸多功能：

  • 描述UI的层级结构
  • 定制UI的各色样式，国际化（font， color， theme）
  • 定义UI布局方式（padding，center等）
  • 数据共享（事件传递）(notification，InheritedWidget等)

按照官方的说法“Widget是用于描述Element的配置信息”，如何去理解这句话，下面我们具体分析：

Widgets系统分类

通过源码查看，我们发现Widget是一个抽象类，直接或者间接继承自Widget的类达到六百多个，下面整合这些Widget信息对Widget做一个简单的分类，直接继承自Widget的类只有四个(还有一个PreferredSizeWidget，在我们实际开发者用得比较少)，我们就以这四个作为入口：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
IT人.阿标
关注
专栏目录
订阅专栏
【Flutter核心类分析】深入理解数据共享InheritedWidget
人生百年几今日，今日不为真可惜。
11-10 1546
背景 Flutter提供了用于Widget间共享数据的InheritedWidget，当InheritedWidget发生变化时，它的子树中所有依赖了它的数据的Widget都会进行rebuild，这使得开发者省去了维护数据同步逻辑的麻烦。InheritedWidget看名字就是一个Widget，那么它是如何做到数据共享，如何做到通知更新的呢？下面我们一起来看看。 InheritedWidget用法 InheritedWidget用法分为以下几个步骤； 自定义Widget继承自InheritedWidget
【Flutter核心类分析】深入理解数据共享Notification
人生百年几今日，今日不为真可惜。
11-11 2390
背景 上一文深入理解InheritedWidget我们知道，InheritedWidget的数据共享方式是父Widget到子Widget的逐层传递，适用于父Widget状态变更通知子widget变更的场景；那么本文讲解的Notification正好相反了，数据的的流动方式就是从子Widget向上传递只父Widget，适用于子widget状态变化，通知上层做相应处理的场景。 Notification用法 Notification用法分为以下几个步骤； 自定义一个通知类，需要继承自Notification类；
django element组件样式没有渲染_深入理解 Flutter Widget 体系架构与 UI 渲染流程
weixin_35368877的博客
12-06 246
本篇为 Flutter 技术原理基础篇章，了解了底层原理后，可以更好的展开诸如状态管理、Navigator 页面导航、Key 的设计原理、FPS 等技术领域，我们从开发中最常接触到的 Widget 入手，解析 Flutter Widget 体系结构和 UI 渲染流程。阅读本文大概需要 2 分钟(认真脸)。考虑几个问题1.setState 是如何更新 UI 的？2.Widget、Eleme...
Flutter 中的 PreferredSize 小部件：全面指南
smileKH的博客
05-15 955
是一个通用的小部件，它允许小部件请求一个特定的大小。Flutter 框架会尝试满足这个请求，但最终是否能够实现取决于布局约束和其他因素。可以用于各种自定义场景，例如创建自定义尺寸的AppBarpreferredSize: Size.fromHeight(100), // 自定义 AppBar 高度elevation: 0.0, // 取消阴影),
Flutter 基于getX搭建通用项目架构
油焖茄子 的博客
12-06 807
网络主要使用的是 和 来实现的,关于的封装,思路基本上和网上的教程大同小异.大致思路就是创建对象,设置,,,等等.然后在创建单例对象,给对象添加拦截器,我基本上添加三个拦截器分别为在这里代码就不贴出来了,有兴趣的可以下载demo查看. 为什么要使用是一个非常好用强大的代码生成器,支持等请求.定义好请求方法,返回类型执行一行命令就会自动生成代码,在中直接使用自己使用好的即可. 常用命令:代码定义如下所示 yaml如下代码所示: 二. 路由设计 将真心话使用了之后基本就不需要路由设计了,都封装好了
【Flutter核心类分析】深入理解Element
人生百年几今日，今日不为真可惜。
11-18 6836
文章目录背景Element分类核心源码分析Element.updateChildElement.inflateWidgetElement.upateStatelessElement.updateStatefulElement.updateProxyElement.updateRenderObjectElement.updateSingleChildRenderObjectElement.updateMultiChildRenderObjectElement.updateElement.mountCompon
【Flutter核心类分析】深入理解RenderObject
人生百年几今日，今日不为真可惜。
11-22 2769
文章目录背景RenderObject分类创建驱动驱动小结：布局绘制文章小结 背景 Widget，Element，RenderObject可以说是Flutter Framework的三个核心成员，本文我们一起来学习下RenderObject。 宏观上来讲，一个RenderObject就是我们之前说的三棵树之一RenderObject Tree中的一个对象，它的职责主要有三个：布局，绘制，命中测试。其中命中测试在之前的文章一文深入了解Flutter事件机制有过详细的分析，本文我们主要来讲解其它两点：布局和绘制。
【Flutter核心类分析】深入理解Key.
人生百年几今日，今日不为真可惜。
11-09 1631
背景 我们在进行Flutter开发过程中，几乎每一个Widget都会有一个可选参数——Key。但是我们却很少去传这个值，既然我们可以不用传，那么这个Key作用到底是什么呢？ 问题 下面我们先来看看这样一个场景： void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(
【Flutter核心类分析】深入理解BuildContext
人生百年几今日，今日不为真可惜。
11-09 1245
背景 不管是刚写Flutter开发还是Flutter开发的老将，相信对BuildContext一定不陌生。那么BuildContext是什么呢？为什么我们每次StatelessWidget.build(context)，State.build(context)在调用build的时候都需要传入一个BuildContext呢？ 本文主要讲下BuildContext来龙去脉，已经它的使用场景。 常见的BuildContext场景 首先我们一起来看看BuildContext的使用场景，相信做过Flutter开发的同
研究flutter-PreferredSize用法
a646639956的博客
02-03 7711
写flutter的AppBar 写好一个标题。 下面这里也想弄个bottom黑色的一片。 查到PreferredSize 组件 #PreferredSize 此控件不对其子控件施加任何约束，并且不以任何方式影响孩子的布局。 此控件对自定义AppBar.bottom和AppBar非常有用。 自定义AppBar，也可以直接设置AppBar的高度（PreferredSize子控件为AppBar） 贴上学习代码 appBar: AppBar( leading: IconButton(
安卓开发软件！掌握这十个搜索技巧让你的工作效率至上提高十倍！BAT大厂面试总结
chayel123的博客
03-04 339
大佬带你走进Android开发的世界，掌握了这些知识点，学习Android也可以很轻松。 核心分析内容 对于怎么学习Android，主要解决的是3个问题：学什么、怎么学 & 怎么用。 具体如下： 下面，我将带着上述几个问题，**详细讲解自身学习Android的方法和Android学习路径；**最后，还会结合前面内容，给出综合的具体执行学习Android的建议。 字节音视频一面凉经 时间：花了70分钟左右 面试过程： 一开始问我的是一位大佬，他先是问了我一些c++的知识，我答不上来，于是，就说谈一些
鸿蒙harmonyos next flutter混合开发之ohos工程引用 har 文件
最新发布
我的博客
10-01 490
不知道为什么，这里app在模拟器中运行起来立马闪退。不知道是不是不支持模拟器运行，还是官方bug。
Windows上面搭建Flutter Android运行环境
yuanlaile的博客
09-30 1067
Windows上面搭建Flutter Android运行环境（适用于Flutter3.7.3之后的版本）。 提示：Flutter3.7.x之前的版本配置请参考教程，或者参考文档《Flutter Android开发环境搭建，适用于 Flutter3.3.10之前的版本》。
【Flutter】- 基础语法
不靠谱先森的博客
09-29 621
声明变量：var 变量名 = 表达式;修改变量：变量名 = 新值;类型推断：var关键字声明的变量支持类型推断，修改变量时会检查之前存储数据的类型需求：存储不可被修改的数据实现：常量关键字：const 和 final区别：final是运行时常量，值在运行时赋值；const是编译期常量，值在编译时赋值；注意: const 和 final的区别final：运行时常量，值在运行时赋值const：编译期常量，值在编译时赋值。
Flutter---适配高版本studio运行里面的Android项目报错
qq_42795723的博客
09-30 332
【代码】Flutter---适配高版本studio运行里面的Android项目报错。
鸿蒙harmonyos next flutter通信之MethodChannel获取设备信息
我的博客
09-29 296
本文将通过MethodChannel获取设备信息，以此来演练MethodChannel用法。注意：channelName必须一致。这里都叫com.xmg.test。
如何配置flutter（超详细的哦）
m0_62574889的博客
09-28 1129
如何配置flutter（超详细的哦） 首先先去官网下载zip包 下载下来之后就是解压 配置环境变量 win+r查看是否配置成功 解决报错 [!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)X cmdline-tools component is missing Android license status unknown
鸿蒙harmonyos next flutter通信之EventChannel获取ohos系统时间
我的博客
10-01 512
鸿蒙harmonyos next flutter通信之EventChannel获取ohos系统时间。
Flutter基础与组件详解：Widget分类与Text控制
在Flutter开发中，掌握核心组件是构建美观且高效应用的基础。本文档主要聚焦于flutter要点，概述了两个关键的widget类型——StatefulWidget和StatelessWidget，以及它们的区别和使用场景。 1. **Flutter组件** ...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT人.阿标

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值