Flutter 如何更新showModalBottomSheet 中的数据

Flutter 中的 BottomSheet 小部件:全面指南 是 Flutter 的 Material 组件库中的一个组件,用于创建从屏幕底部弹出的模态视图。它通常用于提供额外的操作或信息,而不会完全打断用户当前的操作流程。Text('自定义 BottomSheet'),},child: Text('关闭'),),],),}, 阅读详情
showDialog(
 context: context,
 builder: (context) {
     String label = 'test';
     //StatefulBuilder
     return StatefulBuilder(
         //在这里为了区分,在构建builder的时候将setState方法命名为了setDialogState。
         builder: (context, setDialogState) {
             print('label = $label');
             return GestureDetector(
                 child: Text(label),
                 onTap: () {
                     label = 'test8';
                     print('onTap:label = $label');
                     // 注意不是调用老页面的setState,而是要调用builder中的setDialogState。
                     setDialogState(() {});  
                 },
             );
         },
      );
 });

bottomsheet

bool btnState=false;
showModalBottomSheet(
   context:context, 
   builder:(BuildContext context){
       return StatefulBuilder(
         //在这里为了区分,在构建builder的时候将setState方法命名为了setBottomSheetState。
         builder:(context1, setBottomSheetState) {
           return Container(
                  child:OutlineButton(
                      onPressed: (){
                               // 注意不是调用老页面的setState,而是要调用builder中的setBottomSheetState
                               setBottomSheetState(() {
                                  btnState=!btnState;
                               });
                      },
                      child:Stack(
                                children: <Widget>[
                                  Opacity(
                                    opacity: btnState ? 0.0 : 1.0,
                                    child: Text("aa"),
                                  ),
                                  Opacity(
                                      opacity: btnState ? 1.0 : 0.0,
                                      child: Text("bb"),
                                  ),
                                ],
                      ),
                  ),
           ),
         }
       )
   }
)

Flutter-底部选择弹窗(showModalBottomSheet) 现在有个需求,需要用底部弹窗来添加定时的重复。在这里使用原生的showModalBottomSheet来实现。 阅读详情

相关推荐

Flutter底部弹出框showModalBottomSheet不使用状态管理插件实现动态改变数据回调

void _showBottom(){ showModalBottomSheet( context: context, builder: (_) { return StatefulBuilder(builder: (_,setBottomSheetState){//重点 return BottomSheetFilterWidget( stateList1: _stateList1,

Flutter|Android移动开发 1668

Flutter showBottomSheet

showBottomSheet在底部弹出。 例子: import 'package:flutter/material.dart'; class BottomSheetDemo extends StatefulWidget { @override State&amp;lt;StatefulWidget&amp;gt; createState() =&amp;gt; _BottomSheetDemo(); } c...

老孟Flutter 1万+

flutter showModalBottomSheet更新状态

使用StatefulBuilder方法 在需要更新状态的部件的外层嵌套一个 StatefulBuilder 部件,此方法其他一些弹出框也适用。 buildWidget(BuildContext context) { int index = 0; return showModalBottomSheet( context: context, builder: (context) => StatefulBuilder( // 嵌套一个StatefulB

microcosm1994的博客 2786

【Flutter】【widget】底部弹出框bottomSheet等widget 的使用和说明

从底部弹出的提示框,或者是选择,显示框的功能。合理的设计和运用弹出来确认相关的选择//弹出时长 _animationController . reverseDuration = const Duration(milliseconds : 500);//收回的时长 // _animation = Tween(begin: 0.0, end: 300.0).animate(_animationController);

自动人生博客 3144

Flutter与OpenHarmony融合开发实践:年龄计算器项目解析

跨平台开发框架Flutter与国产操作系统OpenHarmony的结合为开发者提供了新的技术可能性。Flutter的跨平台能力使其可以适配不同操作系统,而OpenHarmony作为新兴的国产操作系统生态,其独特的FA模型(Feature Ability)和UI规范需要特殊处理。在工程实践中,这种跨界融合既考验开发者的环境配置能力,也验证了Flutter在鸿蒙生态的可行性。本文通过一个具体的年龄计算器项目,展示了如何处理日期计算的核心算法、鸿蒙UI规范适配以及本地存储方案选择等关键技术点,为开发者提供了Flu

weixin_33923762的博客 388

Flutter之BottomSheet

在Flutter之SnackBar原理详解详细的介绍了SnackBar的使用极其原理,SnackBar主要功能是提供了一个简单的消息,虽然跟用户有一定的交互。但是其目的主要是提示性消息。且会自动消失。除了SnackBar之外,Flutter又提供了一个BottomSheet,该组件可以在屏幕底部展示了一个可供用户交互功能的页面。 通过本篇博文你可以了解到: 1、showBottomSheet和showModalBottomSheet的区别 2、关闭BottomSheet的方式 3、BottomSheet的基

菜鸟博客 9529

showModalBottomSheet 中的setstate没有效果

showModalBottomSheet不能实时更新数据,setstate没有效果,原因是: setstate还是整个页面的刷新,不是showModalBottomSheet中的刷新,所以需要在showModalBottomSheet中重新定义刷新方法,然后调用此方法刷新即可,如下所示: 需要在showModalBottomSheet内部,布局外部添加一层StatefulBuilder,...

龚礼鹏的博客 2912

Avalonia v11实战:手把手教你从零创建第一个跨平台桌面App(含设计器不显示的解决方案)

本文详细介绍了如何使用Avalonia v11从零开始创建跨平台桌面应用,包括环境准备、项目创建、界面设计及常见问题解决方案。特别针对设计器不显示等常见问题提供了实用解决方法,帮助.NET开发者快速掌握这一强大的UI框架,实现Windows、macOS和Linux多平台应用开发。

weixin_30417487的博客 163

Flutter showModalBottomSheet数据没有刷新问题

1.showModalBottomSheet数据未刷新 2.采用setState刷新,页面没有被重新绘制 3.数据是在showModalBottomSheet内部刷新的,用的方法是setDialogState 4.或者在showModalBottomSheet前就加载完成数据,比如我之前的版本是_getDio.then(showModalBottomSheet…),接口调完再弹出表单 showModalBottomSheet( context: context, builder: (BuildContext

m0_47265814的博客 2675

一生一芯预学习:从零搭建Verilator仿真环境与NVBoard实战

本文详细介绍了如何从零搭建Verilator仿真环境,并完成NVBoard实战项目,为'一生一芯'预学习提供完整指导。内容包括环境配置、工具安装、波形生成、自动化构建及可视化调试技巧,帮助初学者快速掌握数字逻辑设计与仿真验证的核心技能。

keras9composer的博客 700

deap数据集的情绪检测代码环境搭建与实现

deap数据数据集很大

f的博客 4157

Flutter之底部自定义弹框➕CupertinoPicker选择器做二级选择器+界面更新

city = val;});在弹框中的确定容器添加手势,onTap方法中调用onChanged方法,将二级选择器中选中的站点名字作为参数,重绘UI,Navigator.pop关闭弹框。} , )

qq_53163443的博客 2272

视觉惯性SLAM系列——ORB-SLAM3的整体介绍及各个线程的功能(五)

跟踪线程(Tracking Thread)作用:负责处理每一帧图像,进行相机位姿的估计和定位。它首先执行与前一帧图像的特征匹配,然后通过仅运动(motion-only)BA(Bundle Adjustment)优化位姿。如果跟踪失败,它会尝试在所有地图中进行重定位。此外,跟踪线程还负责决定何时插入新的关键帧,以及何时将关键帧从局部地图中移除。详细介绍见局部建图线程(Local Mapping Thread)作用:管理局部地图,向活跃地图添加关键帧和点,移除多余的关键帧和点。

曾经也曾立志 1004

Flutter 弹窗与底部菜单实战:Dialog、AlertDialog 与 showModalBottomSheet 的进阶应用

本文深入探讨了Flutter中弹窗与底部菜单的进阶应用,包括Dialog、AlertDialog和showModalBottomSheet的核心用法与实战技巧。通过详细代码示例和最佳实践,帮助开发者掌握如何实现动态内容加载、样式定制和性能优化,提升移动应用的用户体验。特别针对电商、内容管理等场景提供了实用解决方案。

read5的博客 201

unity | 动画模块之滚动选项框

动画模块之滚动选项框

菌菌兹的博客 2074

Ferromagnetic soft continuum robots

本文来自机器人领域顶刊,Science Robotics。介绍了一种铁磁软连续体机器人,主要贡献为1)介绍了一个基于磁性微粒和聚合物的软连续体机器人的制造方法,在机器人外表面涂了一层水凝胶,极大地降低了摩擦阻力;2)并研究了在磁场下,不同粒子体积分数下,此机器人的驱动性能;利用手动操控的磁铁,进行了许多实验证明该机器人性能的优异性。 铁磁软连续体机器人 Ferromagnetic soft continuum robots [1] Paper Link Authors: Kim, Yoonho, et al

XU Yangxin的博客 1372

Flutter for OpenHarmony音乐播放器App实战:我喜欢的音乐实现

本文介绍了"我喜欢的音乐"页面实现,包括渐变封面设计、歌曲列表展示和操作功能。使用StatelessWidget构建页面,通过LinearGradient创建渐变背景,ListView.builder高效渲染歌曲列表。页面提供排序、播放、收藏等核心功能,采用GetX进行路由管理。代码结构清晰,涵盖了歌单头部、列表项和操作菜单的实现细节。

2601_94948006的博客 719

Python内置函数zip()——《Python内置函数手册》Python老吕编著

zip()函数是 Python 中的一个内置函数,用于将多个可迭代对象(如列表、元组、字符串等)中对应的元素打包成一个个元组,然后返回由这些元组组成的迭代器。zip()函数常用于将多个序列并行迭代,或者用于数据对齐。zip()它返回一个迭代器,这意味着你可以逐个获取打包后的元素,而不是一次性将所有元素加载到内存中。如果输入的可迭代对象长度不一致,zip()会以最短的可迭代对象为准,只打包到最短对象的末尾。它可以用来并行迭代多个序列,使得代码更加简洁和高效。在接下来的章节中,我们将详细介绍。

Python老吕的博客 680

Flutter for OpenHarmony音乐播放器App实战24:我喜欢的音乐实现

本篇将详细介绍如何实现我喜欢的音乐页面,包括歌单头部设计、排序功能和歌曲操作菜单。

2601_94986836的博客 669

新手秒变高手:使用一键脚本快速安装OpenClaw并完成初始化配置

一键脚本是一种自动化工具,可以帮助用户快速完成软件的安装和配置过程,无需手动执行繁琐的命令。OpenClaw提供了官方的一键安装脚本,让新手用户也能轻松部署OpenClaw。

一键难忘的博客 358

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

flutter学习笔记

1.跨平台移动UI框架2.与现有的代码一起工作(可以直接嵌入到原生代码中或直接把原生代码嵌入到自己的代码中运行)3. 完全免费、开源。

haoxuhong的博客 8242

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

Flutter for OpenHarmony社团管理App实战:消息中心实现

消息中心页面实现 本文介绍了一个Flutter消息中心页面的实现方案,主要功能包括: 页面结构:使用Scaffold搭建基础框架,包含标题栏和消息列表 数据管理:通过Provider获取消息数据并自动更新视图 空状态处理:当无消息时显示友好提示和图标 消息列表:使用Card和ListTile构建消息卡片,区分系统消息和普通消息 时间显示:将时间格式化为"几分钟前"、"几小时前"等友好格式 交互功能:点击消息可查看详情 实现要点包括: 使用Consumer监听数据变化

2603_94946210的博客 618

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

技术博客:Flutter × Harmony6.0 跨端开发实践 —— 构建“TechSorter”技术博客显示排序功能

通过本次 Flutter × HarmonyOS 6.0 跨端开发实践,我深刻体会到现代移动开发框架在提升开发效率和用户体验方面的巨大优势。TechSorter 技术博客的底部弹窗排序功能,不仅实现了按发布时间、浏览量、评论数的灵活排序,还保证了跨端一致的交互体验,用户可以在手机、平板甚至折叠屏设备上获得同样流畅的操作感。Flutter 提供的高度可复用组件和简洁的状态管理,使开发过程快速且易于维护,而 HarmonyOS 6.0 的分布式能力为未来的多设备协作和数据同步提供了无限可能。

一键难忘的博客 1万+

Flutter 入门与实战(十一):底部弹窗ModelBottomSheet详解

弹窗的高度指定为屏幕高度的一半,这可以通过自定义组件的Container高度实现。增加了标题栏,且标题栏有关闭按钮:标题在整个标题栏是居中的,而关闭按钮是在标题栏右侧顶部。这可以通过Stack堆栈布局组件实现不同的组件层叠及位置。左上角和右上角做了圆角处理,这个可以通过Container的装饰完成,但需要注意的是,由于底部弹窗默认是有颜色的,因此要显示出圆角需要将底部弹窗的颜色设置为透明。自定义弹窗的代码如下所示:),),

2401_84166497的博客 2676

Flutter 实战:notes_app 便签应用的底部编辑器、新增编辑删除与鸿蒙适配解析

文章摘要 《Flutter 实战:notes_app 便签应用开发全解析》详细剖析了一个轻量级便签应用的实现过程。该应用基于Flutter框架,包含新建、编辑、删除便签等基础功能,采用StatefulWidget管理状态,使用showModalBottomSheet实现底部编辑器。文章从项目定位、工程结构、主题配置到核心代码实现进行了全面讲解,重点分析了表单控制器管理、状态更新机制、列表渲染优化等关键技术点,并特别说明了鸿蒙平台的适配注意事项。该项目虽然功能简单,但完整覆盖了移动应用开发中的常见交互模式,适

g_z_x_的博客 387
上一篇: APK 加固之后二次签名的问题
下一篇: Flutter 监听前台和后台切换的状态
Leonardo_Fibonacci
博客等级 码龄10年 110粉丝 247原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值