文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

师于源码 | Flutter 区域视口双向滑动

直到最近在玩 Flutter DevTools, 在 Debugger 面板中惊奇地发现，这个代码面板不就是我苦苦追求的 区域视口双向滑动 吗?! ---- 可谓踏破铁鞋无觅处，得来全不费工夫。...既然是开源的，从代码中得到 Debugger 面板代码区域，视口双向滑动的实现方式就有可行性。当你手中握有源码，并且其中有你非常需要的功能，那手撕它就会变得非常有趣，下面一起来看看吧。...到这里，就离真相越来越近了， buildCodeArea 方法中很可能就是区域视口双向滑动实现的场所。...也就是说，当面板区域小于fileWidth 之后，也就是宽度约束过小， 水平方向的 SingleChildScrollView 组件就会发挥效力。 下面来介绍一下，源码中如何计算最长文本宽度的。...否则竖直方向滑动条展示的时机会有问题。 ---- 3.通过小案例提取精华 由于 debugger 代码面板中涉及到其他很多东西，这里来精简一下，做个区域视口双向滑动的最小案例，来方便大家理解和使用。

52620

Flutter | 滚动组件，ListView，GridVIew等

，在 Flutter 中，术语 ViewPort (视口) ，如无特别说明，则是指一个 Widget 的实际显示区域； 例如，一个 ListView 的显示区域的高度是 800 像素，虽然其列表项总高度可能远远超过...，所以如果预计视口可能包含超出屏幕尺寸太多内容时，那么使用 SingleChildScrollView 将会非常昂贵(性能差)，此时应该使用一些支持 Sliver 延时加载的可滚动组件，如 ListView...） shrinkWrap：是否根据子组件的总长度来设置 ListView 的长度，默认值为 false，默认情况下， ListView 会在滚动的方向尽可能的占用更多的空间。...组件中； 典型的，在一个懒加载的列表中，如果将列表包裹在 AutomaticKeepAlive 中，在改了吧划出视口时，他也不会被 GC 回收(垃圾回收)，他会使用 KeepAliveNotification...但是由于 listView 的高度是固定的，就会导致底部留白，这种情况可以使用屏幕的高度 减去状态类，导航栏，头部的高度。

8.7K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

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

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

    2.7K40

    案例：数控机床主轴校准与颤振监测系统

    如此不科学的作业模式既繁琐又费时，一旦作业程序有所疏失就会发生加工精度失准的问题。 另一项影响加工质量的元凶则是颤振。...因此，要如何尽早发现颤振以防止问题持续恶化向来都是令设备制造商头痛但却又必须解决的问题。 为了减少校准时间并提高加工精度，设备制造商可以利用感测技术来协助自家机床完成自动校准与实时监测的工作。...近来，为了解决由老师傅校准所衍生的不确定性问题并降低机台颤振影响加工质量，该公司决定在现有CNC机床机台内加入主轴校准与颤振量测的功能，期能以一致性的校准与自动化监测打造出更高效的加工设备。...透过USB-4716PMS搭配ADAM-3017PMS来连接IEPE传感器，作为操控平台的平板电脑即能取得振动信息，藉此实现主轴校准与颤振量测的功能。...MCM数控机床切削颤振监测与大数据分析系统构建

    2.9K40

    Flutter开发-可滚动组件

    前言 当组件内容超过当前显示视口(ViewPort)时，如果没有特殊处理，Flutter则会提示Overflow错误。...需要注意的是，通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用，这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模型，所以如果预计视口可能包含超出屏幕尺寸太多的内容时...shrinkWrap：该属性表示是否根据子组件的总长度来设置ListView的长度，默认值为false 。默认情况下，ListView的会在滚动方向尽可能多的占用空间。...当ListView在一个无边界(滚动方向上)的容器中时，shrinkWrap必须为true。...中，在该列表项滑出视口时它也不会被GC（垃圾回收），它会使用KeepAliveNotification来保存其状态。

    4.5K20

    07-移动端开发教程-移动端视口

    在说分辨率的时候我们常常会把大的值说在前面，所以在PC端屏幕宽度比高度的值要大一点，第一个值一般是指的宽度第二个值为高度。 移动端正好相反，手机一般宽度都是小于高度，所以第一个值是宽度。...如果我故意设置操作系统分辨率为512*384（水平和垂直各缩小1倍），那么此时css定义的1px像素的盒子在屏幕中的显示的宽度比原来高分辨率的宽度增加一倍，所以CSS中的像素只是相对，不是绝对的。...=value2"> Name Value Description width 正整数或device-width 设置布局视口的宽度，单位为像素 height 正整数或device-height 定义布局视口的高度...默认的缩放（initial-scale）值设置后，浏览器会根据理想视口计算出视觉视口，并设置布局视口==视觉视口。...来进行约束。

    1.5K80

    07-移动端开发教程-移动端视口

    在说分辨率的时候我们常常会把大的值说在前面，所以在PC端屏幕宽度比高度的值要大一点，第一个值一般是指的宽度第二个值为高度。 移动端正好相反，手机一般宽度都是小于高度，所以第一个值是宽度。...如果我故意设置操作系统分辨率为512*384（水平和垂直各缩小1倍），那么此时css定义的1px像素的盒子在屏幕中的显示的宽度比原来高分辨率的宽度增加一倍，所以CSS中的像素只是相对，不是绝对的。...Value Description width 正整数或device-width 设置布局视口的宽度，单位为像素 height 正整数或device-height 定义布局视口的高度，单位为像素（未实行...默认的缩放（initial-scale）值设置后，浏览器会根据理想视口计算出视觉视口，并设置布局视口==视觉视口。...来进行约束。

    1.9K120

    移动端viewport属性说明笔记

    说说移动端浏览器中的视口 视口(Viewport)是移动Web开发中一个非常重要的概念，最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。...通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 # 基础概念 像素是计算机屏幕中显示特定颜色的最小区域。...根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。...CSS 布局将会根据它来进行计算，并被它约束。...，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值，即当页面第一次 load 的时候缩放比例

    1.6K20

    浅谈移动端中的视口（viewport）

    而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）。 本文主要讨论移动端中的视口。...因此，引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。...布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height 获取。 ? 可以看到，默认的布局视口宽度为 980px。...CSS 布局将会根据它来进行计算，并被它约束。 视觉视口（visual viewport） 视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ?...定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale [0.0-10.0] 定义放大最大比例，它必须小于或等于maximum-scale

    2.3K20

    vivo悟空活动中台-基于行为预设的动态布局方案

    ： 《揭秘 vivo 如何打造千万级 DAU 活动中台 - 启航篇》 主要为大家讲述 vivo 活动中台的能力与创新。...2.1.1、元素分类 将元素分类为 主要元素 和 次要元素： 主要元素 页面中需要突出的重点内容，在视口尺寸发生变化引起的空间竞争中，处于优势地位； 次要元素 页面中相对不重点的内容，在视口尺寸发生变化引起的空间竞争中...实际视口即页面运行时的视口，根据不同比例，可能是基准视口，也可能是非基准视口。...1、基准视口与实际视口 1.1、基准视口宽高 描述基准视口的宽度与高度，我们设基准宽度用 baseW 表示，其值为 10.8 rem （对应设计稿 1080px ），同理基准高度 baseH 的值设置为...1.3、实际视口高度计算 根据 realW / realH = window.innerWidth / window.innerHeight ，将 realW = 10.8 rem 代入即可求得实际视口的

    2.1K10

    关于图片懒加载的几种方案

    懒加载，顾名思义，在当前网页，滑动页面到能看到图片的时候再加载图片 故问题拆分成两个： 如何判断图片出现在了当前视口 （即如何判断我们能够看到图片） 如何控制图片的加载 本篇文章原文地址: 如何实现图片懒加载...，另存到 我的每日一题 方案一 如何判断图片出现在了当前视口 clientTop，offsetTop，clientHeight 以及 scrollTop 各种关于图片的高度作比对 这些高度都代表了什么意思...方案二 改进一下 如何判断图片出现在了当前视口 引入一个新的 API， Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。...那如何判断图片出现在了当前视口呢，根据示例图示意，代码如下，这个就比较好理解了，就可以很容易地背会(就可以愉快地去面试了)。...// clientHeight 代表当前视口的高度 img.getBoundingClientRect().top < document.documentElement.clientHeight 监听

    1K10

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

    ，持续优化建模，实现机床设备精细化管理、伺服系统故障诊断、机床主运动系统进给系统故障诊断、刀具磨损与破损程度监测、切削颤振在线监控、故障预知维护等，以提高加工精度并避免加工过程中机床突然出现故障,造成难以弥补的损失...系统包括10个模块，用户可以根据需求自行选择模块组合实现特定的功能： 1、机床振动数据采集：机床的大多数潜在故障可以通过振动信号进行展现，因此振动数据采集是最重要的采集参数之一，根据机床振动的烈度选用相应灵敏度和量程的加速度传感器...，主轴振动故障，刀具磨损破损，切削颤振故障等； 6、特征值/状态数据上传云端：将提取后的特征值上传到企业私有云或机床公有云，正常运行时采用慢速采集和传输，当发生故障报警时进行高速采集、存储和传输； 7...、可视化/时序数据库/远程运维：特征值数据上传到云端后，可以根据需求进行图形化展示，存储实时数据库和远程运维管理； 8、AI数据建模/机器学习：机床的故障诊断与很多因素相关，包括设备运行程度、生产环境与生产过程...应用案例与技术参考 应用||水轮机健康诊断与远程运维系统 应用||USB-4711用于焊接机器人状态监测系统 应用案例：ADAM-3017/USB-4716数控机床主轴校准与颤振监测系统 MCM数控机床切削颤振监测

    4.5K30

    CSS 尺寸单位概述

    零宽单位： ch 和 rch ch 和 rch 单位基于用于渲染的字体中零字形的宽度或高度进行度量。当文档的内联轴为水平轴时，计算基于其宽度。如果内联轴是垂直的，则根据零字形的高度进行计算。...升角是小写字母（如 h 或 b）中超出 x 高度的部分。 表意单位：ic和ric ic 单单位最适用于中文、日文和韩文字符集。它根据所使用字体的"水 "或"水形表意文字"来计算长度。...它们是相对于初始包含块的大小计算的，如果是分页媒体，则是视口或页面。一个视口百分比单位等于初始包含块的 1%。这与百分比不同，百分比将尺寸设置为父元素宽度或高度的一定比例。...「动态视口」，无论浏览器界面是否展开或缩回，动态视口都会存在，并根据可用空间的大小而增大或缩小 image.png 例如，iOS 上的 Safari 浏览器会在你从页面顶部向下滚动时隐藏后退按钮、标签菜单和其他控件...cqmin 单位与 vmin 类似，都是根据 cqi 或 cqb 中较小的一个进行评估。而 cqmax 单位则是根据 cqi 或 cqb 中的较大值来计算的。

    36210

    Flutter SingleChildScrollView 滚动控件

    Flutter中的SingleChildScrollView类似于Android中的ScrollView，它只能接收一个子组件。...需要注意的是，通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用，这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模型，所以如果预计视口可能包含超出屏幕尺寸太多的内容时...，那么使用SingleChildScrollView将会非常昂贵（性能差），此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。...2、基本概念：基于Sliver的延迟构建 通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大；如果要一次性将子组件全部构建出将会非常昂贵！...可滚动组件中有很多都支持基于Sliver的延迟构建模型，如ListView、GridView，但是也有不支持该模型的，如SingleChildScrollView。

    5.2K00

    Flutter | ConstrainedBox & UnconstrainedBox 组件

    有没有同学遇到这种情况：在布局中，无论如何都控制不了一个组件的大小，烦的一批？...注意：这里并不打算深入讨论 Flutter 中约束的机制，只是为了讲解这两个控件。 看本篇文章时我们只需要记住：child 尺寸大小是由父级 Widget 给出的约束来调整的。...: BoxConstraints，这里也简单说一下约束： 约束是由最小宽度、最大宽度、最小高度、最大高度四个方面构成；尺寸大小则由特定的宽度和高度两个方面构成。...这样一来，child就可以在没有约束的、无限的画布上进行渲染，然后此容器讲尝试在自身限制的范围内采用相同的大小，如果大小不相同，则根据 alignment 来对齐，如果child过大，则会裁剪 child...在我们开头举的例子，为什么我设置 200*200 的Container默认是屏幕宽度的？ 因为ListView这种类型的组件会根据滑动方向来设置约束。

    98510

    移动web开发

    上面还能选择手机的型号. 02 视口 视口(viewport)就是浏览器显示页面内容的屏幕区域.视口可以分成布局视口,视觉视口和理想视口,当然,我们只需要理想视口....理想视口,对设备来讲,是最理想的视口尺寸 需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局视口就多宽 meta...原手机的分辨率是750*1334,由于像素比是2所以上面的375*667是根据像素比已经缩放过的,意思就是只要PC端375*667的盒子就能把整个手机屏幕占满....对于一张50px*50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊. 在标准的viewport中,使用倍图来提高图片质量,解决在高清设备中的模糊问题....移动端浏览器的技术解决方案 当我们PC端写的a链接放到电脑上时,点击的时候会有一个高亮,如何将他去除呢.

    2.3K21

    移动适配的长度单位

    作用：可以使用媒体查询, 根据不同的视口宽度, 设置不同的根字号。...像素尺寸转换rem： 1.根据视口宽度，设置不同的HTML标签字号 2.确定设计稿对应的设备的HTML标签字号 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）...flexible.js是手淘开发出的一个用来适配移动端的js框架，核心原理就是根据不同的视口宽度给网页中html根节点设置不同的 font-size。...1/100视口宽度）/vh尺寸 （1/100视口高度） 查看设计稿宽度 确定参考设备宽度（视口宽度）/设备高度 (视口高度) 确定 vw尺寸（1/100视口宽度）/vh尺寸 （1/100 视口高度） vw...单位的尺寸=px单位数值/（1/100视口宽度） 注：在开发中，vw和 vh不会混用，因为 vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

    1.3K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券