Flutter | 由Builder Widget而引发的思考
概要
本篇主要是我实际学习中遇到的一个问题,从而引发的一些思考,从本篇你将学到如下:
- Builder 神奇却又简单的背后缘由
- BuildContext 的真实理解
- widget 与 element 的关系,及流程分析
背景
关于 Builder 这个widget,我想大家都是通过报错才发现的有这个widget的。
比如 From.of(context) ,为什么null指针(Dart新特性)了,Navigator.maybePop(context) 怎么异常了,诸如此类需要 context
传入的地方。
于是我举一个最简单的例子如下:
代码 | 图示 |
---|---|
详细解释如图所示。使用Form来验证我们的输入框是否输入合格。
作为一个Flutter新手,肯定会好奇,我为啥null了呢,然后google一搜,就有人建议你使用 Builder,然后我们就会将代码改为以下方式:
代码 | 图例 |
---|---|
欧耶,好啦,就这么简单啊。
等等,好像有什么地方不对,作为一个由良知,有道德,遵纪守法,爱国,不掉头发的 新时代无产阶级 干饭人,疯狂套用似乎不符合我的气质,我决定深入细节,看看你这葫芦里卖的什么药。
Builder 是什么?
官方解释:
一个无状态实用程序小部件,其[build]方法使用其[builder]回调创建小部件的子级。
源码如下
class Builder extends StatelessWidget {const Builder({Key? key,required this.builder,}) : assert(builder != null),super(key: key);@overrideWidget build(BuildContext context) => builder(context);
}
当我看过Builder的源码,我从没感觉自己如此机智且聪明,是个开发者都能看懂。很简单,就尼玛的一个接口回调,这是不是随手都能写一个出来。
缘由
那为什么我自己的context不行呢?
让我们先去看看 Form.of 方法,当然其他of的方法也类似。
static FormState? of(BuildContext context) {//获取给定类型为T的最近的小部件,该类型必须是具体的[InheritedWidget]子类的类型,并向该小部件注册该构建上下文,以便在该小部件发生更改时(或引入该类型的新小部件时,或窗口小部件消失),将重新构建此构建上下文,以便它可以从该窗口小部件获取新值final _FormScope? scope = context.dependOnInheritedWidgetOfExactType<_FormScope>();return scope?._formState;
}
咳咳,简单理解 dependOnInheritedWidgetOfExactType
这个方法会根据我们传递进去的context,去从它的父级开始向上查询与当前 给定的类型匹配以及最近的这个widget,如果找到就返回,否则就抛异常。
然后 让我们将视角切换到最开始的截图,注意我圈出来的地方。
哦,我可真是个小菜瓜啊,我传递个根context进去,你让From.of() 怎么找,它的父Widget树向上怎么可能有FromState。
知道了缘由,甚至于你自己可以不用 Builder,自己写一个小组件也行,比如下面示例。
示例代码 | 动画 |
---|---|
思考
但是到这里就结束了吗?如果对于本篇而言,的确是。但对我自己而言,却带来了更多疑问:
- context 到底是干什么的?
- build(context) 方法中的
BuildContext
是哪里来的?
Widget和Element的关系
我们常听说 Flutter有三棵树,也就是 Widget , Element ,RenderObject ,我们主要关心前两者。
Widget 树,顾名思义,就是我们常用的组件,其仅仅相当于我们对 UI
元素的一个 配置
。
Element,是Widget 实际对应的对象。why?没懂,没错,其实我也没明白
Flutter | 由Builder Widget而引发的思考相关推荐
- Flutter之基础Widget
原文博客地址: Flutter之基础Widget Flutter和Dart系列文章 项目GitHub地址 Flutter作为一种全新的响应式,跨平台,高性能, 完全免费.开源的移动开发框架 Widge ...
- Flutter基础-(3)Widget之文本Text
本来打算第三篇文章来讲解 Flutter 单子布局widget , 奈何 18种单子布局widget 内容颇多,加之年后有了新项目要开发 , 使得文章产出周期被拉长 :( . 这里先来篇简单的关于Te ...
- JAVA-OPTS引发的思考
JAVA-OPTS引发的思考 我们在性能测试过程中,经常要修改应用的JAVA-OPTS参数.修改这些参数,不单单是修改这些数字,本着知其所以然的态度,我们要知道这些参数背后的意义. 常见的JAVA-O ...
- 一个小程序引发的思考
既然是一个小程序引发的思考,那么我们就先看看这个小程序,看看他有何神奇之处: namespace ConsoleApplication1 {class Program{static void Main ...
- 由“递归遍历二叉树”引发的思考
由"递归遍历二叉树"引发的思考 递归的用法我感觉自己已经掌握了,可是今天在递归遍历二叉树时,它又迷一样令我费解.我本人在算法这一块很薄弱,所以想把这个问题发出来,希望有大神能够为我 ...
- 由一行文本输入框引发的思考
文章是关于React组件之表单单行文本输入框的一些思考.可能大家第一反应都是,不就是一行<input/>嘛,没什么特别的吧?如果说到输入框的值的话,可能圈子里上大多数封装好的React ...
- 由熊猫烧香引发的思考
由熊猫烧香引发的思考 早期的计算机病毒诞生,作者是以技术炫耀为主,编写这类病毒需要更深入的了解系统及网络技术,开发功底也要更深厚.现阶段,一个合格的程序员,制造出具备破坏性的代码,已经不怎么难.甚至, ...
- Spring之LoadTimeWeaver——一个需求引发的思考---转
原文地址:http://www.myexception.cn/software-architecture-design/602651.html Spring之LoadTimeWeaver--一个需求引 ...
- Flutter一切皆widget但是不要将所有东西放入一个widget
本文主要介绍Flutter一切皆widget但是不要将所有东西放入一个widget 作为 Flutter 开发人员,我相信您在您的开发生活中至少听说过这句流行的句子:"**一切都是widge ...
最新文章
- SVN项目锁定解决方案
- 轻松实现远程批量拷贝文件脚本(女学生作品)
- Docker:Docker的简介、安装、使用方法之详细攻略
- 更改已经收货的采购订单价格
- 混合编程黑科技:跨语言编程问题迎刃而解的3个要点
- linux下安装Jira6.3
- rabbitmq丢消息的处理方法
- 发一个成熟好用的电池供电切换电路
- 公司决策层时刻想着:怎样开展业务,怎样防止公司完蛋
- Nginx与tomcat组合的简单使用
- linux设置定时关机命令,linux定时关机命令是什么?
- 织梦dede仿站模板标签大全(最全)附带仿站工具
- Froala编辑器使用经历
- 国外素材网站打不开?还想要同品质图片?
- cvc 降噪_CVC降噪和DSP降噪有什么区别?
- 图片怎么批量压缩?这两个方法有掌握吗
- display:flex 意思是弹性布局
- 机械:二级注册建造师/二级建造师考试的报考条件、报考时间、考试科目的简介
- 【正点原子Linux连载】第三十七章 Linux内核移植 -摘自【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.0
- c语言输入字母输出数字,输入一字符串 把其中的字母和数字分开输出 用c语言编写...