它们可以永久在屏幕上显示，也可以通过导航菜单图标进行控制。...从侧面打开的 navigation drawer 被放置在屏幕的左侧以用于从左到右的阅读顺序，放置在屏幕的右侧以用于从右到左的阅读顺序。 ?...每个项目都使用文本标签和可选的图标来描述其目的地。 目的地标签 文本标签应该清晰且足够短，以免被 sheet 切断。 ? 可以只有文本标签无图标 ? 保持文本标签简短，但是长度实在太长时就截断 ?...使用时，应始终放置在文本之前。 App 内组件和内容应参考这些图标。 ? 使用惯用且可识别的icon，并且不要用相同的icon代表不同一级目的地 ?...Dismissible drawer：如果用户可能将注意力集中在屏幕内容上，并且需要更加低频访问其导航目的地时，则可以使用 dismissible drawer。 ?
在主屏幕上使用 bottom app bars ，其中包含 navigation menu control 和突出的操作（如FAB）。 在 bar 的另一侧至少可以放置一个，最多两个操作。...2、FAB 在尾部 ? 在需要 FAB 和三到四个附加操作的手机屏幕上使用FAB 3、无 FAB ?...滚动 滚动时， bottom app bar 可以出现或消失： 向下滚动隐藏 bottom app bar， 如果有FAB，则它会脱离 bar 并保留在屏幕上。...App 导航应放置在另一个组件中，例如 top app bar 或嵌入在屏幕中。 ?...在主屏幕上，不要在 top app bar 和 bottom app bar 中放置 navigation menu control 。 只有一个 app bar 应该有这个control ?
原则 2：减少输入字段和用户打字的交互成本 表单越长越复杂用户完成整体表单的意愿就越低 – 尤其是在小屏幕上。...为什么你不应该使用内嵌标签（placeholder）做字段标签 内嵌标签（或placeholder作为一个字段标签），是位于表单域里面的文本，当用户输入的时候它会自动消失。 ?...一旦用户点击文本框，标签将消失，因此用户无法仔细检查他/她写的是什么确实是为了被写入。占位符文本是视觉标签一个贫穷的替代品。 ?...放置在标签上移动领域以上的主要好处是，你可以有表单字段延长屏幕的整个宽度，使它们足够大，以显示整个用户的输入（在一个体面的字体大小16像素一样）。...占位符文本默认情况下显示，但一旦一个输入字段被窃听和输入文本占位符文本淡出和顶部对齐的标签的动画。
在布局阶段，Compose 会遍历界面树，测量界面的各个部分，并将每个部分放置在屏幕 2D 空间中。也就是说，每个节点决定了其各自的宽度、高度以及 x 和 y 坐标。...请注意，API 在设计上可阻止您尝试放置未经测量的元素，place 函数只适用于 Placeable，也就是 measure 函数的返回值。...在 View 系统中，调用 onMeasure 以及 onLayout 的时机由您决定，而且调用顺序没有强制要求，但这会产生一些微妙的 bug 以及行为上的差异。...请注意标题区域，这个区域会随着页面内容而滚动，最后固定在屏幕的顶部。...这意味着在滚动发生变化时，不需要重新创建修饰符，只在放置阶段才会读取滚动状态的值。所以，当滚动状态变化时我们只需要执行放置和绘制操作，不需要重组或测量，因此能够提高性能。
原则 ·始终保持 Top app bar 出现在 app 中每个屏幕的顶部，并且可以在滚动时消失。 ·引导 Top app bars 提供了一种可靠的方式来引导用户浏览 app。...---- 分解 在 top app bar 中推荐的元素放置顺序是（从左到右的语言顺序中）： ·将导航放置在最左侧 ·将任何 titles 放在导航的右侧 ·将 contextual actions 置于导航的右侧...任何剩余的或次要的动作都应放置在 overflow menu 中（3） ---- 行为 滚动 滚动时，e top app bar 可保留原位，或以下列方式转换： ·向上滚动隐藏 top app bar...在滚动时，它们会增加海拔并让内容在它们后面滚动 ? 当向上滚动时，使用带有图像的 prominent top app bars 可以转换为正常的 top app bars。...当 top app bar 转换为 contextual action bar，会发生以下更改： ·Bar颜色改变 ·导航图标被关闭图标替换 ·Top app bar 标题文本转换为 contextual
在较小的屏幕上，动作表单会从屏幕底部向上滑动。在较大的屏幕上，动作表会以弹出框的形式同时出现。 ? 在执行潜在的破坏性操作之前，请使用操作表请求确认。...使用”好的“也可以被接受，但不要使用”是“和”否“。 将按钮放置在人们期望的位置。一般而言，人们最有可能点击的按钮应位于右侧。取消按钮应始终位于左侧。 正确标记取消按钮。...如果你在滚动视图中显示页面控制元素，则需要关闭滚动视图中的滚动条以免为用户带来困扰。 不要在一个滚动视图中放置另一个滚动视图。...所以如果你需要在一个屏幕中放置两个滚动视图时，尽量考虑允许它们在不同的方向进行滚动，如此可能对其相互间的影响是最小的。...虽然你可以使用各种类型的字体、颜色以及对齐方式，但必须保持内容的可读性。采用动态类型文本是个好办法，这样如果用户在设备上更改文字大小，你的文本内容仍然会有友好的体验。
刚开始可能不那么明显，但是实现本应用程序的最大挑战是编页，即在字体设置的基础上为整本书的内容分页。当然，我们可以将整本书的内容放置在具有滚动条页面中，但这并不能够带来好的用户体验。...用户可以通过点击屏幕来翻页，或者点击应用程序栏上的按钮来回退页面。...它开始的时候看上去像text box，但是被点击的时候，它允许用户从列表中选择一个值。数据模板同时绑定每个text block的FontFamily和Text属性，在列表中显示每个字符串。...当第一次展开时，屏幕内容不会被移动，这是为了确保内容保留在屏幕上。然后，当尝试着用滚动条来查看其他内容时，list picker会折叠起来。...有了它的帮助，这就完成了章节集合总数的自动统计，使得可以将其显示在主页面的list box上。
导航视图是最初在屏幕上不可见的，但可以从由drawerPosition指定的窗口的侧面拉出，其宽度可通过drawerWidth设置。...这些都显示为图标或小部件右侧的文本。如果不适合，它们将 被放置在一个'溢出'菜单。 ...Sticky行为意味着它将带着本节顶部的内容滚动，直到 它到达屏幕的顶端，此时它会停在屏幕顶部，直到被下一节的页眉推掉。...scrollRenderAheadDistance数字型 在它们以像素的形式出现在屏幕上之前，要多早就开始呈现行。...3.11 无反馈触摸 3.11.1 成员函数 onLongPress函数 onPress函数 释放触摸时该函数被调用,但如果触摸被取消则不调用(例如被窃取了应答器锁的滚动取消
这是在Flutter中构建布局的指南。 您将构建以下屏幕截图的布局： ? 然后本指南回过头来解释Flutter的布局方法，并说明如何在屏幕上放置一个小部件。...在这个例子中，每个文本小部件放置在容器中以添加边距。 整个行也被放置在容器中以在行的周围添加填充。 本例中的其余UI由属性控制。 使用其color属性设置图标的颜色。...本节介绍如何创建一个简单的小部件并将其显示在屏幕上。 它还显示了一个简单的Hello World应用程序的完整代码。 在Flutter中，只需几个步骤即可在屏幕上放置文本，图标或图像。...当GridView检测到其内容太长而不适合渲染框时，它会自动滚动。...使用Stack叠加容器（在半透明的黑色背景上显示其文本），放置在Circle Avatar的顶部。Stack使用alignment属性和Alignments偏移文本。
·与当前情景无关的菜单项可能会被删除 ·与情景相关但需要满足某些条件的菜单项可能被禁用（如置灰）。 例如，当选择文本后，“复制”这个菜单选项才变为可选择项。...例如，当使网页上的文本高亮时，Android仅显示“复制”菜单项，因为用户无法“剪切”或“粘贴”文本。 ? 情景菜单 菜单是可滚动的 如果菜单高度阻止其显示所有菜单项目，菜单可以在内部滚动。...一个例子是在横向上查看手机上的菜单。 ? 可以内部滚动的菜单 级联菜单（仅限pc） 级联菜单可根据菜单与屏幕垂直和水平边缘的接近程度放置菜单。 ?...·简单菜单也应该应该显示在其触发元素上，而不是下面（如下图）。 ? ·菜单宽度取决于字符串长度，在移动设备上定义为56dp单位的倍数。...·简单菜单始终在屏幕的左侧和右侧保持16dp的留白（手机）或24dp留白（平板）。 ? ·如果简单菜单中的文本长到需要换行，就改为使用Simple Dialogs，因为可以有不同高度的行（如下图）。
三种标准按钮实例 选择按钮样式 选择按钮样式取决于按钮的优先级，屏幕上的组件数量和屏幕布局。...推荐的按钮放置 标准提示框 屏幕上的按钮对齐方式：右边 将肯定性按钮放在右侧，否定性的放在左边。 表单 屏幕上的按钮对齐：左边 将肯定性按钮放在左侧，否定性的放在右边。...---- 样式 版式设计 按钮文本应该用有大写的语言大写。 对于其他语言，平面按钮上的彩色文本将它们与普通文本区分开来。...---- 扁平按钮(Flat button) 用法 平面按钮印在材料上。 不会浮起，但点击时会填充颜色。...请勿在固定按钮区域使用浮动按钮。 ? 添加分隔后，底部固定按钮可用于滚动的提示框。 ?
Scroll View Scroll View允许用户浏览大于可见区域的内容，例如文档中的文本或图像collection。 ...例如，放大文本直到单个字符填满屏幕可能在大多数app中没有意义。 ·考虑在scroll view处于分页模式时显示页面控制元素 页面控件显示有多少页面，屏幕或其他内容块是可用的，并指示哪一个当前可见。...·不要在另一个scroll view中放置scroll view 这样做会产生难以控制的且难以预料的界面。...·一般来说，一次显示一个scroll view 滚动时人们经常做出大滑动手势，并且很难避免与同一屏幕上的邻近scroll view进行交互。...如果您需要在一个屏幕上放置两个scroll view，请考虑允许它们沿不同方向滚动，这样一个手势就不太可能影响两个视图。
即便页面并未发生变化（如页面滚动，或某些文本高亮），浏览器仍需进行第二部分中的某些步骤，接着在屏幕上绘制新的内容。 ? 想要滚动、动画等操作看起来流畅，必须以 60 帧每秒的速度进行渲染。...在某些情况下，图层甚至没有改变。它们只需要重新排列：例如动画在屏幕上移动，或是某些内容发生滚动。 ? 组织图层的过程称为合成。...然后找到可滚动内容中应该展示的部分。将该部分复制到目标位图。 ? 这减少了主线程的绘制量。但这意味着主线程需要花费大量时间进行合成。而还有很多工作在主线程上争夺时间。...可以像艺术家缩放图像一样…在图像上放置一个网格，与每个像素相对应。这样一来，只需知道某个像素所对应的区域，然后对该区域进行颜色取样即可。...它会识别哪些项目将真正出现在屏幕上。为此，它将查看一些东西，如每个滚动盒的滚动距离。 如果形状的某些部分在盒子内，则该形状将被包括在需要绘制的列表中。否则将被删除。这个过程叫做早期剔除。 ?
行为 默认情况下，悬浮响应式按钮在屏幕上以动画形式展开。...左：默认尺寸 右：最小尺寸 悬浮响应式按钮应该放置在离手机边缘至少16dp的位置，平板电脑/pc上至少需要离24dp。 ? 悬浮响应式按钮在聚焦时改变颜色，在选择时上浮。 ?...如果按钮在各个屏幕上的动作保持不变（如有必要，则转换为新位置），该按钮应保持在屏幕上。 列表 悬浮响应式按钮下面的列表应该在它们下面有足够的空间，以便它们的内容不被按钮挡住。...带标签的屏幕 在带标签的屏幕上，悬浮响应式按钮不应以与内容相同的方向退出屏幕。...滚动就消失的工具栏适用于： ·最开始进入时需要完整工具栏的屏幕 ·长列表顶部或底部需要完整工具栏的屏 当用户通过滚动表示他们有兴趣查看主要内容时，节省了屏幕空间。
4.1.3 工具栏 工具栏上放置着用于操作当前屏幕中各对象的控件。 ? ?...工具栏： 是半透明的 在iPhone上，工具栏始终位于屏幕底部，而在iPad上则有可能出现在顶部 当键盘被唤起、用户使用了手势、或者当前视图变为竖屏的情况下，工具栏可以隐藏。...但一般来说，还是应当避免需要滚动浮出层才能开启一个任务。请注意，系统可能会调整浮出层的宽高，以让它能够更好地适应屏幕的尺寸。 在浮出层中使用标准的UI控件和视图。...当用户在视图中拖拽内容，内容随之滚动；当用户轻扫屏幕时，内容将快速滚动——直到用户再次触摸屏幕或内容已经到达底部时停止。...如果你允许一个字符被放大到充满整个屏幕的话，用户会很难阅读当前内容。 在页模式滚动视图中，可以考虑使用页面控件(page control)。
对话框包含文本和UI控件。 他们保持视觉焦点直到被关闭或被完成了其中需要的行动。 谨慎使用对话，因为它们是打扰用户的。 分类 ·警告（Alerts）是紧急中断，通知有关情况并要求确认。...行为 对话框不应该被其他元素或屏幕边缘遮挡。 提示框始终保持视觉聚焦，直到被关闭或被完成了其中需要的行动。...这可保证了无论项目在列表中什么位置，被选项与标题均保持可见。 否则，标题会随内容一起滚动离开视野。 内容滚动时，操作始终保持原位。 提示框与底层父级材料是分开的，不会随其滚动。 ?...不该有明确的取消按钮 明确说明 ·在简单提示框中，行高可以变化； ·简单的对话框在屏幕上垂直和水平都居中显示； ·提示框与屏幕左右边缘的距离应该至少为40dp，距离顶部和底部至少为24dp； ·该对话框的内容距离提示框边缘为...全屏提示框支持日期选择器 操作 在屏幕顶部放置全屏对话框的确认和离开操作。 确认 屏幕右上角的确认按钮使用描述性动词，例如：保存，发送，分享，更新或创建。
：document.body.scrollTop; 网页被卷去的左：document.body.scrollLeft; 网页正文部分上：window.screenTop; 网页正文部分左...scrollWidth:’+this.scrollWidth+’/n clientWidth:’+this.clientWidth);”> 在文本框内输入内容...当一行内容超出文本框的宽度，就有横向滚动条出来了，scrollWidth的值就变了。 scrollWidth是对象实际内容的宽度。...100*100的DIV内无法完全显示，所以设置了overflow为auto，它会出现一个上下方向的滑动框，假如没有设置id.scrollTop属性的话，默认情况下滑块位置在顶端。...：”+ document.body.scrollTop; s += “/r/n网页被卷去的左：”+ document.body.scrollLeft; s += “/r/n网页正文部分上：”+ window.screenTop
将参数设置为true表示窗口可见，将会显示在屏幕上。 整个代码的功能是创建一个带有标题栏的窗口容器，位置在屏幕的(100,100)，大小为宽度500和高度300。...将参数设置为true表示窗口可见，将会显示在屏幕上。...最后通过设置窗口可见，使窗口显示在屏幕上。...将参数设置为true表示窗口可见，将会显示在屏幕上。 整个代码的功能是创建一个带有滚动条的ScrollPane容器，并在ScrollPane中添加一个TextField和一个Button组件。...最后通过设置窗口可见，使窗口显示在屏幕上。 程序明明向 ScrollPane 容器中添加了 一个文本框和一个按钮，但只能看到 一个按钮，却看不到文本框 ，这是为什么 呢?
但整屏离屏渲染依然会去多渲染增量部分，因为它是以整个屏幕为纬度的；对于第二种情况来说，两者都需要绘制增量部分的卡片，所以理论上消耗是一样的。...7.2 实现 在创建 Group 的时候，增加一个 offscreen 选项，它会多创建一个离屏 Canvas。...滚动的时候同理，滚出屏幕外的节点被销毁了，新增的节点重新创建了离屏 Canvas。各位开发者可以看到最终的优化效果，绘制的耗时只有 2 ms。...收集部分耗时已经优化到很低了，但绘制部分耗时依然很高。那要怎么处理呢？ 如果是在文本量不多的时候，这部分耗时已经非常低，每帧耗时降至 58 ms，但文本量大的时候耗时就增多了。...这里缓存了三个信息，分别是文本宽度、文本高度、文本子串数组（被截断分成了好几个）。 但这样还是会有一些问题：如果文本特别长的话，那 textArr 也会比较大，容易导致内存增长。
在滚动容器上增加滚动 touch 方法 .wrapper { -webkit-overflow-scrolling: touch; } 设置overflow : 设置外部 overflow 为 hidden.... auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...解决： fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块，tap事件也是为了解决在click的延迟问题 iOS上拉边界下拉出现空白，安卓无 描述：手指按住屏幕下拉，...手指按住屏幕上拉，底部多出一块白色区域。安卓无此特性。 在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。...#的URL跳转会出现空白 描述：安卓手机，在微信授权回调的函数中进行跳转至的URL不能带有#,但#号可放置在结尾。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
