草庐IT

【Flutter 问题系列第 76 篇】在 Flutter 中 Builder 组件的作用以及如何解决 Scaffold.of 找不到上下文问题的解决文案

Allen Su 2024-01-06 原文

这是【Flutter 问题系列第 76 篇】，如果觉得有用的话，欢迎关注专栏。

文章目录

一：问题描述

写这篇博客的初衷是因为前几天面试时，面试官问了一个这样的问题，很遗憾之前我用 Builder 组件只是用它在函数体内定义一些变量，处理逻辑，返回不同的组件。鉴于当时这个问题没有答好，所以研究了 Builder 组件后写下了这篇博客，下面是博客正文。

先来看一段代码，如下图所示

点击按钮后，会报如下图所示的错误。

主要报错信息是 Scaffold.of() called with a context that does not contain a Scaffold ，意思是使用不包含脚手架的上下文调用了 Scaffold.of() 。

为什么会报这个错误呢？这里先卖个关子，此时先按照报错内容中给出的第一种解决文案试一试，先给按钮组件外层套一个 Builder 组件试试。

二：解决方案一，使用 Builder 组件

给按钮组件外部套一个 Builder 组件，如下图所示

此时再点击按钮后不再报错了，也正常返回了结果。

问题是解决了，可只是套了一个 Builder 组件就正常了，这是为什么呢？

三：源码分析

我们先来看一下 Builder 类的源码，如下图所示

源码很简单，可以看到 Builder 是一个继承于 StatelessWidget 的组件，通过 BuildContext 对象来构建 Widget 对象。

有一个必传参数 builder，其定义如下图所示

可以看到，自身只是将当前的 context 对象作为回调传递了出去，然后让开发者根据回调中的 context 进行组件的构建。

原来使用了 Builder 组件后再调用 Scaffold.of() 方法，用的 context 是自己的，而不是根组件的了。

再来看下 of 方法的部分代码，如下图所示

findAncestorStateOfType 会根据传入的上下文，获取指定类型祖先的 State，如果找到则返回 ScaffoldState 的结果，反之就会拋出如上的异常信息。

重点来了，拿小本本记一下

  • 未加 Builder 组件前，调用 Scaffold.of(context) ，此时用的上下文是根组件的 context，而根组件的 context 是传入进来的，of 方法向上查找不到 Scaffold 的实例。
  • 加了 Builder 组件后，在 Builder 组件内部调用了 Scaffold.of(context)，此时是根据 Builder 中的 context 向上查找最近的祖先，可以找到 Scaffold 的实例，所以没有再拋出异常。

说了这么多，简单来说其实就一句话，就是调用 context 处理相关逻辑时，是否可以找到对应组件的实例，找不到就拋出异常。

四：解决文案二，使用自定义组件

知道为什么使用 Builder 组件后异常消失了，那自定义一个小组件不就是一样的道理了。

如下图所示

当然，此时点击按钮不会拋出异常，也可以正常返回结果。

五：解决文案三，使用 GlobalKey

也可以使用 GlobalKey 的方式实现，如下图所示

根据全局 key 的当前状态 currentState 强转为 ScaffoldState 即可，也可以正常返回结果。

ok，关于 Flutter 中 Builder 组件的作用以及如何解决 Scaffold.of 找不到上下文的解决文案便说到这里。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语

Google 的 Flutter 越来越火，截止 2023年3月12日 GitHub 标星已达 151K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。
FlutterScaffoldxff0cxff0xffBuilder组件Scaffold.ofFlutter脚手架上下文关系

有关【Flutter 问题系列第 76 篇】在 Flutter 中 Builder 组件的作用以及如何解决 Scaffold.of 找不到上下文问题的解决文案的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  6. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  7. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  8. ruby - inverse_of 是否适用于 has_many？ - 2

    当我使用has_one时，它​​工作得很好，但在has_many上却不行。在这里您可以看到object_id不同，因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

  9. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  10. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

随机推荐