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

如何使用flutter的showModalBottomSheet接收数据并更改其值?

使用Flutter的showModalBottomSheet接收数据并更改其值的步骤如下:

  1. 首先,在需要调用showModalBottomSheet的页面中,定义一个变量来存储接收的数据。例如,假设我们要接收一个字符串类型的数据,可以定义一个名为data的变量。
代码语言:txt
复制
String data = '';
  1. 在需要调用showModalBottomSheet的地方,使用showModalBottomSheet方法打开底部弹出框,并在builder属性中构建弹出框的内容。在builder中,可以使用StatefulBuilder来创建一个有状态的小部件,以便在弹出框中更改数据。
代码语言:txt
复制
showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return StatefulBuilder(
      builder: (BuildContext context, StateSetter setState) {
        return Container(
          // 弹出框的内容
        );
      },
    );
  },
);
  1. 在弹出框的内容中,可以使用各种Flutter小部件来构建用户界面。例如,可以使用TextField来接收用户输入的数据。
代码语言:txt
复制
TextField(
  onChanged: (value) {
    setState(() {
      data = value;
    });
  },
);
  1. 当用户在弹出框中输入数据时,通过setState方法更新data变量的值。这将触发Flutter框架重新构建弹出框的内容,并显示更新后的值。
  2. 在需要使用接收到的数据的地方,可以直接使用data变量。

完整示例代码如下:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  String data = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Modal Bottom Sheet'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open Bottom Sheet'),
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return StatefulBuilder(
                  builder: (BuildContext context, StateSetter setState) {
                    return Container(
                      padding: EdgeInsets.all(16.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          TextField(
                            onChanged: (value) {
                              setState(() {
                                data = value;
                              });
                            },
                            decoration: InputDecoration(
                              labelText: 'Enter data',
                            ),
                          ),
                          RaisedButton(
                            child: Text('Close'),
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                          ),
                        ],
                      ),
                    );
                  },
                );
              },
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.check),
        onPressed: () {
          // 使用接收到的数据
          print('Received data: $data');
        },
      ),
    );
  }
}

这样,当用户在底部弹出框中输入数据时,data变量将被更新,并且可以在其他地方使用该数据。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Python:使用多线程并发执行任务,并接收有序的返回值

image 在使用多线程时,简单的IO操作有时满足不了我们的需求,我们需要有序的接收返回值,例如:调用第三方API 我这个栗子是调用TTS的在线合成API,先看一下结果吧: image 左侧:正常的顺序执行...,共进行了4次调用,最后的总时间为4次之和 右侧:通过多线程并发执行,共进行了4次调用,整个执行时间大约为用时最长的一次的时间 先看一下要进行TTS的数据: ["我的公众号是Python疯子", "...内容没有花架子", "都是真实案例", "欢迎您的关注"] 顺序执行 顾名思义就是很简单的通过遍历调用API,然后对返回的音频数据进行拼接。...多线程并发 用多线程并发,可以很好的解决这个问题,但并发时的任务返回顺序是无法预料的,于是这里我用了sort进行序号话,这样就能知道返回的是那一句的内容了。...添加序号 然后进行TTS的API请求处理,对返回数据时同样进行添加对应的sort,对返回的数据再通过sort进行排序,这样就得到了有序的返回内容 image.png API请求处理返回值处理 image.png

1.9K10
  • 【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )

    文章目录 一、浮动按钮及点击事件 二、底部显示按钮组件 三、手势检测器组件 四、image_picker 完整代码示例 一、浮动按钮及点击事件 ---- 一般使用 Scaffold 组件作为界面的根布局组件...appBar: , // 设置页面主体元素组件 body: , // 创建浮动按钮 FloatingActionButton 组件 , 并设置给 floatingActionButton...onPressed 属性值 , 设置一个 VoidCallback?...类型的值 , FloatingActionButton( // 浮动按钮点击事件 onPressed: () { } ) VoidCallback 就是参数和返回值都是空的函数 ; onPressed...: () {} 括号中的参数为空 , 返回值也为空 ; /// Signature of callbacks that have no arguments and return no data. typedef

    1.6K30

    Flutter 中的Dialog

    在Flutter中,各种提示框、弹出框是如何实现的呢?今天我们就来聊一聊这个问题。 首先咱们来聊聊Flutter系统内置的Dialog。...Flutter系统内置的Dialog 关于Flutter系统内置的Dialog,我们可以从两个层面去讨论,一个是showDialog层面,一个是showModalBottomSheet层面。...showModalBottomSheet 前面我们讲了通过showDialog来弹出提示框,通过showDialog弹出的提示框都是在页面的中间。接下来我们看看如何从页面底部弹出一个Sheet。...如何自定义Dialog 上面我们讲了Flutter的内置提示框,还介绍了一款flutter第三方提示组件fluttertoast,通常情况下,这些就满足我们日常开发需求了。...接下来我们想,如何实现让自定义的Dialog自动消失的功能呢?

    4.2K30

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

    和尚在学习 Flutter 过程中需要处理一个类似 Android 中 PopupWindow 效果的分享弹框页。看似很简单的页面,里面却有很多值得尝试的地方。...---- GridView GridView 我们都很熟悉了,是日常中最常用到的控件之一,和尚前段时间学习了一下 ListView 的基本用法,GridView 的用法基本相同,和尚不再多说,只提醒一个属性...Modal 式工作表:是一个半透明的页面,默认占据屏幕一半 ScaffoldState.showModalBottomSheet。...2.3 若此时设置内容 Widget 数据量很多,效果如何呢,这就是和尚选择用 GridView 的原因,在现有宽高内进行可滑动操作即可,如图: ?...时间不长,还有很多不清楚和不理解的地方,如果有不对的地方还希望多多指教。

    1.2K71

    FreeRTOS例程3-串口中断接收不定长的数据与二值信号量的使用

    所以,这两个中断可以配合使用,串口接收中断实时接收数据,接受完一串数据后,空闲中断被触发,就可以对接收的一串数据分析处理了。这种方式不需要知道每次字符串的具体长度,因而可以接收不定长的串口数据。...1.2 信号量 FreeRTOS中的信号量是一种任务间通信的方式,信号量包括:二值信号量、互斥信号量、计数信号量,本次只使用二值信号量。...信号量用于任务间的同步,FreeRTOS是多任务系统,不同任务间可能需要某种同步关系,如串口中断接收完数据后,数据分析处理任务才能拿到数据进行分析,这就是一种同步。...串口空闲中断接受完一串数据后,可执行释放信号量操作,这时,数据分析处理任务就可以获取到信号量,进而可以处理串口数据了,实现了串口数据接收与数据处理的同步。 接下来的程序思路如下: ?...中断中使用信号量释放要使用ISR结尾的函数xSemaphoreGiveFromISR,否则程序就卡住了。

    3.5K12

    如何使用Spark Streaming读取HBase的数据并写入到HDFS

    温馨提示:要看高清无码套图,请使用手机打开并单击图片放大查看。...本篇文章主要介绍如何使用Spark Streaming读取HBase数据并将数据写入HDFS,数据流图如下: [6wlm2tbk33.jpeg] 类图如下: [lyg9ialvv6.jpeg] SparkStreamingHBase...MyReceiver:自定义Receiver通过私有方法receive()方法读取HBase数据并调用store(b.toString())将数据写入DStream。...的Receiver来查询HBase表中的数据,我们可以根据自己数据源的不同来自定义适合自己源的Receiver。...温馨提示:要看高清无码套图,请使用手机打开并单击图片放大查看。 推荐关注Hadoop实操,第一时间,分享更多Hadoop干货,欢迎转发和分享。

    4.3K40

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

    由于项目需要,用Flutter重构了之前用Android做过的日历组件,整体效果感觉不错,流畅度甚至超过原来的,这里需要提一下官网的做法,如下: var date = DateTime.now(...底部弹出方式的日期方式 这块其实很简单,CalendarList本身就支持从底部滑出,调用的方法是showModalBottomSheet,代码如下: showModalBottomSheet(...CalendarList滚动列表绘制 通过上面的讲述,我们了解了如何使用CalendarList组件,那么我们看看源码里面具体做了哪些。...下面,我们看看MonthView里面又做了啥 MonthView绘制 MonthView其实就是真正绘制每个月有多少个星期,然后每个星期的7天展示,通过每行(Row)放置7个DayNumber组件,根据每周循环出整个月的数据...,这是一个典型的子组件调用父组件改变其状态的代码段,通过selectStartTime和selectEndTime是否为null判断用户的点击行为落在哪个if else里面,通过setState重新设置开始和结束日期

    1.8K30

    ​Flutter实战 | 从 0 搭建「网易云音乐」APP(八、我的页面)

    、发现页)3.Flutter实战 | 从 0 搭建「网易云音乐」APP(三、每日推荐、推荐歌单)4.Flutter实战 | 从 0 搭建「网易云音乐」APP(四、排行榜、播放页面)5.Flutter实战...理清楚逻辑后,来看页面如何展示: ? 一共分为两块:「创建的歌单」、「收藏的歌单」。 两个模块的 UI 其实是一样的,只不过分在了不同的列表中。 那么先来看一下返回的数据是什么样的: ?...经过我一番查找后发现,不同类型的 Creator 值是不一样的,「我创建的歌单」里的数据 Creator.userId 是等于我登录后个人 id 的, 所以区分的代码如下: _selfCreatePlayList...= user.account.id).toList(); ok,数据有了,画页面就简单多了,从图上我们也可以看得出来,是可以展开和收回的。...这里也是简单的使用了 showModalBottomSheet来显示。 在点击更改歌单信息的时候弹出: ? 这里其实和上面新建歌单是一样的,只不过就是改了一点样式。

    1.5K00

    如何使用CIMplant收集远程系统中的数据并执行命令

    关于CIMplant CIMplant是WMImplant项目的C#实现,并扩展了原项目的相关功能,该工具 能够使用CIM或WMI来查询远程系统,并且可以使用用户提供的凭据或当前用户的会话来执行操作。...注意:某些命令仍然会使用PowerShell与WMI结合的方式来实现。...CIMplant使用了C#对@christruncer的WMImplant项目进行了重写和功能扩展,可以帮助广大研究人员从远程系统中收集数据、执行命令以及提取数据等等。...该工具允许使用WMI或CIM来进行连接,并且需要目标系统中中的本地管理员权限来执行任务操作。...通常,WMI使用DCOM作为通信协议,而CIM使用的是WSMan(或WinRM)。对于DCOM,我们可以做的第一件事是通过端口135寻找初始TCP连接。然后,连接和接收系统将决定使用一个新的端口。

    1.2K30

    flutter开发技巧汇总

    ,基于主题来统一app类字体大小,这样不至于使得你的app花里胡哨的,风格看起来不统一,请注意copyWith可以帮你改变某些属性,比如仅仅是字体颜色不符合你的要求,你可以针对性的进行更改。...4、你也许想实现一个顶部弹框,但是似乎flutter只提供了showModalBottomSheet这种,或者中间的弹框,而且占据的控件不会铺满整个width,所以 image.png 一个这样的弹框应该如何实现呢...5、SegmentedControl是苹果上的一个空间,flutter也有,只不过在使用的时候,需要import 'package:flutter/cupertino.dart';,用上后可以出去 image.png...,以及数据模型与界面逻辑分离,以便更好的组织代码,做出更加好维护,规模更大的app,笔者从官方举办的那个“枯燥无味的flutter show”节目中发现了一种比较好的设计模式,BLOC模式,很好的实现了代码中模型与数据的分离...如果你遇到了代码复用或者说页面规模太大需要用很好的模式来分离逻辑的问题,不妨了解一下我的另外一篇文章flutter中使用bloc 9、有时候我们需要一个背景为图片,而且边缘是有弧度的背景,那么,有没有什么很好的办法来做到

    1.8K81

    Flutter调用平台代码

    就像以前我们讲到文件存储、数据库操作单单靠使用Flutter我们是不能完成的,因为这些数据最终需要存储在特定的终端平台上,我们需要通过特点的代码来实现与特点的平台交互,所以我们引入了第三方库来完成这些操作...宿主监听的平台通道,并接收该消息。然后它会调用特定于该平台的API(使用原生编程语言) - 并将响应发送回客户端,即应用程序的Flutter部分。...从Android平台获取数据 ---- 和上面的类似,我们可以调用系统的方法,我们同样刻印调用我们自己写的方法并且返回调用方法的值,那么我们还是举个例子看下吧。...获取系统回调与监听 ---- 在前面的Flutter与平台的交互图上我们可以看到,使用MethodChannel可以调用原生平台的方法,在上面的例子中我们呢也给大家演示了如何使用,但是我们如何获取原生平台的监听与回调呢...类似于Android中的广播我们如何在Flutter接收到呢? 下面我们就需要来看下EventChannel了,借助于EventChannel(事件通道)我们可以很轻易的接收平台事件监听的回调。

    2.1K30

    Flutter+Dart聊天实例|flutter仿微信聊天|红包|朋友圈

    Flutter_Chatroom聊天室项目是基于flutter+dart技术开发的跨平台聊天实战案例,基本实现了登录/注册表单验证、消息表情发送、图片预览、红包/视频/朋友圈等功能。...顶部沉浸式状态条+底部tabbar 至于在flutter中如何实现顶部透明状态栏(去掉状态栏黑色半透明背景),去掉右上角banner,详细介绍可以去看这篇文章 https://segmentfault.com.../a/1190000022483730 flutter图标Icon及自定义IconData组件 flutter中自带图标使用非常简单 Icon(Icons.search) 可是如果想要自定义图标,如使用阿里图标...iconfont如何实现,这时就需要用到IconData来实现自定义图标了。...聊天消息滚动到最底部,使用的是ListView里controller控制器jumpTo方法实现 ScrollController _msgController = new ScrollController

    6.8K31

    CSS 如何设置背景透明,并使用 PHP 将十六进制的颜色值转换成 RGBA 格式

    我们在进行网页设计的时候,为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?...使用 RGBA 设置背景透明 我们使用 CSS 设置颜色的时候,一般适用十六进制值的颜色,比如黄色就是:#ffff00。其实颜色的值还可以通过 RGBA 的方式来设置。...使用 PHP 将十六进制的颜色值转换成 RGBA 格式 但是我们在后台设置颜色的时候,一般设置成十六进制的颜色值,然后再加上一个透明度: 那么怎么转换成 RGBA 格式呢?...我写了一个函数,使用 PHP 直接将十六进制的颜色值转换成 RGBA 格式或 RGB 格式(没有传递透明度): function wpjam_hex2rgba($color, $opacity=null...')'; } } 这个函数非常简单,只有两个参数,第一个是十六进制的颜色值,第二个是透明度,然后透明度没有传递,则生成颜色的 RGB 值,传递了则生成 RGBA 的值。

    3.2K40
    领券