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

颤振动态改变DraggableScrollableSheet的高度

是指在Flutter中使用DraggableScrollableSheet组件时,通过颤振动态改变其高度的操作。

DraggableScrollableSheet是Flutter中的一个可拖动的底部滚动面板组件,可以实现类似于底部弹出框的效果。通过拖动该组件,可以改变其高度,从而控制显示的内容区域。

要实现颤振动态改变DraggableScrollableSheet的高度,可以通过以下步骤:

  1. 首先,需要在Flutter项目中引入DraggableScrollableSheet组件。可以在pubspec.yaml文件中添加依赖,然后运行flutter packages get命令进行安装。
  2. 在Flutter页面中,使用DraggableScrollableSheet组件来创建底部滚动面板。可以设置初始高度、最小高度和最大高度等属性。
  3. 为了实现颤振动态改变高度的效果,可以使用GestureDetector组件来监听手势操作。通过监听手势的滑动事件,可以根据滑动的距离来改变DraggableScrollableSheet的高度。
  4. 在滑动事件中,可以通过setState方法来更新DraggableScrollableSheet的高度。可以根据滑动的距离和当前高度,计算出新的高度值,并将其赋给DraggableScrollableSheet的高度属性。

以下是一个示例代码,演示了如何实现颤振动态改变DraggableScrollableSheet的高度:

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

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  double _sheetHeight = 200.0; // 初始高度

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DraggableScrollableSheet'),
      ),
      body: Stack(
        children: [
          // 主内容区域
          Container(
            color: Colors.white,
            child: Center(
              child: Text('Main Content'),
            ),
          ),
          // 底部滚动面板
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: GestureDetector(
              onVerticalDragUpdate: (details) {
                setState(() {
                  // 根据手势滑动的距离来改变高度
                  _sheetHeight -= details.delta.dy;
                });
              },
              child: DraggableScrollableSheet(
                initialChildSize: _sheetHeight / MediaQuery.of(context).size.height,
                minChildSize: 0.1,
                maxChildSize: 0.8,
                builder: (BuildContext context, ScrollController scrollController) {
                  return Container(
                    color: Colors.grey[200],
                    child: ListView.builder(
                      controller: scrollController,
                      itemCount: 20,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(
                          title: Text('Item $index'),
                        );
                      },
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在上述示例代码中,我们使用了一个Stack布局,将主内容区域和底部滚动面板叠加在一起。通过设置Positioned组件的bottom属性,将底部滚动面板固定在屏幕底部。

在底部滚动面板中,我们使用了GestureDetector组件来监听垂直滑动事件。通过onVerticalDragUpdate回调函数,可以获取到滑动的距离。然后,通过setState方法更新_sheetHeight变量的值,从而改变DraggableScrollableSheet的高度。

需要注意的是,为了实现颤振动态改变高度的效果,可以根据具体需求进行调整。可以设置最小高度和最大高度,以限制高度的范围。另外,还可以根据滑动的速度和方向等因素,进行更加复杂的高度计算。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活调整计算资源。了解更多信息,请访问:腾讯云云服务器
  • 腾讯云对象存储(COS):提供高可靠、低成本的对象存储服务,适用于存储和处理各种类型的数据。了解更多信息,请访问:腾讯云对象存储

以上是关于颤振动态改变DraggableScrollableSheet的高度的完善且全面的答案。希望对您有帮助!

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

相关·内容

镗刀在加工中出现主要原因分析

镗刀是采用数显读数屏精密镗头,在使用精镗刀加工时,也会出现不同问题。加工中心镗孔时由于切屑流出方向在不断地改变,所以刀尖、工件冷却以及切屑排出都要比车床加工时难多。...特别是用卧式加工中心进行钢盲孔粗镗加工时,尤为困难。镗孔加工时最常出现、也是最令人头疼问题是。...今天我们来分析下镗刀发生主要原因有哪些: 1、工具系统刚性包括刀柄、镗杆、镗头以及中间连接部分刚性。因为是悬臂加工,特别是小孔、深孔及硬质工件加工时,工具系统刚性尤为重要。...2、工具系统动平衡相对于工具系统转动轴心,工具自身如有一不平衡质量, 在转动时因不平衡离心力作用而导致发生。特别是在高速加工时工具动平衡性所产生影响很大。...3、工件自身或工件固定刚性,像一些较小、较薄部件由于其自身刚性不足,或由于工件形状等原因无法使用合理治具进行充分固定。

2.5K20

关于ViewPager高度自适应(随着pager页高度改变Viewpager高度

,选择你fragment中高度最大那个作为你整个viewpager高度。...解决了冲突问题,但你会遇到这样一个棘手问题:所有viewpager中fragment都是那个最大高度,如果你fragment中view高度很小的话,或者view高度过大的话,会导致自身或者其他...resetHeight(0); } 在viewpager中onpagerChagelistener方法中,当你改变...( 这是因为高版本中viewpager有改动,并不知道有什么改动,觉得是预加载改动)对高度不对应,就是你viewpager中fragment不是自己本身高度,可能是其他fragment高度...中有三个fragment来说,你第一个fragment高度是第三个fragment高度,(因为预加载到第三个)第一你们第二个fragment高度是你 第一个fragment高度(预加载到第一个

4.5K30
  • 当车削加工时出现刀打刀现象该如何处理?

    机床在加工过程中震动,最常见于车床,镗床加工过程中,造成工件表面有纹,返工率、废品率高,伴有刀打刀现象。...一般切削点离夹持点距离,如果长径比超过3的话就容易刀,可以考虑改变下工艺; 薄壁零件外圆车削; 箱形部品(如钣金焊接结构件)车削; 超硬材质切削。...看一下你现在用是90度刀还是45度,试换一下。 另外,走刀(进给量)太小,也可能是一种产生诱因,可略调整加大一点。你调整一下转速、单刀切削深度、进给量试一下来排除共振点。...目前应用于加工现场中有一些比较具体而实用方法: 减轻造成振动部份工作重量,惯性越小越好; 针对振动最大地方予以固定或夹持,如中心架、工作保持器等; 提高加工系统刚性,例如使用弹性系数较高刀柄或使用加入动态减振器特殊抗震力...,以吸收冲击能量; 从刀片与工作旋转方向下功夫; 改变刀具外型与进角,刀具鼻端半径越小越好,以降低切削阻力。

    3K50

    动态 iframe 内容高度自适应

    使用iframe加载其他页面的时候,需要自适应iframe高度 这里加载了两个不同内容高度页面至iframe中 1....在onload事件触发时,根据body高度自适应iframe高度 <iframe name="iframe1...this.contentWindow 其实就类似与下方<em>的</em> name值对应<em>的</em>iframe2,两种引用方式是等价<em>的</em> ?...可以发现,<em>高度</em>虽然能自适应,不过只支持<em>高度</em>了“从小到大”<em>的</em>自适应 如iframe2<em>的</em>内容比iframe1<em>的</em>高,后者<em>动态</em>加载出前者能自适应,但前者<em>动态</em>加载出后者就不行了,这种<em>高度</em>减小不了 最后<em>的</em>解决办法是...在onload事件中<em>动态</em>设置<em>高度</em>为body<em>高度</em>之前,先将原<em>高度</em>还原为auto或空值 可以用setTimeout(fn,0)将<em>高度</em>设置放到下一轮事件循环中执行,或者在 onbeforeunload 事件中先把<em>高度</em>设置为

    6.7K51

    MCM数控机床切削监测与大数据分析系统构建(一)

    在金属切削加工过程中,刀具与工件之间剧烈自激振动通常被称为“”。...因此,成为提高机床加工能力最主要障碍。 依照切削物理形成原因来划分基本上有3大类: 第1类是型耦合型; 第 2类是摩擦型; 第 3类是再生型。...型耦合型是指由于振动系统在 2个方向 上刚度相近,导致 2个固有型相接近时而引起 。摩擦型是指在切削速度方向上刀具与工件之间相互摩擦所引起。...再生型是指由于上次切削所形成纹与本次切削振动位移之间相位差导致刀具切削厚度不同而引起。...基于WebAccess/MCM数控机床切削在线监测系统如下: 根据切削故障模型,当机床发生时,振动信号在时域上幅值增大、在频域上主频带由高频带向低频带移动。

    2.6K40

    车床震颤原因及排除

    如果必须超过这些限制,则必须改变切削参数以补偿稳定性降低——降低切削深度、进给率或主轴速度来补偿。 注意:当您需要极端长径比来加工孔时,可以使用特殊镗杆。...如果拧紧支架两侧螺钉,则杆可能不会与孔接触,从而有效地浮动在支架中心 。 如果您在一侧使用两个螺钉仍然存在问题,您可以松开其中一个固定螺钉来更改杆共振频率。...刀具不在主轴中心线上 如果刀具切削刃不在主轴中心线上,则过大切削力可能会导致、精度和刀具寿命问题。 纠正措施: 确保圆柄刀具尺寸适合您转塔或刀架。 确保刀片下方阀座厚度正确。...不正确刀片可能会导致表面光洁度、刀具寿命和问题 纠正措施: 请咨询您切削刀具销售商,为您应用选择合适刀片几何形状、半径尺寸、涂层和硬质合金牌号。...有用提示: 考虑使用 主轴速度变化 (SSV) 功能来中断。 磨损或损坏活动中心 磨损或损坏活动中心会引起振动并使零件移动。这可能会导致、锥度、表面光洁度差和刀具寿命问题。

    90110

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

    和尚发现在长期未登陆小米应用市场时,再次登陆会有可滑动半屏底部菜单,供用户方便下载和推广;而在 Flutter 中这个半屏底部菜单并不是一个简单 BottomSheet 完成,可以通过 DraggableScrollableSheet...SizedBox.expand(child: sheet) : sheet; }, ); } 简单分析源码 DraggableScrollableSheet 作为一个有状态...构造器作为必选字段,用于在 DraggableScrollableSheet 中显示可滑动子内容;其中返回内容需为可滑动 ScrollableWidget,例如 ListView / GridView...4. expand expand 用于是否填充满父 Widget,若 DraggableScrollableSheet 外层固定高度则不影响;若外层未对高度进行固定,expand 作用于是否填充满父...---- 案例源码 ---- 和尚对 DraggableScrollableSheet 手势滑动过程还不够熟悉,之后会对手势进行进一步学习;如有错误,请多多指导! 来源:阿策小和尚

    1.3K20

    案例:数控机床主轴校准与监测系统

    如此不科学作业模式既繁琐又费时,一旦作业程序有所疏失就会发生加工精度失准问题。 另一项影响加工质量元凶则是。...研华为CNC机床提供主轴校准与量测解决方案能以小尺寸、易安装、免插适配卡、快速开发与验证等特色解决上述种种问题,从而让设备制造商能以经济实惠方案顺利完成新功能。...近来,为了解决由老师傅校准所衍生不确定性问题并降低机台影响加工质量,该公司决定在现有CNC机床机台内加入主轴校准与量测功能,期能以一致性校准与自动化监测打造出更高效加工设备。...透过USB-4716PMS搭配ADAM-3017PMS来连接IEPE传感器,作为操控平台平板电脑即能取得振动信息,藉此实现主轴校准与量测功能。...MCM数控机床切削监测与大数据分析系统构建

    2.8K40

    机器学习||CNC健康诊断云平台智能分析系统

    ,持续优化建模,实现机床设备精细化管理、伺服系统故障诊断、机床主运动系统进给系统故障诊断、刀具磨损与破损程度监测、切削在线监控、故障预知维护等,以提高加工精度并避免加工过程中机床突然出现故障,造成难以弥补损失...、不同工作电源、不同加工顺序与节拍、不同加工材料批次都可能造成设备健康程度不同,这些数据经过深度学习可以建立新模型,发现隐藏造成设备损坏元凶。...,主轴振动故障,刀具磨损破损,切削故障等; 6、特征值/状态数据上传云端:将提取后特征值上传到企业私有云或机床公有云,正常运行时采用慢速采集和传输,当发生故障报警时进行高速采集、存储和传输; 7...应用案例与技术参考 应用||水轮机健康诊断与远程运维系统 应用||USB-4711用于焊接机器人状态监测系统 应用案例:ADAM-3017/USB-4716数控机床主轴校准与监测系统 MCM数控机床切削监测...WebAccess/MCM1.1快速入门与常见问题解答 设备健康监诊系统动态演示手册 白皮书:轻工家电行业互联网实施架构及设备健康诊断 白皮书:高端装备行业互联网实施架构及设备健康诊断 白皮书:电子信息行业互联网实施架构及设备健康诊断

    4.5K30

    动态生成DOM元素高度及行数获取与计算方法

    背景 在开发IM项目过程中,经常会有出现一些需要计算DOM高度,然后超出若干行隐藏等需求。很多时候,需要计算高度DOM元素都是动态生成,我们无法在数据渲染前获取到它高度。...但是,如果我们需要获取到这段在内存中未渲染动态文本,也能够通过如下几个方法。...技术方案 根据前端基本常识,在内存中未渲染DOM元素是无法获取到高度,因此我们有两个方向来解决这个难题: 通过字数对行数进行估算 将元素渲染后进行高度测算 实现方案 以下实现方案将根据上面所选择技术方案来进行实现...因为在实际页面中进行计算能够保证页面高度计算没有任何误差,因此我们需要一个实际场景,让浏览器来帮助我们进行高度计算。...总结 获取动态元素高度一直都是IM项目中一个重要需求,自己在这个方面也踩了许多坑,因此写了这一篇博客来进行记录,同时其他人如果看到了也可以避免一些常见问题。

    3.9K30

    Android实现动态改变shape.xml中图形颜色

    在Android开发过程中我们常遇到将某个图形颜色改变(例如用圆点不同颜色来代表不同状态) 像这样需求,一般我们使用androidshape就可以实现,比如 <?...因此下面介绍一种写法可以动态改变图形颜色。...shape画笔宽度和颜色,改变填充色,然后给图形设置上背景 看看效果 ?...补充知识:Android代码调整ImageView图标颜色 问题:只有一套图标,图标本身内容比较简单,但是在不同场景下需要显示不同颜色,且只改变图标颜色,不改变透明度 解法:通过如下参数构造ColorMatrix...ImageView.setColorFilter(ColorFilter); ColorFilter ColorMatrix ColorMatrixColorFilter 以上这篇Android实现动态改变

    2.5K30

    意外惊喜:现存最古老计算机操作手册重见天日

    Z4 数字计算机用户手册第 1 页 这份珍贵手册是 Evelyn Boesch 在他父亲文件中找到。...调查表明,这些文件中包含一份 Z4 操作手册以及关于计算注释。 1956 年,René Boesch 开始在苏黎世联邦理工学院飞机静力学与飞机制造研究所工作。...1953 年到 1955 年间,Z4 为 Flug- und Fahrzeugwerke Altenrhein SG 在康斯坦茨湖上开发这款飞机执行过和俯冲计算。...与这份手册一同重见天日还有一些来自 1953 年 10 月 27 日手写文件,其中涉及到使用 Z4 求解一些算术问题。「空军系数表」和「带副翼机翼」这样标题说明这些是计算。...其中包含对火箭轨道计算(是为 Oerlikon Bührle 机床制造厂完成)、为飞机机翼计算(Eidgenössische Flugzeugwerke, Emmen LU)、计算(Flug-

    2.1K10

    App、H5、PC应用多端开发框架Flutter 2发布

    但是,web平台已经发展到包含更丰富平台api,这些api支持具有硬件加速2D和3D图形以及灵活布局和绘制api高度复杂应用程序。...你可以在我们媒体出版物上找到更多关于信息。...最后,世界上最畅销汽车制造商丰田宣布,计划通过建立由Flutter驱动信息娱乐系统,为汽车带来市场上最好数字体验。使用标志着在方法上与过去开发车载软件方式有很大不同。...丰田选择是因为它高性能和一致性经验,快速迭代和开发人体工程学以及智能手机层触摸力学。通过使用嵌入API,丰田能够定制独特需求车内系统。...相同框架源代码编译到所有这些目标。 在桌面和移动设备上使用有状态热加载迭代开发,以及为现代UI编程异步并发模式设计语言结构。

    8.9K30

    实现动态高度不同样式展现

    简单而言,容器查询它给予了 CSS,在不改变浏览器视口宽度前提下,只是根据容器宽度或者高度变化,对布局做调整能力。...translate(-50%, 0); } } 它是这么一个样式效果: 其中,我们给元素 .g-content 添加了 resize: vertical,让它变成了一个可以在竖直方向上通过拖动改变高度容器...方法二:clamp + calc 大显神威 上面效果核心在于: 如果容器高度大于某个值,显示样式 A 如果容器高度小于等于某个值,显示样式 B 那么想想看,如果拿容器高度减去一个固定高度值,会发生什么...bottom 属性中,100% 表示是容器当前高度,因此 calc(100% - 200px) 含义就代表,容器当前高度减去一个固定高度 200px。...有什么办法让它在出现后,一直定位在容器最下方吗? 别忘了,CSS 中,还有几个非常有意思数学函数:min()、max()、clamp(),它们可以有效限定动态值在某个范围之内!

    38050
    领券