Flutter | 修改 showModalBottomSheet 底部弹窗的最大高度

最新推荐文章于 2025-03-10 11:13:46 发布
最新推荐文章于 2025-03-10 11:13:46 发布
阅读量2.9k 收藏 2
点赞数 1
分类专栏： Flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59449563/article/details/131132721
版权
在Flutter中，ModalBottomSheetLayout的默认最大高度是屏幕高度的9/16。要改变这个限制，可以设置isScrollControlled为true以使弹窗高度等于屏幕高度，或者通过指定constraints来设定如导航栏底部的高度。例如，使用constraints:BoxConstraints(maxHeight:screenHeight-navibarHeight)可控制弹窗不超过导航栏底部。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

通过 _ModalBottomSheetLayout 源码可知，showModalBottomSheet 弹窗的最大高度为屏幕高的 9/16:

maxHeight: isScrollControlled
  ? constraints.maxHeight
  : constraints.maxHeight * 9.0 / 16.0,

如果想突破这个高度设置自己需要的值，可以通过 showModalBottomSheet 自带的两个参数实现：

  1. 将 isScrollControlled 设置为 true，此时弹窗最大高度为屏幕高度；
  2. 如果不想高度为屏幕高，可以通过设置参数 constraints 来指定高度，比如弹窗最高到导航栏的底部：
constraints: BoxConstraints(maxHeight: screenHeight - navibarHeight),
Flutter 底部弹窗详解
Flutter 跨平台技术研究
11-24 2811
在实际开发过程中，经常会用到底部弹窗来进行快捷操作，例如选择一个选项，选择下一步操作等等。在 Flutter 中提供了一个 showModelBottomSheet 方法用于弹出底部弹窗，本篇介绍如何使用底部弹窗。 实现效果 最终实现效果如图片所示，分布演示了基础的，全屏的和自定义的底部弹窗形式。 代码结构 在消息页面 message.dart 中，使用 Column 组件构建了三个按钮，点击每个按钮调用不同的底部弹窗显示。这部分代码不展示，核心注意的方式是按钮的 onPressed 响应方法，需要使.
Flutter ShowModalBottomSheet 自定义高度和滚动
Dream It Possible
11-27 3306
这是一个官方的组件 但是两个滑动在一起会有冲突简单的实现了一下滑动到头自动收起这个组件。
Flutter showModalBottomSheet如何调整高度
DennisJu的专栏
05-14 2930
解决方案： 1、 升级到新版本的Flutter，当前目前使用版本是1.22.5及以后就可 2、源码解读，官方调整原来写死比例的方案： @override BoxConstraints getConstraintsForChild(BoxConstraints constraints) { return BoxConstraints( minWidth: constraints.maxWidth, maxWidth: constraints.maxWidth, minHei
flutter-制作可缩放底部弹出抽屉评论区效果
最新发布
鹏多多的博客
03-10 1181
本文将详细介绍如何使用 Flutter 实现一个可缩放的底部弹出抽屉效果，用户点击特定区域后会弹出底部抽屉，抽屉的高度可以通过手指滑动进行调整。当手指滑动距离超过一定阈值时，抽屉会关闭；否则，抽屉会恢复到初始高度。
Flutter底部弹窗及修改弹窗最大高度
duolaimila的博客
07-02 4965
在Flutter中，想要实现底部弹窗只需要调用这个方法： showModalBottomSheet(context: null, builder: null) 具体使用方法： showModalBottomSheet( context: context, builder: (BuildContext context) { return Cont...
解决 Flutter showBottomSheet 设置高度没有作用的？
H.A.N的博客
12-13 1396
  最近在做一个电商项目，其中规格视图 Flutter 的底部弹窗，但是发现 showBottomSheet 在弹出的时候最高高度始终限制在了屏幕的二分之一的位置，再往高设置仍然还是一半高度，但是我们的弹窗设计稿是占据屏幕三分之二的位置的，显然 Flutter 的这个限制是无法满足需求的。   有问题的截图如下： 怎么去解决这个问题？？？   当时百度 Google了两个小时，发现了 Flutt...
flutter底部弹窗设置指定高度的方法
charlotte88的博客
03-29 3662
showSheet() { showModalBottomSheet( context: context, isScrollControlled: true, builder: (BuildContext context) { return FractionallySizedBox( heightFactor: 0.92, child: Scaffold( ...
flutter — showModalBottomSheet的高度设置问题
人间忽晚的博客
03-10 7910
// 弹出底部菜单列表模态对话框 Future<int> _showModalBottomSheet() { return showModalBottomSheet<int>( context: context, isScrollControlled: true, //一：设为true，此时为全屏展示 builder: (BuildC...
flutter——让底部弹框占满几乎整个屏幕的高度
z15267429952的博客
01-26 649
【代码】flutter——让底部弹框占满几乎整个屏幕的高度。
flutter 底部弹窗showModalBottomSheet 超过9/16高度 键盘弹出不影响弹窗布局
SCDNBB的博客
03-21 4165
flutter 底部弹窗showModalBottomSheet 超过9/16高度 键盘弹出不影响弹窗布局 问题展示：底部弹窗的高度超过9/16（必须要用isScrollControlled: true），并且有输入框输入文本。当焦点在文本里，键盘会弹出把底部弹窗给顶出去。问题：屏幕高度< 弹框+键盘高度 flutter 的底部弹窗控件为showModalBottomSheet 超过9/16高度 isScrollControlled: true, showModalBottomSheet(
2024年Android最新Flutter 入门与实战（十一）：底部弹窗ModelBottomSheet详解，前端音视频开发面试题
2401_84544461的博客
05-14 775
弹窗的高度指定为屏幕高度的一半，这可以通过自定义组件的Container高度实现。增加了标题栏，且标题栏有关闭按钮：标题在整个标题栏是居中的，而关闭按钮是在标题栏右侧顶部。这可以通过Stack堆栈布局组件实现不同的组件层叠及位置。左上角和右上角做了圆角处理，这个可以通过Container的装饰完成，但需要注意的是，由于底部弹窗默认是有颜色的，因此要显示出圆角需要将底部弹窗的颜色设置为透明。自定义弹窗的代码如下所示：),),SizedBox(
Flutter 入门与实战（十一）：底部弹窗ModelBottomSheet详解
2401_84166497的博客
04-11 2368
弹窗的高度指定为屏幕高度的一半，这可以通过自定义组件的Container高度实现。增加了标题栏，且标题栏有关闭按钮：标题在整个标题栏是居中的，而关闭按钮是在标题栏右侧顶部。这可以通过Stack堆栈布局组件实现不同的组件层叠及位置。左上角和右上角做了圆角处理，这个可以通过Container的装饰完成，但需要注意的是，由于底部弹窗默认是有颜色的，因此要显示出圆角需要将底部弹窗的颜色设置为透明。自定义弹窗的代码如下所示：),),
BottomSheet,向用户呈现一组操作的一种方法是使用底部纸张，即从屏幕底部边缘向上滑动的纸张。底部板提供了清晰和简单的动作，不需要解释的灵活性。.zip
10-13
google在support library 23.2.0中引入了正式的底层表实现，因此这个库不再处于开发阶段。我会继续修复发现的缺陷，接受良好的公关，但不会再开发新的功能。谢谢你的支持！
Flutter 入门与实战（十三）：底部弹窗如何实现多项选择？
2401_84519960的博客
04-30 687
onCancel();},),Expanded(title,),),),),}),],),通过这个方法可以通过外部参数传入标题，取消响应事件回调和确认事件回调，通用性更强。​其次是选项需要有图标标记，选中时显示为勾选框，未选中时是空白框，这需要通过状态数据来控制。这里我们使用了 Set 类型，保证选中的数据集是不重复的。在点击选项时，如果选项对应数组的下标在 Set 内，则从中移出，表示取消选择；
《Flutter入门疑难杂症》Flutter 底部弹窗高度自定义
Jda_简单爱
08-12 1047
不多说，直接上代码： static void showBottomWidget(BuildContext context, Widget widget) { showModalBottomSheet( context: context, isScrollControlled: true, builder: (BuildContext buildContext) { return StatefulBuilder(builder:
Flutter bottomSheet设置高度
丿灬安之若死
09-01 1479
showModalBottomSheet( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0)), context: context, isScrollControlled: true, builder: (BuildContext context) { return Container( height: 480, ..
【Flutter 问题系列第 7 篇】TextField 去掉下划线
“Allen Su”的博客
09-10 4560
TextField 去掉下划线
showModalBottomSheet高度自适应
棉花没有糖的博客
08-11 4625
关于showModalBottomSheet高度自适应 需求： 1.showModalBottomSheet根据内容大小高度自适应 2.超出最大高度（例如屏幕的三分之二）可以滑动 3.键盘弹出时自适应 static showBottomPop(BuildContext context) { return showModalBottomSheet( context: context, isScrollControlled: true, //可滚动 解除showMod
【 Flutter 】 超详细 使用showModalBottomSheet 和 AnimationController 实现一个优雅的自定义动态底部弹窗
qq_40241320的博客
08-02 7632
使用showModalBottomSheet和 animationController打造一个丝滑动画的自定义改变高度的底部弹窗
flutter写一个弹窗
09-08
在 Flutter 中创建一个弹窗（通常称为模态对话框或提示框），你可以使用 `AlertDialog` 或者更现代一些的 `showModalBottomSheet` 函数。这里是一个简单的例子，展示如何使用 `AlertDialog`： ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter Dialog Example')), body: Center(child: RaisedButton( onPressed: () { showAlertDialog(context); }, child: Text('点击显示弹窗'), )), ), ); } void showAlertDialog(BuildContext context) { AlertDialog( title: Text('这是一个警告'), content: Text('这是一条消息'), actions: [ TextButton( onPressed: () { Navigator.of(context).pop(); }, child: Text('确定'), ) ], ).show(); } } ``` 在这个示例中，当用户点击 "点击显示弹窗" 按钮时，会触发 `showAlertDialog` 函数，它会显示一个包含标题、内容和确认按钮的简单警告对话框。点击确定按钮后，对话框会关闭。 如果你想创建更复杂的底部弹出窗口，可以使用 `showModalBottomSheet` 并配合 `Scaffold.of(context).globalKey.currentState.showModal BottomSheet()` 来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无夜之星辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值