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

最新推荐文章于 2024-07-22 19:36:50 发布

codekxx

最新推荐文章于 2024-07-22 19:36:50 发布

阅读量1.4k

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/codekxx/article/details/106849354

版权

本文介绍了如何在Flutter中使用showModalBottomSheet组件，不依赖任何状态管理库，实现底部弹出框内容的动态更新和数据回调。通过自定义Widget和事件传递，详细阐述了实现过程。

摘要由CSDN通过智能技术生成

void _showBottom(){
   
    showModalBottomSheet(
        context: context,
        builder: (_) {
   
          return StatefulBuilder(builder: (_,setBottomSheetState)

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

codekxx

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

flutter showModalBottomSheet传值

IT技术专栏

10-18

2218

File selectFile; showModalBottomSheet( context: context, builder: (BuildContext context) { return new Column( ...

【 Flutter 】超详细使用showModalBottomSheet 和 AnimationController 实现一个优雅的自定义动态底部弹窗

qq_40241320的博客

08-02

6515

使用showModalBottomSheet和 animationController打造一个丝滑动画的自定义改变高度的底部弹窗

参与评论您还未登录，请先登录后发表或查看评论

Flutter-状态管理

最新发布

MIILN的博客

07-22

985

Flutter中常用的状态管理方式，第三方库Provider中部分源码的分析以及主要功能的使用示例

Flutter之底部面板showModalBottomSheet

chunchun1230的博客

01-21

6036

模态底部面板是菜单或对话框的替代方案，可防止用户与其他控件进行互动，可以使用showModalBottomSheet函数创建和显示模态底部面板。代码如下：效果如图所示: ...

Flutter - 弹出底部菜单Show Modal Bottom Sheet

weixin_30894583的博客

11-25

868

在很多安卓App上，有很多底部弹出的菜单，这个在Flutter上同样可以实现。先看一下效果嗯，就是这样子的，当用户点击菜单区域以外的时候，菜单会自动关闭。下面就看一下Dart语言实现 floatingActionButton: new FloatingActionButton( onPressed: () { sh...

Flutter更新showDialog以及showModalBottomSheet中的状态中的内容

diangedan的专栏

11-23

1723

Flutter更新showDialog以及ModalBottomSheet中的状态中的内容 1、Flutter更新showDialog中的状态中的内容很多人在用showDialog的时候应该都遇到过这个问题，使用showDialog后，通过setState()无法更新当前dialog。其实原因很简单，因为dialog其实是另一个页面，准确地来说是另一个路由，因为dialog的关闭也是通过navigator来pop的，所以它的地位跟你当前主页面一样。这个概念一定要明确，因为无论在Android或iOS中

Flutter底部弹出框showModalBottomSheet实现顶部圆角

Flutter|Android移动开发

03-27

5235

无图无真相~ 由于showModalBottomSheet默认的背景颜色为白色，这时需要将showModalBottomSheet的背景颜色设置为透明，然后将内部控件设置为圆角即可。具体代码： void _clickSpec(){ _specModel.initData(model.normInfoBean.norms); showModalBottomSheet( ...

Flutter 模仿实现苹果底部弹出框

01-07

Flutter 模仿苹果底部弹出框新增BottmSheetDialog.dart // // 文件名称：SBottmSheetDialog.dart // // 创建日期：2020-01-010 // // 文件描述：底部弹出框 // // 修改履历： // ---------------------------------...

Flutter高阶技术：如何实现自定义弹出菜单框

06-03

本篇文章将深入探讨如何在Flutter中创建自定义弹出菜单框，包括它的设计原理、实现步骤以及相关组件的使用。首先，我们要理解弹出菜单框的基本概念。它通常是在用户点击某个按钮或进行特定操作后，从屏幕边缘滑出...

Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能动态列表

06-04

此资源是关于移动端框架Flutter（基于Android）的...此资源介绍的相关内容有：StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表。适合新手学习移动端开发，也适合老司机参考。

Flutter - 底部弹窗 showModalBottomSheet自定义bottom弹框

GY5338的博客

01-06

788

Flutter - showModalBottomSheet自定义bottom弹框代码撂这儿了代码撂这儿了 import 'package:flutter/material.dart'; class AlertGridItem extends Object { final String title; final int codePoint; // 图标使用的iconfont昂 AlertGridItem(this.title, this.codePoint); } // Util

flutter 底部弹窗 showModalBottomSheet 自定义样式和回调

热门推荐

qq_36071410的博客

02-28

1万+

//data 需要传递的数据 context 上下文需要显示的地方调用： _showBuyModalBottomSheet( data, context: context, ); //_showBuyModalBottomSheet方法实现有状态组件的showModalBottomSheet _showBuyModalBottomSheet(Data data, {@required B...

Flutter ShowModalBottomSheet 自定义高度和滚动

Dream It Possible

11-27

3064

这是一个官方的组件但是两个滑动在一起会有冲突简单的实现了一下滑动到头自动收起这个组件。

Flutter - 简单封装 showModalBottomSheet （仿iOS效果）

iotjin的专栏

02-16

2339

###效果图使用方法导入 jhBottomSheet.dart JhBottomSheet.showText( context, ['hello', 'world', "123", "456"], clickCallback:(index,text) { print(index); print(text); } ...

flutter showModalBottomSheet更新状态

microcosm1994的博客

10-15

2392

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

flutter 底部弹窗showModalBottomSheet 超过9/16高度键盘弹出不影响弹窗布局

SCDNBB的博客

03-21

4016

flutter 底部弹窗showModalBottomSheet 超过9/16高度键盘弹出不影响弹窗布局问题展示：底部弹窗的高度超过9/16（必须要用isScrollControlled: true），并且有输入框输入文本。当焦点在文本里，键盘会弹出把底部弹窗给顶出去。问题：屏幕高度< 弹框+键盘高度 flutter 的底部弹窗控件为showModalBottomSheet 超过9/16高度 isScrollControlled: true, showModalBottomSheet(

flutter中showModalBottomSheet用法

weixin_42322441的博客

10-23

2882

showModalBottomSheet用法常用属性 shape可以设置成自己想要的形状！通常直接设置圆角即可 isScrollControlled：是否时全屏还是半屏 isDismissible：外部是否可以点击，false不可以点击，true可以点击，点击后消失 backgroundColor : 通常可以设置白色和透明，所有属性及默认属性 Color backgroundColor, double elevation, //高度？？？不知道用处 ShapeBorder shape, //mo

flutter showbottomsheet showmodalbottomsheet底部弹出框

weixin_34318326的博客

12-06

1661

2019独角兽企业重金招聘Python工程师标准>>> ...

flutter 底部模态框除了showModalBottomSheet 还有什么

05-30

除了 `showModalBottomSheet` 方法，Flutter 还提供了 `showModalBottomSheet` 方法的一个变体 `showModalBottomSheet()`，该变体方法可以在底部模态框滑动时提供更多的手势控制。以下是一个使用 `DragegableScrollableSheet` 实现的底部模态框的示例： ```dart void _showBottomModalSheet(BuildContext context) { showModalBottomSheet<void>( context: context, builder: (BuildContext context) { return DraggableScrollableSheet( expand: false, builder: (BuildContext context, ScrollController scrollController) { return Container( color: Colors.white, child: ListView.builder( controller: scrollController, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text('Item $index'), ); }, itemCount: 100, ), ); }, ); }, ); } ``` 在上面的示例中，我们使用 `DraggableScrollableSheet` 组件作为构建底部模态框的 Widget，并提供了一个 `ScrollController`，以便允许用户滚动底部模态框中的内容。 `expand` 属性指定底部模态框是否可以通过拖动来扩展到全屏幕大小。`ListView.builder` 构建了一个有 100 个 ListTile 的列表。