视口范围内的图像会以剪切的形式，投影到到世界坐标窗口中，完成图像的可视化展示。 在 Web 浏览器中，视口是整个文档的可见部分。如果文档大于视口，则用户可以通过滚动来移动视口。...如果浏览器和针对 PC 制作的网页都不做任何处理，那么在窄屏设备上加载网页，我们看到的效果便是默认显示网页的左上角部分，然后通过水平和竖直方向的滚动来浏览网页的其他部分。...浏览这类站点时，随着屏幕的缩小，你会看到页面模块的布局结构在伸缩、流动或显隐变化，文字图片等主体内容在布局容器内流动填充、其大小也一直在做梯级变化。...如上图，布局伸缩式适配需求，常见于排版比较简单的信息流展示类业务。 其布局特点一般为横向伸缩，竖向高度固定或由内容填充决定；文字图标等网页内容一般会固定大小，且在宽屏窄屏上的视觉大小保持一致。...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。
当布局超过屏幕大小时，ScrollView会自动启用滚动功能，用户可以通过滑动屏幕来查看隐藏部分的内容。...在ScrollView中，只能包含一个直接子视图（ViewGroup），通常是一个垂直方向的线性布局或相对布局。如果需要水平滚动效果，可以使用HorizontalScrollView作为替代。...二 ScrollView使用方法 在XML布局文件中定义ScrollView容器。在需要可滚动内容的区域内添加ScrollView标签，并指定其宽度、高度以及其他属性。...这些组件可以是垂直方向的线性布局（LinearLayout）、相对布局（RelativeLayout）或其他ViewGroup。...：用于指定内容是否填充ScrollView的视口。
而开发VC程序则相对麻烦，系统的IDE环境对可视化编程的支持没有那么的完善，因此大部分界面的构建都需要通过编码来完成。...fill: 他表示视图的尺寸的值将会填充满父视图的剩余空间，也就是说视图的尺寸值是依赖于父视图的尺寸的大小。...A.tg_height.equal(.fill) //A视图的高度填充满父视图的剩余高度空间。...目前只有在线性布局、框架布局、和非布局父视图中才支持这种类型的值的设置(具体见上面TGWeight类型值的定义和使用) //假如A视图是在一个垂直线性布局里面，垂直线性布局的宽度为50...这种类型的值大部分用于在相对布局中使用的子视图，但是有几个特殊的位置就是父视图的位置是几乎在所有布局视图中都支持。
“你开发的界面为啥在我的屏幕里这么小啊？” “这个界面为啥在我这里会出现横向滚动条啊？” 大家在进行前端界面开发时，有没有遇到这些类似的问题呢？又是如何解决的呢？...一般来说，在处理这样的问题时，我们需要开发和提供不同的布局，通过检测视口的分辨率，判断当前访问设备的种类，请求不同的页面布局从而提供尺寸较为合适的展示场景。...在版本的早期，活字格提供了页面拉伸的模式帮助用户将页面布局更好的适应屏幕的尺寸。...而在后续的迭代中，活字格加入了粒度精确到行列的模式设置，通过对行列性质的修改，保证页面可以动态且精确的填充至整个展示屏幕中。 页面拉伸模式 在活字格中，可对全局或单个页面设置页面拉伸模式。...固定模式 固定模式下，行高、列宽为固定的大小，单位为像素，不会随着展示屏幕的变化而变化，如果页面所有被设定了固定模式的行列总像素已经大于了浏览器的宽度/高度，那浏览器中就会出现横向/纵向滚动条。
足以应对工作中关于元素位置计算的大部分场景。 注意在使用位置计算api时要格外的小心，不合理的使用他们可能会造成布局抖动Layout Thrashing影响页面渲染。...scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。...没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。...本质上就是当元素出现滚动条时，判断当前元素出现的高度 + 滚动条高度 = 元素本身的高度(包含隐藏部分)。...计算元素是否出现在视口内 利用的还是元素距离视口的位置小于视口的大小。 注意即便变成了负值，那么也表示元素曾经出现过在屏幕中只是现在不显示了而已。
它是指 网页中可见部分的大小，即浏览器窗口中显示的内容大小。 在移动设备上，由于屏幕较小，需要 对网页进行缩放以适应屏幕大小，因此布局视口也需要进行调整。...移动设备上的布局视口 通常比 桌面浏览器中的布局视口 小，因为 移动设备屏幕的大小通常比桌面屏幕小。...下图中 , 在下面的 视觉视口 中 , 网页只能被看到一部分区域 ; 3、理想视口 ( 网页大小 = 设备大小 ) 理想视口 - Ideal Viewport 指的是指在浏览器中，使 网页布局 和 显示最佳的视口大小...理想视口的大小 取决于 网页的内容和布局，通常应该 与布局视口的大小相同 。 通过设置理想视口，可以 使网页在不同设备上具有相同的布局和显示效果，无需进行缩放和滚动。...通过设置正确的 meta 标签，可以使网页在不同设备上具有相同的理想视口大小和布局。
1.2.3 移动Web开发总结 现今大型网站，大部分已经没有做响应式了（例如淘宝）。 我们会发现，淘宝网手机端和网页端使用的是两个域名，也就是说，不同的客户端已经不再共用一套页面布局结构了。...如果不分开做两套，而是直接用响应式的话，那么 pc 端上显示的很多页面布局就要在手机端上隐藏，结果这些页面都没有被用到，但是却加载了。...当移动端浏览器展示 PC 端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...理想视口下，布局视口的大小和视觉视口是一致的，这样就不需要左右滚动页面了。...默认值 contain，cover完全填充 在实际开发中，通常会将视口设置为不允许用户缩放页面、视口宽度等于设备宽度、初始缩放比为1.0，最大缩放比为1.0。
每个页视图中在添加各自的条目视图。整体效果图如下： ? 分页滚动UI布局 AutoLayout实现分页滚动的方法 根据上面的UI结构这里用AutoLayout的代码来实现水平分页的滚动。...，这里也会确定线性布局的高度。...containerView.gravity = MyGravity_Vert_Fill | MyGravity_Horz_Fill; //设置线性布局中的所有子视图均分和填充线性布局的高度和宽度。...而当滚动视图进行横竖屏切换时不会调整对应的contentOffset值，这样就导致了在屏幕方向切换时的滚动位置出现异常。...解决的办法就是在屏幕滚动时的相应回调处理方法中修正这个contentOffset的值来解决这个问题。
可滚动组件 当组件内容超过当前显示视口(ViewPort)时，如果没有特殊处理，Flutter 就会提示 Overflow 错误，为此，Flutter 提供了多种可滚动组件，用于显示列表和长布局； 可滚动组件都直接或间接的包含一个...，如果子树中的滚动组件没有显示的指定，则会使用这个默认的。...是 IOS 风格的滚动条，如果你是用的是 Scrollbar，那么在 IOS 平台会自动切换为 CupertinoScrollbar ViewPort 视口 在很多布局中都有 ViewPort 的概念...，所以如果预计视口可能包含超出屏幕尺寸太多内容时，那么使用 SingleChildScrollView 将会非常昂贵(性能差)，此时应该使用一些支持 Sliver 延时加载的可滚动组件，如 ListView...ListView 以填充屏幕剩余空间的方法吗？
1.2.3 移动Web开发总结 现今大型网站，大部分已经没有做响应式了（例如淘宝）。 我们会发现，淘宝网手机端和网页端使用的是两个域名，也就是说，不同的客户端已经不再共用一套页面布局结构了。...如果不分开做两套，而是直接用响应式的话，那么 pc 端上显示的很多页面布局就要在手机端上隐藏，结果这些页面都没有被用到，但是却加载了。...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 布局视口 布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。...，布局视口的大小和视觉视口是一致的，这样就不需要左右滚动页面了。
基本概念 响应式开发本质时针对多种屏幕做适配，在实际开发中，通常情况下时针对主流的设备进行适配。在开发前，必须掌握几个基本概念： 物理像素：即屏幕的实际像素点。...视口当前可见的部分叫做可视视口（visual viewport）。整个网页所占据的区域（包括可视也包括不可视的区域）叫做布局视口（layout viewport）。...当可视视口比布局视口小时，浏览器网页就会出现横向滚动条，以支持用户浏览整个网页的内容。...为了禁止出现横向滚动条，不得不设置设备的 Viewport。通过在 Head 元素中使用 Meta 标签来设置 Viewport 属性。...弹性盒适配的基本原则是： 内容流式：即弹性项目（弹性布局容器中的每一个子元素）的填充内容使用流式布局。 布局弹性：即涉及元素排列、对齐和空间分配时，使用弹性盒进行布局。 目前，没有完美的适配方式。
.虚拟列表 其核心思想就是在处理用户滚动时，只改变列表在可视区域的渲染部分，然后使用padding或者translate来让渲染的列表偏移到可视区域中，给用户平滑滚动的感觉。...虚拟列表原理 虚拟列表的核心步骤可以总结成五步： 不把长列表数据一次性全部直接渲染在页面上 截取长列表一部分数据用来填充可视区域 长列表数据不可视部分使用空白占位填充（下图中的startOffset和endOffset...区域） 监听滚动事件根据滚动位置动态改变可视列表 监听滚动事件根据滚动位置动态改变空白填充 固定高度 列表项高度固定的话，就无需每次都计算当前应该渲染多少条数据，视口的数据量始终是固定的，只需要通过用户滚动的距离...，不然会出现滑动到空白占位区域的情况 * 因为间隔时间过长的话，太久没有触发滚动更新事件，下滑就会到padding-bottom的空白区域 * 电脑屏幕的刷新频率一般是60HZ，渲染的间隔时间为...，当然，所有的列表项数据还是都需要接口来进行请求的，所以在滚动的时候，我们还需要加上监听滚动条位置并且从接口拉取数据的逻辑，所以需要优化的地方还很多。
二、LinearLayout详解 接下来分别从方向、填充模型、权重、对齐、内边距、外边距几个方面来进一步学习LinearLayout 的使用，当然其中一部分也适用于后续布局文件。...3权重 从前面的水平布局图中看到五个按钮并不是平均占据屏幕宽度，如果需要这五个组件平均占据屏幕宽度，就需要使用到权重，可以通过设置android:layout_weight为相应部件分配空间比例...从上图可以看到，在LinearLayout中首先为没有设置layout_weight属性的组件分配空间，然后根据各个视图组件layout_weight属性的值所占比例来分配剩余空间。...以上练习的是水平方向的权重，在垂直方向同理。需要注意的是：layout_weight只能在LinearLayout线性布局中使用，而且只能在LinearLayout中的直接子元素中使用。 ?...到此，LinearLayout线性布局的方向、填充模型和权重已经学习完成，你都掌握了吗？由于内容较多，下一期继续学习LinearLayout线性布局的对齐。
； b):在相对的布局中在线性的orientation方向和权重在相对的布局中并不适用； c):组件默认左对齐、顶部对齐 * 设置组件在指定组件的右边 android:layout_toRightOf... 有几列，那么在中就有几个 b) 根节点中可以设置以下属性，表示让第1列拉伸填满屏幕宽度的剩余空间 android...一个是从里往外撑，一个是从外往里撑 ScrollView ScrollView滚动视图是指当拥有很多内容，屏幕显示不完时，需要通过滚动跳来显示的视图。ScrollView只支持垂直滚动。...，LinearLayout在写布局 3、上述两个控件可以互相嵌套 4、滚动条的位置现在的实验结果是：可以由layout_width和layout_height设定 5、ScrollView用于设置垂直滚动条...ll.addView(tv); }//页面并没有实现滑动,所以在布局文件中外层添加一个进行滑动。
而前端开发同学在实施样式布局时，就需要能根据设计师的一张设计稿，作出适配各种不同屏幕尺寸、分辨率的效果。...上图展示了不同规格视口中，页面内容总能恰好占满视口，没有溢出也没有留白；前文所述的普适性方案在满屏场景下就存在一些问题。...background-size: 100% 100%; 裁切溢出 在保持背景图比例不变的前提下，使其大小能够完全cover窗口大小，并将多余的横向/纵向部分裁掉。...） 空间竞争 由于所有元素根据屏幕实际宽度进行 等比缩放 ，故对屏幕“剩余空间”的利用是静态的，即当屏幕宽高比变化时，所有元素总是 同时 “占据”或者“让出”特定比例的空间，尤其是在空间紧凑的情况下，可能存在非重点内容元素...下图反映了固定定位在可视区域变小的情景下，元素对“剩余”空间的挤占： 2.4.2、预设方案进行灵活适配 为了进一步提升满屏场景布局的效果，悟空中台团队基于 DPR & rem 布局方案，借鉴了元素相对窗口固定定位的思想
在子组件需要计算拉伸或压缩比例时优先使用此布局，可使得多个容器内子组件能有更好的视觉上的填充效果。...例如根据设备和应用的不同属性信息设计不同的布局，以及屏幕发生动态改变时更新应用的页面布局。 列表（List） 使用列表可以高效地显示结构化、可滚动的信息。...在ArkUI中，列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力，超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集，例如图片和文本。...这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式。 在List中添加滚动条：当List子项过多一屏放不下时，可以将每一项子元素放置在不同的组件中，通过滚动条进行拖动展示。...当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。
1 -> 自适应布局 1.1 -> 线性布局 线性布局(LinearLayout)是开发中最常用的布局。线性布局的子组件在线性方向上(水平方向和垂直方向)依次排列。...通过线性容器Row和Column实现线性布局。Column容器内子组件按照垂直方向排列，Row组件中，子组件按照水平方向排列。 1.1.1 -> 线性布局的排列 线性布局的排列方向由所选容器组件决定。...，子组件在父容器中的对齐方式 justifyContent 容器排列方向上，子组件在父容器中的对齐方式 1.1.2 -> 自适应拉伸 在线性布局下，常用空白填充组件Blank，在容器主轴方向自动填充空白空间...使用线性布局和offset可以实现大部分布局的开发。...30) // 滚动条宽度 .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹 } } 1.2 -> 层叠布局 层叠布局(StackLayout)用于在屏幕上预留一块区域来显示组件中的元素
典型的情况如：父视图中某个子视图使用一个Scroller对象来实现滚动操作，会使得此方法被调用。...* 为使矩形区域全部可见，视图将可以被滚动显示 参数 child 发出请求的子视图 rectangle 子项目坐标系内的矩形，即此子项目希望在屏幕上的定位 immediate 设为true...此函数会引起对onScrollChanged(int, int, int, int)函数的调用并且会让视图更新。 当前版本取消了在子视图中的滚动。... (Rect rect) 计算X方向滚动的总合，以便在屏幕上显示子视图的完整矩形（或者，若矩形宽度超过屏幕宽度，至少要填满第一个屏幕大小）。... (int direction, Rect previouslyFocusedRect) 当在滚动视图的子视图中查找焦点视图时，需要注意不要将焦点设置在滚动出屏幕外的控件上。
在内容周围使用足够的填充，以保持布局整齐并防止内容重叠。 集合的方式不适用于文本信息，文本信息可以用列表。相对于集合，文本信息展示在一个可滚动的列表中，浏览起来会更简单和有效。 谨慎进行动态布局变更。...通过点击屏幕非浮层区域部分，很容易误点而关闭非模态弹出窗口。仅当用户点击取消按钮时才取消当前的任务。 在屏幕适当的位置显示浮层。浮层的箭头应尽可能直接指向触发它的元素。...当滚动视图的缩放选项被打开时，设置比较合适的最大及最小值。例如：放大文本直到一个单一的字符充满整个屏幕，即使其可能对于大部分应用来说是没有意义的。 当滚动视图处于页面模式时考虑显示页面控制元素。...页面元素通常会显示有多少页面，多少屏，或者多少数量的内容是当前可用及可见的。如果你在滚动视图中显示页面控制元素，则需要关闭滚动视图中的滚动条以免为用户带来困扰。...在显示内容之前，不要让用户等待大量的列表内容加载。先用文本数据填充屏幕行，再显示更复杂的数据（如图像）。这种方式可以立即为用户提供有用的信息，并提APP的感知响应能力。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
