首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

未更改状态的Flutter showModalBottomSheet需要重新打开才能看到更改

Flutter是一种跨平台的移动应用开发框架,可以用于开发iOS和Android应用。showModalBottomSheet是Flutter中的一个函数,用于显示一个模态底部弹出窗口。根据提供的问答内容,问题是关于未更改状态的Flutter showModalBottomSheet需要重新打开才能看到更改的情况。

在Flutter中,当我们使用showModalBottomSheet函数显示底部弹出窗口时,如果底部弹出窗口中的内容依赖于某个状态,而该状态在底部弹出窗口关闭之前发生了变化,那么在重新打开底部弹出窗口之前是无法看到状态的更改的。

这是因为showModalBottomSheet函数创建的底部弹出窗口是一个新的Widget树,它与底部弹出窗口之前的Widget树是相互独立的。因此,当底部弹出窗口关闭后,之前的Widget树会被销毁,而重新打开底部弹出窗口时会创建一个新的Widget树。

为了解决这个问题,我们可以使用Flutter中的状态管理来确保底部弹出窗口中的内容能够及时更新。常见的状态管理方案包括使用setState函数、使用Provider库、使用BLoC模式等。

具体而言,可以按照以下步骤来解决问题:

  1. 在底部弹出窗口的父组件中定义一个状态,用于保存底部弹出窗口中的内容需要依赖的数据。
  2. 在底部弹出窗口的父组件中使用setState函数来更新状态,当底部弹出窗口中的内容需要更新时调用setState函数。
  3. 在底部弹出窗口的子组件中使用该状态来展示内容,确保内容能够及时更新。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 入门指北之弹窗和提示(干货)

可以看到 showBottomSheet 会充满整个屏幕,然后 fab 会跟随一起到 AppBar 的底部位置,而 showModalBottomSheet 展示的高度不会超过半个屏幕的高度,但是 fab...假如我们只需要展示 2-3 个 item,但是按照刚才的方式 showModalBottomSheet 的高度太高了,那我们可以在 ListView 外层包裹一层 Container,然后指定 height...get package 后给 MaterialApp 加入如下属性,这样就会支持中文了,这里需要导入包 package:flutter_localizations/flutter_localizations.dart...Dialog 状态保持 假如有个需求,需要在弹出的 Dialog 显示当前被改变的值,然后通过按钮可以修改这个值 ,该如何实现。...context 不是共享的,如果需要动态修改 dialog 的状态值,需要通过 StatefulBuilder 或者自定义 dialog 继承于 StatefulWidget 来实现 所以解决的方法很明确

2.3K20
  • 你知道吗,Flutter内置了10多种show

    applicationLegalese:著作权(copyright)的提示。 children:位置如上图的红蓝绿色的位置。 所有的属性都需要手动设置,不是自动获取的。...下面的2个按钮根据应用程序支持的语言显示相应的语言,比如显示中文方法如下: 在pubspec.yaml中配置支持国际化: dependencies: flutter: sdk: flutter...flutter_localizations: sdk: flutter 在MaterialApp中配置当前区域: MaterialApp( title: 'Flutter Demo...', ); 效果如下: [1240] 下面的英文我们是无法更改的。...,效果如下: [1240] 弹出的位置在屏幕的左上角,我们希望弹出的位置在点击按钮的位置,因此需要计算按钮的位置,计算如下: final RenderBox button = context.findRenderObject

    1.9K11

    【Flutter 专题】20 图解【分享页面】底部对话框

    和尚在学习 Flutter 过程中需要处理一个类似 Android 中 PopupWindow 效果的分享弹框页。看似很简单的页面,里面却有很多值得尝试的地方。...1.2 若此时设置内容 Widget 宽高,会发现依旧是重新打开一个页面,高度从底向上占据所设置高度,且点击空白区不会消失,如图: ?...Modal 式工作表:是一个半透明的页面,默认占据屏幕一半 ScaffoldState.showModalBottomSheet。...方式开启工作表,同时内容 Widget 不限制宽高,效果为打开一个半透明页面,默认占据屏幕一半,点击空白区工作表消失,如图: ?...2.2 若此时设置内容 Widget 宽高,会发现依旧是打开一个半透明页面,高度从底向上占据所设置高度,且点击空白区会消失,如图: ?

    1.2K71

    开始使用-初尝胜果 顶

    尝试一个热重新加载 Flutter提供快速开发周期和热重载,可重新加载实时运行应用的代码而无需重新启动或丢失应用状态。...只需对源代码进行更改,告诉IDE或命令行工具即可重新加载,并查看模拟器,仿真器或设备中的更改。  ...3.要查看您的更改,请调用Save All(cmd-s / ctrl-s),或单击Hot Reload按钮(带有闪电图标的按钮)。 您应该几乎立即在运行的应用程序中看到更新的字符串。...尝试一个热重新加载 Flutter提供快速开发周期和热重载,可重新加载实时运行应用的代码而无需重新启动或丢失应用状态。...只需对源代码进行更改,告诉IDE或命令行工具即可重新加载,并查看模拟器,仿真器或设备中的更改。

    1.2K30

    Flutter iOS 真机测试 -- 值得收藏

    ,你需要选择一个团队,如果团队状态未识别,你需要登陆。...成功选中后,我们可以看到状态变更为下面这样: Flutter Demo 是我项目的名称 此时,你可以在的手机上看到一个名称为 Flutter Demo 的 Flutter 应用。...此时你点击打开 Flutter Demo 应用,可能会得到下面的信息提示: 因为自己手机系统是 14.2,所以它告诉我,应用只能通过 IDE 发起或者是 Xcode。...所以,我们在 Xcode 上再次点击运行按钮,运行我们的项目即可,可能会出现下面这个信任弹窗: 选择信任后,你可以看到我们的 Flutter 应用内容了。...后话 在 IDE 上更改内容后,再次点击运行按钮之后,你在手机应用上可以看到更新的内容。 很酷,是吧,读者感兴趣可以尝试一下~ 如果读者喜欢本文,不妨一键三连:点赞 + 收藏 + 关注

    3.6K50

    flutter实战项目之博客项目

    检查所有依赖的迁移状态 通过以下命令检查你的 package 的迁移状态 dart pub outdated --mode=null-safety image-20210926165313327 上面的输出说明了所有依赖的...注意: 该命令会更改你的 pubspec.yaml 文件。 运行 dart pub upgrade。 6. 迁移 你的代码里大部分需要更改的代码,都是可以轻易推导的。...在你的 IDE 上打开package 。你也许会看到很多错误,没关系,让我们继续。 利用分析器来辨析静态错误,逐个迁移 Dart 文件。按需添加 ?、!...# or `flutter test` 你可能需要更新使用了空值作为预期用例的测试代码。...如果你需要对代码作出大量的更改,那么你可能需要重新对代码进行迁移。这时请先回滚代码更改,再运行迁移工具进行迁移。

    85310

    谷歌 Flutter 1.17 发布

    谷歌透露:今年到目前为止,关闭的漏洞比打开的漏洞多,导致净减少了约800个问题。谷歌Flutter团队从231位贡献者那里合并了3,164个PR,从而修复了许多错误。...您可以在“ 物料日期选择器重新设计”规范中阅读有关详细信息。...2018年10月的PR 22330中增加了对新配置的选择加入支持,但不对新名称提供支持。现有的文本样式名称未更改,因为这样做是一个重大的API更改,可能会影响大多数应用程序。...此选项将安装仅依赖于您的插件代码(不包括任何Dart代码或资产)的通用Android应用。这允许重复flutter run命令的启动速度更快,因为对Dart代码或资产的更改不需要重新构建APK。...重大变化 与往常一样,每个新版本的Flutter中尽量减少重大更改的数量,这些是此版本中的重大更改。

    3.5K10

    为啥Flutter Hooks没有受到太多关注和青睐?

    作者 | Jimmy Aumard 译者 | 王强 策划 | 张晓楠 了解 Flutter Hooks 并不需要 React 的相关知识。...换句话说了解 Flutter Hooks 并不需要 React 的相关知识。 Hooks 是一种与多个小部件共享同一代码的方法,这些代码往往是在有状态小部件之间重复或难以共享的代码。...const[] 表示在未放弃(dispose)小部件之前,请勿调用 effect。你可以提供一组参数,当其中一个参数更改时将调用 effect。下面来看看另一个关于动画的例子。...这是为了确保任意 key 被更改时都会重新创建 ticker provider。例如,当 tab 的数量变化时就会重新创建它。...在这里,我们将 tickerProvider 传递为第二个参数,以便在 ticker 更改时(也就是在 length 或 initialIndex 更新时)重新创建控制器。这里依旧都是自动化的。

    1.2K20

    两分钟带你掌握Flutter的StatelessWidget与StatefulWidget

    状态是在构建widget时可以同步读取的信息,或者在widget的生命周期中可能更改的信息,在Flutter中如果要管理状态需要用到 StatefulWidget。...Flutter中的StatelessWidget是一个不需要状态更改的widget - 它没有要管理的内部状态。...调用setState告诉Flutter框架,某个状态发生了变化,Flutter会重新运行build方法,以便应用程序可以应用最新状态。...当widget可以动态更改时,需要使用StatefulWidget。 例如, 通过键入表单或移动滑块来更改widget的状态....如何决定使用哪种方式时,可以参考以下原则: 如果所讨论的状态是用户数据,例如复选框的已选中或未选中状态,或滑块的位置,则状态最好由父widget管理; 如果widget的状态取决于动作,例如动画,那么最好是由

    1.5K10

    开始使用-编写你的第一个Flutter应用程序 顶

    第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个有状态的小部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航到新的屏幕 第7步:使用主题更改UI...如果需要,请使用以下链接中的代码重新开始正轨。 pubspec.yaml(pubspec.yaml文件不会再更改。)...实现一个有状态的小部件至少需要两个类:1)一个StatefulWidget类,它创建一个2)一个State类的实例。...如果您尝试重新加载热点,则可能会看到一条警告: Reloading......你应该看到一个单词配对清单。 尽可能向下滚动,您将继续看到新的单词配对。 ? 问题? 如果您的应用程序运行不正常,则可以使用以下链接中的代码重新进入正轨。

    9.5K20

    Flutter 1.17版本重磅发布

    我们的目标是按季度节奏发布稳定的发行版;但是,此版本花费了更长的时间,因为我们一直在为新的发布过程重新调整基础架构。我们继续将质量作为第一要务,并相信新的发布模型将提高我们提供服务的能力。...这种增长的很大一部分归功于我们与Nevercode的合作关系,这使我们在响应客户问题方面的响应速度有所提高。今年到目前为止,我们今年关闭的错误比打开的错误多,导致净减少了约800个问题。...2018年10月的PR 22330中增加了对新配置的选择加入支持,但不对新名称提供支持。现有的文本样式名称未更改,因为这样做是一个重大的API更改,可能会影响大多数应用程序。...由于对Dart代码或素材资源的更改无需重新构建APK,因此可以使重复的flutter运行命令更快地启动。...如果您的Android调试启动时间让您失望,请尝试一下。 如果您以Android为目标,则需要注意的另一个变化是,当创建新的Flutter项目时,AndroidX是唯一的选择。

    2.5K10

    浅谈跨平台框架Flutter的搭建与运行

    二、更新环境变量:若想在Windows系统自带命令行运行flutter命令,开发者需要添加以下环境变量到用户PATH:“控制面板->用户账户->更改我的环境变量”,同时,在“用户变量”下检查是否有名为“...Studio安装向导”并安装最新的Android SDK、Android SDK工具和Android SDK构建工具,这些都是用Flutter进行Android开发所需要的; 打开Android Studio...配置完成后,还需用source命令重新加载,具体命令如下: source ~/.bash_profile 完成以后, flutter的安装工作已基本完成,但要进行开发,还需要使用命令来检测其是否成功安装...,热重载无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态。...对代码进行简单的更改,然后使用IDE或命令行工具进行重新加载,可以在设备或模拟器上看到更改。

    3.3K20

    Flutter 凉了吗?

    几年前,我在Android和iOS开发中略有涉足,使用的是Java和Objective-C。在花了大约一个月的时间学习后,我决定不再深入学习了。我就是无法找到那种深入其中的状态。...并再次输出: 有了异步操作,我们在执行需要比较久才能完成的代码的同时,其余代码的执行也不会被妨碍。...你可以通过手动更改字体,颜色,并逐个设置所有内容,但这需要太长时间了。相反,Flutter为我们提供了一个名为ThemeData的东西,它允许我们为颜色,字体,输入字段等等设值。...每个小部件的文本样式必须手动地一个一个设置,但这仍然很简单: 为了进一步提高效率,Flutter可以热重新加载应用程序,因此您无需在每次更改UI时重新打开它。...您现在可以进行更改,保存,然后在大概一秒内就能看到更改后的效果。 4 库 Flutter提供了许多开箱即用的强大功能,但有时你需要更多功能。

    3.1K20

    使用 Android Studio 进行 Flutter 开发

    IntelliJ 的主工具栏 选择目标设备 在 IDE 中打开 Flutter 项目时,你会在工具栏的右侧看到一组 Flutter 的特定按钮。...“如果 Run 和 Debug 按钮不可用且未显示目标设备,则意味着 Flutter 未发现任何已连接的 iOS 、Android 设备或模拟器。你需要连接设备或启动模拟器才能继续。...在进行操作之前,请确保你使用的是最新版本的 Android Studio 和 Flutter 插件。 在“项目视图”中,你可以在 flutter 应用的根目录下看到一个 android 的子目录。...你会在编辑器的顶部看到一个 "Flutter commands" 的横幅, 包含一个 Open for Editing in Android Studio 的标签,点击它。...如果你还未运行过你的 Flutter 应用,可能会在打开 android 项目时,看到 Android Studio 构建失败的报告。

    6.4K30

    Flutter Hello World

    只要输入 import 'pfm'; 就会有提示了,这时候只要选第一行就Ok啦 接下来会看到这一句: // 每个应用都需要有个顶级的 main() 入口函数才能执行。...当widget的状态发生变化时,widget会重新构建UI,Flutter会对比前后变化的不同, 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改(译者语:类似于React/Vue中虚拟DOM的...widget是否需要管理一些状态。...唯一不同的是: StatelessWidget 是无状态的,意味着无法通过数据变更而更新 StatefulWidget 是有状态的,意味着可以通过数据变更而更新,需要通过setState 来管理状态。...我没有打错字,因为对代码的渲染结构进行了更改,所以需要使用 R) 什么?你居然不知道 R 键什么意思?那你现在还不立刻马上赶紧回去复习?!! 什么?你居然还分不清 r 和 R 的区别?!!

    1.2K10

    浅谈跨平台框架 Flutter 的搭建与运行

    二、更新环境变量:若想在Windows系统自带命令行运行flutter命令,开发者需要添加以下环境变量到用户PATH:“控制面板->用户账户->更改我的环境变量”,同时,在“用户变量”下检查是否有名为“...配置完成后,还需用source命令重新加载,具体命令如下: source ~/.bash_profile 完成以后, flutter的安装工作已基本完成,但要进行开发,还需要使用命令来检测其是否成功安装...如果需要使用不同版本的Xcode,请指定相应的路径。 确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild –license 。....png] 4.体验热重载:Flutter可以通过热重载实现快速的开发周期,热重载无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态。...对代码进行简单的更改,然后使用IDE或命令行工具进行重新加载,可以在设备或模拟器上看到更改。

    3.7K40

    Flutter 中 stateless 和 stateful widget 的区别

    考虑到这一点,我们将研究 Flutter 中的无状态和有状态小部件,并解释它们的区别。 让我们从这个问题开始:Flutter 中一个小部件的状态是什么?...Flutter 内置了几个小部件,它们都分为有状态和无状态小部件。 无状态小部件 在 Flutter 应用程序运行期间,无状态小部件无法更改其状态。这意味着在应用程序运行时无法重绘无状态小部件。...当我们创建不需要一次又一次重绘小部件的应用程序时,我们使用无状态小部件。例如,当我们创建一个AppBar](,无状态小部件可以是不需要更改的脚手架或图标。 无状态小部件类仅在初始化时调用一次。...它将被渲染一次并且不会自行更新setState() 有一个内部并且可以在输入数据更改时重新渲染setState() 静态小部件 动态小部件 除非发生外部事件,否则无法在运行时更新 可以在运行时根据用户操作或数据更改进行更新...结论 我们已经介绍了有状态和无状态小部件之间的差异,以帮助您构建更好的 Flutter 应用程序。从示例中,我们了解了无状态和有状态小部件的作用以及如何知道您的用例需要哪个类。

    2.3K10

    Flutter实现一个酷炫带动画的列表型多选日历组件

    由于项目需要,用Flutter重构了之前用Android做过的日历组件,整体效果感觉不错,流畅度甚至超过原来的,这里需要提一下官网的做法,如下: var date = DateTime.now(...showDatePicker实现的,支持MD和IOS的风格,但据我了解,只支持单选,不支持开始和结束日期的区间选择,体验也与我需要的效果不一致,所以经过考虑之后,还是决定自己写一个。...底部弹出方式的日期方式 这块其实很简单,CalendarList本身就支持从底部滑出,调用的方法是showModalBottomSheet,代码如下: showModalBottomSheet(...,这是一个典型的子组件调用父组件改变其状态的代码段,通过selectStartTime和selectEndTime是否为null判断用户的点击行为落在哪个if else里面,通过setState重新设置开始和结束日期...此例已经作为补充内容添加至我的《Flutter从0到1构建大前端应用》一书的源码中,是一个知识点比较多的综合案例,再版时会根据读者意见考虑加入到书中讲解。

    1.8K30
    领券