Flutter之底部面板showModalBottomSheet

最新推荐文章于 2024-08-16 15:30:00 发布
最新推荐文章于 2024-08-16 15:30:00 发布
阅读量6k 收藏
点赞数
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chunchun1230/article/details/86572908
版权

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

 代码如下：

 

效果如图所示:

 

 

chunchun1230
关注
专栏目录
Flutter质感设计之持久底部面板
08-27
总结来说，Flutter的质感设计之持久底部面板是通过`Scaffold`和`showBottomSheet`方法实现的，它允许开发者在应用中添加一个可扩展的区域，展示额外信息或功能。这个特性极大地丰富了用户体验，使得应用更加灵活和...
【 Flutter 】 超详细 使用showModalBottomSheet 和 AnimationController 实现一个优雅的自定义动态底部弹窗
qq_40241320的博客
08-02 6536
使用showModalBottomSheet和 animationController打造一个丝滑动画的自定义改变高度的底部弹窗
Flutter - 简单封装 showModalBottomSheet （仿iOS效果）
iotjin的专栏
02-16 2339
###效果图 使用方法 导入 jhBottomSheet.dart JhBottomSheet.showText( context, ['hello', 'world', "123", "456"], clickCallback:(index,text) { print(index); print(text); } ...
Flutter 初识：对话框和弹出层
最新发布
yang_6799的博客
08-16 1680
Dialog 是一个 Flutter 小部件，用于显示对话框。
Flutter中showModalBottomSheet的属性介绍和使用
爱喝水程序员的博客
01-04 2580
在Flutter中，`showModalBottomSheet`是一个常用的工具，用于在屏幕底部显示模态底部面板。了解其属性将帮助您更好地定制和控制底部模态框的外观和行为。
Flutter 入门与实战（十一）：底部弹窗ModelBottomSheet详解
2401_84166497的博客
04-11 2203
弹窗的高度指定为屏幕高度的一半，这可以通过自定义组件的Container高度实现。增加了标题栏，且标题栏有关闭按钮：标题在整个标题栏是居中的，而关闭按钮是在标题栏右侧顶部。这可以通过Stack堆栈布局组件实现不同的组件层叠及位置。左上角和右上角做了圆角处理，这个可以通过Container的装饰完成，但需要注意的是，由于底部弹窗默认是有颜色的，因此要显示出圆角需要将底部弹窗的颜色设置为透明。自定义弹窗的代码如下所示：),),
Flutter ShowModalBottomSheet 自定义高度和滚动
Dream It Possible
11-27 3068
这是一个官方的组件 但是两个滑动在一起会有冲突简单的实现了一下滑动到头自动收起这个组件。
Flutter 通过BottomSheetDialog实现抖音打开评论区，内容自动上推、缩放效果
上辈子作恶多端，这辈子写前端。
09-08 1677
这里本来是想通过改变transitionAnimationController.value的值来改变弹窗的高度，但是实际中发现或的效果不理想，不知道为什么。参数，这个就是对话框显示的动画控制器了值为[0,1]，当全部显示是为1。那么当将弹窗设为固定高度时，就可以通过这个值进行计算了。通过上面这样处理，内容区的上移和缩小就已经实现了。
Flutter质感设计之模态底部面板
01-20
在本文中，我们将深入探讨如何在Flutter中实现模态底部面板，并了解其相关知识点。 首先，模态底部面板通常用于替代传统的菜单或对话框，当需要用户从一组选项中做出选择时，或者展示一些临时性的信息时，模态底部...
showModalBottomSheet的基本用法，自定义背景和状态管理
u012941592的博客
05-08 5014
最近使用到了showModalBottomSheet这个组件，俗话说好记性不如烂笔头，总结总结。 1.源码 Future<T>showModalBottomSheet<T>({ @requiredBuildContextcontext, @requiredWidgetBuilderbuilder, ColorbackgroundColor, //面板背景颜色 doubleelevation, ShapeBordershap...
【Flutter】【widget】底部弹出框bottomSheet等widget 的使用和说明
自动人生博客
10-26 2386
从底部弹出的提示框，或者是选择，显示框的功能。合理的设计和运用弹出来确认相关的选择//弹出时长 _animationController . reverseDuration = const Duration(milliseconds : 500);//收回的时长 // _animation = Tween(begin: 0.0, end: 300.0).animate(_animationController);
flutter中showModalBottomSheet用法
weixin_42322441的博客
10-23 2886
showModalBottomSheet用法 常用属性 shape可以设置成自己想要的形状！通常直接设置圆角即可 isScrollControlled：是否时全屏还是半屏 isDismissible：外部是否可以点击，false不可以点击，true可以点击，点击后消失 backgroundColor : 通常可以设置白色和透明， 所有属性 及默认属性 Color backgroundColor, double elevation, //高度？？？不知道用处 ShapeBorder shape, //mo
Flutter之BottomSheet
菜鸟博客
05-29 8767
在Flutter之SnackBar原理详解详细的介绍了SnackBar的使用极其原理，SnackBar主要功能是提供了一个简单的消息，虽然跟用户有一定的交互。但是其目的主要是提示性消息。且会自动消失。除了SnackBar之外，Flutter又提供了一个BottomSheet，该组件可以在屏幕底部展示了一个可供用户交互功能的页面。 通过本篇博文你可以了解到： 1、showBottomSheet和showModalBottomSheet的区别 2、关闭BottomSheet的方式 3、BottomSheet的基
Flutter showModalBottomSheet用法
yaochangliang的博客
06-21 588
flutter showModalBottomSheet
Flutter 中的 BottomSheet 小部件：全面指南
smileKH的博客
05-18 930
是 Flutter 的 Material 组件库中的一个组件，用于创建从屏幕底部弹出的模态视图。它通常用于提供额外的操作或信息，而不会完全打断用户当前的操作流程。Text('自定义 BottomSheet'),},child: Text('关闭'),),],),},
flutter的showModalBottomSheet遇到的坑
热门推荐
王温暖的博客
07-29 3万+
在使用官方的showModalBottomSheet这个组件时到目前为止遇到了三个比较坑的地方： 1. 无法直接设置圆角； 2. 组件最多只能撑满半屏幕，再多就出界了； 3. 在这个组件里面如果有选择按钮等其他一些需要改变状态的组件时，即便使用setState，状态也无法更新。 我们解决完后的效果如下， 解决问题一：使用stack包裹住子组件解决圆角的问题，且需要设置背景颜色为Col...
Flutter 底部弹框 showModalBottomSheet 使用Demo
代码小疯子
11-01 3815
Flutter 底部弹框 showModalBottomSheet 使用Demo
flutter之 底部弹出BottomSheet
tiger_gy的博客
08-04 1367
项目中遇到多种条件筛选的情况，我使用了flutter官方的BottomSheet组件来解决了我的问题。先看一下效果图： ModalBottomSheet 这个ModalBottomSheet就是类似一个Dialog，有一个半透明的背景层，然后上面显示你自定义的内容。 用法非常简单，Flutter提供了一个showModalBottomSheet的方法弹出一个BottomSheet。 实现代码： ...
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 的列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值