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

按钮按下时具有动态高度的BottomSheet (DraggableScrollableSheet)

按钮按下时具有动态高度的BottomSheet (DraggableScrollableSheet)是一种在移动应用程序中常见的用户界面设计模式,它可以实现一个可以被拖动的底部面板,并且可以根据内容的高度进行动态调整。

BottomSheet是一个可以从屏幕底部向上弹出的面板,它可以包含各种内容,如菜单选项、设置、附加信息等。而DraggableScrollableSheet是BottomSheet的一种变体,它允许用户通过拖动手势来调整底部面板的高度,并且可以根据内容的高度自动调整。

这种界面设计模式在很多应用中都有广泛的应用场景,例如聊天应用中的聊天窗口,地图应用中的地图信息面板等。通过使用可拖动的底部面板,可以提供更好的用户体验和交互方式。

推荐腾讯云相关产品:

腾讯云移动应用开发平台(Link:https://cloud.tencent.com/product/xcap)

  • 该平台提供了丰富的移动应用开发工具和服务,包括移动应用后端支持、数据存储、推送通知等功能,可以帮助开发者快速构建移动应用并集成底部面板等界面元素。

腾讯云云托管(Link:https://cloud.tencent.com/product/saar)

  • 云托管提供了一个简单易用的应用托管平台,可以帮助开发者快速部署和扩展应用程序。通过云托管,开发者可以轻松地将应用部署到云端,并自动进行资源调度和负载均衡,提供稳定可靠的底层支持。

腾讯云云原生数据库 TDSQL-C(Link:https://cloud.tencent.com/product/dcdb)

  • TDSQL-C 是一种高可用、高性能、分布式的关系型数据库服务,可满足底部面板等应用场景中对数据存储和管理的需求。它支持水平扩展和自动备份,具有强大的性能和可靠性。

腾讯云直播服务(Link:https://cloud.tencent.com/product/css)

  • 直播服务提供了一整套完备的音视频直播解决方案,可以帮助开发者实现底部面板等多媒体处理相关功能。通过腾讯云直播服务,可以轻松地实现视频流的推送、拉流、录制和转码等操作。

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行。

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

相关·内容

【Flutter 专题】130 图解 DraggableScrollableSheet 可手势滑动菜单栏

和尚发现在长期未登陆小米应用市场,再次登陆会有可滑动半屏底部菜单,供用户方便下载和推广;而在 Flutter 中这个半屏底部菜单并不是一个简单 BottomSheet 完成,可以通过 DraggableScrollableSheet...根据手势操作滑动固定位菜单栏完成;和尚简单学习一; ?...构造器作为必选字段,用于在 DraggableScrollableSheet 中显示可滑动子内容;其中返回内容需为可滑动 ScrollableWidget,例如 ListView / GridView...4. expand expand 用于是否填充满父 Widget,若 DraggableScrollableSheet 外层固定高度则不影响;若外层未对高度进行固定,expand 作用于是否填充满父...小扩展 之前在分析 DraggableScrollableSheet 其源码采用了 FractionallySizedBox 比例容器,和尚简单了解一,其源码非常简单,通过设置 heightFactor

1.3K20
  • Android开发笔记(一百三十四)协调布局CoordinatorLayout

    FloatingActionButton FloatingActionButton是design库提供一个酷炫按钮,它继承自ImageButton,,除了图像按钮所有功能之外,还提供了以下其它功能...方法,显示操作是调用show方法; 3、FloatingActionButton默认会随着Snackbar出现或消失而动态调整位置,有关Snackbar说明参见《Android开发笔记(一百二十七)...活用提示窗Toast和Snackbar》; 下面是悬浮按钮自隐藏和显示动画效果截图: ?...下面是悬浮按钮跟随提示条上移和下移效果截图: ?...setPeekHeight : 设置弹窗预览高度,即setState取值STATE_COLLAPSED设定折叠高度。 setHideable : 设置弹窗是否允许隐藏。

    2.1K30

    Flutter 入门指北之弹窗和提示(干货)

    BottomSheet BottomSheet 看命名就知道是从底部弹出菜单,展示 BottomSheet 有两种方式,分别是 showBottomSheet 和 showModalBottomSheet...在 ListView 中增加一个 BottomSheet 按钮,因为 BottomSheet 需要 context 也不能是 Scaffold context,所以需要通过 Builder 进行包裹一层...可以看到 showBottomSheet 会充满整个屏幕,然后 fab 会跟随一起到 AppBar 底部位置,而 showModalBottomSheet 展示高度不会超过半个屏幕高度,但是 fab...Dialog 相对于 SnackBar 和 BottomSheet,Dialog 使用场景相对会更多,在 MaterialDesign ,Dialog 主要有 3 种:AlertDialog,SimpleDialog...context 不是共享,如果需要动态修改 dialog 状态值,需要通过 StatefulBuilder 或者自定义 dialog 继承于 StatefulWidget 来实现 所以解决方法很明确

    2.2K20

    解决Android中自定义DialogFragment解决宽度和高度问题

    关于详解Android应用中DialogFragment基本用法,大家可以参考。 1、 概述 DialogFragment在android 3.0被引入。...2、 好处与用法 使用DialogFragment来管理对话框,当旋转屏幕和后退键可以更好管理其声明周期,它和Fragment有着基本一致声明周期。...下面通过示例代码给大家介绍Android中自定义DialogFragment解决宽度和高度问题 Android中自定义DialogFragment解决宽度和高度问题但是我们很多时候想把DialogFragment...高度固定,那么我们需要设置DialogFragment高度,在FragmentonResume()声明周期方法中设置window宽高即可。...Android中自定义DialogFragment解决宽度和高度问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家

    4.8K20

    你知道吗,Flutter内置了10多种show

    showBottomSheet 在最近Scaffold父组件上展示一个material风格bottom sheet,位置同Scaffold组件bottomSheet,如果Scaffold设置了bottomSheet...通常情况,我们希望直接从底部弹出,showModalBottomSheet提供了直接从底部弹出功能。...isScrollControlled参数指定是否使用可拖动可滚动组件,如果子组件是ListView或者GridView,此参数应该设置为true,设置为true后,最大高度可以占满全屏。...弹出位置在屏幕左上角,我们希望弹出位置在点击按钮位置,因此需要计算按钮位置,计算如下: final RenderBox button = context.findRenderObject();...buildActions输入框后面的控件,一般情况,输入框不为空,显示一个清空按钮,点击清空输入框: @override List buildActions(BuildContext

    1.8K10

    你知道吗,Flutter内置了10多种show

    showBottomSheet 在最近Scaffold父组件上展示一个material风格bottom sheet,位置同Scaffold组件bottomSheet,如果Scaffold设置了bottomSheet...isScrollControlled参数指定是否使用可拖动可滚动组件,如果子组件是ListView或者GridView,此参数应该设置为true,设置为true后,最大高度可以占满全屏。...,效果如下: [1240] 弹出位置在屏幕左上角,我们希望弹出位置在点击按钮位置,因此需要计算按钮位置,计算如下: final RenderBox button = context.findRenderObject...StatefulWidget组件,否则context代表就不是按钮组件。...,输入框放生变化时回调此方法,通常返回一个ListView,点击其中一项,将当前项内容填充到输入框,用法如下: @override Widget buildSuggestions(BuildContext

    1.9K11

    一种更优雅Flutter Dialog解决方案

    情景复盘:loading库一般封装在网络层,某个页面提交完表单,要跳转页面,提交操作完成,进行页面跳转,loading关闭是在异步回调中进行(onError或者onSuccess),会出现执行了跳转操作,...bottomSheet; final bool?...本身无法消费触摸事件,又由于IgnorePointer和AbsorbPointer都具有屏蔽子Widget获取触摸事件作用,这个貌似靠谱,这里试了,可以和背景后面的页面互动!...,这里了解下behavior几种属性 deferToChild:仅当一个孩子被命中测试击中,屈服于其孩子目标才会在其范围内接收事件 opaque:不透明目标可能会受到命中测试打击,导致它们既在其范围内接收事件...很明显translucent是有希望,尝试了几次,然后成功实现了想要效果 注意,这边有几个坑点,提一 务必使用Listener控件来使用behavior属性,使用GestureDetector中behavior

    3.6K41

    BottomSheetDialog 使用详解,设置圆角、固定高度、默认全屏等

    其实细分来说,是BottomSheet、BottomSheetDialog、BottomSheetDialogFragment 2.BottomSheet 与主界面同层级关系,可以事件触发,如果有设置显示高度的话...拿到view吗,我们试一设置这个view高度行不行 view.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT 看看效果...首先是像默认效果一样,当内容大于等于全屏时候,会先到达一个高度,即上面效果高度,然后继续向上滑的话,可以铺满全屏。...虽然不是预想效果,但是既然还可以向上滑动至全屏,说明我们设置高度是有效,只是没有一次性展开而已,还记得前面提到状态state吗,设置一试试 behavior.state = BottomSheetBehavior.STATE_EXPANDED...看看效果 可以了,这下是直接就全屏了,但是向下拉时候发现,并没有一次性收起,而是先停在了全屏显示默认位置,我们再设置高度为全屏试试 behavior.peekHeight = 3000

    4K30

    Flutte部件目录-Material Components 顶

    BottomNavigationBarType.fixed,缺省情况,当少于四个条目。...在这种情况,假定每个项目将具有不同背景色,并且背景色将与白色形成鲜明对比。...PopupMenuButton 显示菜单并且当菜单因选择项目而被解除时调用onSelected。 ? ButtonBar 按钮水平排列。 ?...AlertDialog 警报是需要确认紧急中断,通知用户有关情况。 AlertDialog小部件实现了这个组件。 ? BottomSheet 底部工作表从屏幕底部向上滑动以显示更多内容。...将按钮封装在工具提示窗口小部件中,以便在按窗口小部件(或者当用户采取其他适当操作)显示标签。 ? DataTable 数据表显示一组原始数据。 它们通常出现在桌面企业产品中。

    9.5K40

    Flutter | 一个超级酷炫登录页是怎样炼成

    4.点击 「Accepter」按钮会变色缩小回弹并展示 ok图标5.点击「Accepter」按钮 Dialog 内其他文字都被「白色遮罩」6....点击「注册」弹出 Dialog 在这里我们需要注意有一点: 在我们使用 showModalBottomSheet ,默认背景是白色,也就是说我们自己设置圆角是不管用, 所以要给这个 BottomSheet...点击按钮时候会变色 该功能不用考虑太多,既然有点击手势,那必然会使用 GestureDetector, 然后使用 GestureDetector onTapDown 参数,该参数是在「点击回调...然后处理抬起逻辑,在抬起也有两个逻辑: 1.按钮会缩小成圆形2.缩小成圆形时候会弹出 ok 图标 首先说一第一点: 缩小成圆形时候是有一个回弹效果,所以不能使用 AnimatedContainer...2.Tween 这里值是整个高度倍数,所以不要以为是像素值。

    2.1K20

    Flutter | 一个超级酷炫登录页是怎样炼成

    点击「注册」弹出 Dialog 在这里我们需要注意有一点: 在我们使用 showModalBottomSheet ,默认背景是白色,也就是说我们自己设置圆角是不管用, 所以要给这个 BottomSheet...首先我们也是把这个功能点拆分一: 点击按钮时候会变色 点击后会变回原来颜色并缩小成一个圆形 变成圆形后动画效果展示 ok 图标 也还是一步一步来。 1....点击按钮时候会变色 该功能不用考虑太多,既然有点击手势,那必然会使用 GestureDetector, 然后使用 GestureDetector onTapDown 参数,该参数是在「点击回调...然后处理抬起逻辑,在抬起也有两个逻辑: 按钮会缩小成圆形 缩小成圆形时候会弹出 ok 图标 首先说一第一点: 缩小成圆形时候是有一个回弹效果,所以不能使用 AnimatedContainer...Tween 这里值是整个高度倍数,所以不要以为是像素值。

    31410

    Flutter第4天--基础控件()+Flex布局详解

    --BoxFit 也许你为了查看模式,改一次,看一次,千万不要这样,即费时间,比较效果又差 你需要学会用数组或map去动态生成,让变化去应对变化,才能以不变应万变。...当你遇到很多种情况问题,都可以用这个套路,多分析,你才能巩固自己知识库 ?...图片颜色混合模式.png 重复模式,脑子想想也就知道了,这里就不演示了 ---- 1.4:使用Image方法加载图片 这个等到文件读取再提一,基本字段和Image是一样,所以不用担心。...splashColor: Colors.blue,//点击一闪而过颜色 disabledColor: Colors.blueGrey, ); ---- 3.ButtonBar 3.1源码一览...,百度了一,已经有人填坑了, //需要Scaffoldcontext,而不是我认为那个context var scContext;//先声明一Scaffoldcontext @

    2.2K30

    Flutter 全栈式——页面框架

    按钮text等 localeListResolutionCallback LocaleListResolutionCallback 该回调负责在应用启动以及用户更改设备区域设置选择应用区域设置...showSemanticsDebugger bool 为true,打开Widget边框,显示布局边界 debugShowCheckedModeBanner bool 为true,在debug模式显示右上角...FloatingActionButtonLocation 设定悬浮按钮位置 floatingActionButtonAnimator FloatingActionButtonAnimator 悬浮按钮动画...默认为 ThemeData.scaffoldBackgroundColor bottomNavigationBar Widget 显示在底部导航栏 bottomSheet Widget 底部永久性显示提示框...flexibleSpace显示在AppBar下方,高度和AppBar高度一样,可以实现一些特殊效果 [cf22fa2aav.png] 文档地址 示例 BottomAppBar BottomAppBar

    2.9K30

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

    和尚测试主要用 GridView 和 BottomSheet 来实现,当然也可以不用 GridView,和尚简单介绍一这两组 Widget。 ?...---- GridView GridView 我们都很熟悉了,是日常中最常用到控件之一,和尚前段时间学习了一 ListView 基本用法,GridView 用法基本相同,和尚不再多说,只提醒一个属性...BottomSheet BottomSheet 和尚理解为是从底部向上弹工作表,主要分为两种: Persistent 式工作表:类似于一个全新页面,完全展示 ScaffoldState.showBottomSheet...1.2 若此时设置内容 Widget 宽高,会发现依旧是重新打开一个页面,高度从底向上占据所设置高度,且点击空白区不会消失,如图: ?...2.2 若此时设置内容 Widget 宽高,会发现依旧是打开一个半透明页面,高度从底向上占据所设置高度,且点击空白区会消失,如图: ?

    1.2K71
    领券