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

【Flutter 实战】1.20版本更新及新增组件

1 :轨道(Track),1 和 4 是有区别的,1 指的是底部整个轨道,轨道显示了可供用户选择的范围。对于从左到右(LTR)的语言,最小值出现在轨道的最左端,最大值出现在最右端。...CalendarDatePicker 日期组件直接显示在页面上,不是弹出显示: CalendarDatePicker( initialDate: DateTime.now(), firstDate...iOS风格日期选择器 基础使用 CupertinoDatePicker 是 iOS风格的日期选择器。...设置模式为时间: CupertinoDatePicker( mode: CupertinoDatePickerMode.time, initialDateTime: DateTime.now()...如下的案例,子组件为 Table,Table 尺寸大于屏幕,必须将constrained设置为 false 以便将其绘制为完整尺寸。超出的屏幕尺寸可以平移到视图中。

5.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    FAQ | 为大屏幕设备构建应用的常见问题解答

    不是底部。...这是一个很好的方法,无需重写所有布局代码和整个应用即可优化应用界面。 如果您正在考虑重写部分界面或整个应用,那么 Jetpack Compose 也是很好的选择之一。...根据我们提供的 窗口尺寸类别 和指南,对于较小的布局,推荐使用底部导航菜单,对于中等和更大的展开布局,建议您考虑使用 Navigation Rail,因为使用这类设备的用户更多会使用双手不是单手来操作设备...提及折叠形态,需要注意组件的过渡,将会在更大设备更大屏上使用各种组件,尤其是在桌面模式,需要特别注意界面,例如,在该模式下,关键操作或大多数操作是在底部屏幕完成的,大多数内容组件实际上会放在另一个屏幕上...;在折叠的桌面模式下,用户看起来像是在操作一部笔记本电脑,点触屏幕,手机可能会出现不稳晃动;这种模式下摄像头位置也可能会挡住后面的屏幕内容,虽然内容会被渲染,但因为被挡住不可见。

    3.5K10

    实践 | 为 Trackr app 适配大屏幕设备

    调整后: 当屏幕变宽时,我们显示导航轨道 (navigation rail) 来取代底部应用栏。我们也将悬浮操作按钮 (用于打开新建任务界面) 放到导航轨道中,从而完全移除底部应用栏。...△ 在大屏幕上的导航轨道 虽然是考虑到较大屏幕的设备进行的此项更改,但由于腾出了更多的纵向空间来显示任务列表,横向模式显示的手机也能够因此受益。...△ 双窗格布局能更好地利用屏幕空间 编辑任务和新建任务 调整前 : 当您编辑一个任务时,编辑任务的界面会取代任务详细信息界面,并占据整个屏幕。和此前的任务详细信息界面一样,这样会使屏幕内容显得不平衡。...我们可以将其作为单独的导航目的页面,并分配不同的行为,但是感觉这不是个好办法。...我们还向您说明了为了更好满足用户的需求,您应该怎样围绕可用性不仅是屏幕空间来重新思考您的设计。 我们希望您喜欢更新和改进后的 Trackr 应用!您可以 查看源代码。

    1.7K20

    大屏时代的生态变迁,看平板手机的拇指热键与界面布局

    在这种情况下,拇指热区也会相应地分为两部分,分别位于屏幕下方的左右两侧,其中还会产生交集,屏幕上方的广阔区域则是拇指在正常情况下难以触及的。...在平板手机上,仍然需要将导航及高频功能控件放置在屏幕底部。无论用户怎样持机,平板手机的屏幕顶部区域总是相对难以触及。...在默认情况下,Android的Action Bar会将所有的导航及功能选项整合到界面顶部(左),分体式Action Bar则会将一些重要功能放到屏幕底部,使其更便于被拇指点击(右)。...以横滑展开菜单为例,在平板手机上,不要放大横滑所需的距离,别让用户必须在整个屏幕范围内使用手势才能达到触发效果。...人们使用屏幕巨大的手机,不代表他们有着巨人般的手,手势应该围绕手指进行设计,不是围绕屏幕。 整体移动。界面中的多数元素是静态的,需要我们自己伸手触及。

    2.4K10

    按钮与交互-使用按钮触发操作

    这个小元素可以改变整个UX。我们将使用该按钮来缩放我们的3D模型。此外,我们将尝试更改手机的壁纸。对于您的型号,如果您有不同的材质或颜色,您也可以更改它。...这是按钮的约束: 按钮 约束 左 PlaceScreen 左:46点 / 底部:28点 中 加号按钮 水平中心 / 底部:28点 右 减号按钮 右:46点 / 底部:28点 放置按钮后放回ARSCNView...确保约束视图的每一侧不是安全区域。取消选中Constrain到边距。在布局中,将ARSCNView放在View下方,否则按钮将不会显示。 ?...对minusButtonTapped重复相同的步骤,但不是将模型缩放2x,而是将其更改为0.5。...在我们的例子中,这意味着我们正在改变iPhone的屏幕。调用节点并访问其漫反射材质。然后,转到art.scnassets并找到不同的屏幕。对我们来说,它是AR-Screen.png。

    4.6K20

    Material Design — App bars: bottomApp bars: bottom

    iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚 App bars: bottom Material Design链接:App Bars:bottom Bottom app bar 在手机屏幕底部展示导航和关键操作...·灵活 Bottom app bars 的布局和操作会因为屏幕的需求改变。 ·人体工学 Bottom app bars 很容易从移动设备上的手持位置到达。...不要将 FAB 放在 bottom app bar 外面,因为很难够到 ---- 行为 布局 为了支持 app 不同部分的意图,可以更改 bottom app bar 的布局和操作以适合每个屏幕。...底部的导航抽屉从底部的应用栏打开。 抽屉在底部应用程序栏前打开,并显示顶部应用程序栏以在达到完整高度时关闭抽屉。...在整个 app 中,操作应该在两个栏中进行组织和划分。

    2.4K80

    移动端避免使用100vh

    如果要设置元素的样式以占据整个屏幕的高度,则可以设置height: 100vh,您拥有一个完美的全屏元素,该元素会随着视口的变化调整大小!可悲的是,事实并非如此。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置为浏览器的高度,并隐藏了地址栏。结果是,当地址栏可见时,屏幕底部将被切除。 如下所示: ?...当显示地址栏时,由于移动浏览器错误地将100vh设置为屏幕高度没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。...更好的解决方案:window.innerHeight 解决此问题的一种方法是依靠javascript不是CSS。...遗憾的是,在不依赖JavaScript的情况下,仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ,但鉴于其在移动设备上的局限性,最好避免使用它。

    1.8K20

    移动端避免使用100vh

    如果要设置元素的样式以占据整个屏幕的高度,则可以设置height: 100vh,您拥有一个完美的全屏元素,该元素会随着视口的变化调整大小!可悲的是,事实并非如此。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置为浏览器的高度,并隐藏了地址栏。结果是,当地址栏可见时,屏幕底部将被切除。...如下所示: 当显示地址栏时,由于移动浏览器错误地将100vh设置为屏幕高度没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。...更好的解决方案:window.innerHeight 解决此问题的一种方法是依靠javascript不是CSS。...遗憾的是,在不依赖JavaScript的情况下,仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ,但鉴于其在移动设备上的局限性,最好避免使用它。

    2K20

    H5 页面 iPhoneX 刘海屏适配

    换句话说就是网页会扩展到整个屏幕。 看一页目前的页面效果: ? WX20200531-205514@2x.png 可以看到现在我们的测试页面已经铺满了整个屏幕。...WX20200531-205658@2x.png 可以看到页面的顶部,因为 safe-area-inset-top 避开了状态栏,底部因为 safe-area-inset-bottom 避开了小黑条,...当你的页面不使用原生导航栏铺在整个屏幕中时,这就是一个不错的适配方案。...当你使用了原生导航栏,仅仅需要适配底部小黑条时,解决方案就更简单了,简单设置 safe-area-inset-bottom就可以: body { padding-bottom: constant(...,实测时,对于 iPhone XR 我用在 stackoverflow 上找到的 media query 条件来判断不生效,后来经过查找资料,我找到一个在 iPhone XR 上实际可用的条件,也一并放在上面的代码中

    4.4K40

    Linux Lite4.6内置了大量的Linux功能(Reviews)

    请务必查看帮助手册,其中包括有关如何将Linux Lite安装到USB驱动器并持久存储配置,添加软件和个人数据的新教程。Linux Lite最初不是作为便携式Linux发行版发行的。...任务栏位于屏幕底部边缘,类似于早期的Windows设计,对Linux而言是家常便饭。...对于更流行的Linux桌面界面(Xfce,LXDE,MATE和Cinnamon),很常见的一种设计方案是在屏幕底部放置功能齐全的面板栏,并允许在面板和桌面上使用图标和快速启动程序。...底部面板填充屏幕整个下边缘。你可以解锁像mac一样的面板或其他风格设计。 Xfce的面板是高度可配置的。从菜单中可访问的系统设置面板提供了所需的所有修补工具。...搜索窗口将填充菜单窗口底部的左半部分。右边是启动设置面板、锁定屏幕和注销面板的按钮。 任务栏的最右边有典型的时钟读数、音量控制图标、Internet连接状态图标和工作区切换小程序。

    3.1K30

    超越按钮,拥抱触摸界面

    然而实际上我们设计或制作的第一个应用可能并没有包含顶部或底部导航,手机屏幕的尺寸是如此珍贵,如果设计了顶部和底部导航,则会占据屏幕20%的内容。我们需要记住的一条原则是:用尽可能多的空间展示内容。...相反,我们可以想象一个2-D或者3-D的屏幕空间,可以考虑将导航放在上、下、左、右任何一个位置,设计一个轻轻拖动或者扫过的手势,导航出现。...考虑一下双击屏幕或者长按屏幕。Instagram中,双击屏幕可以对一个内容进行Like或者Unlike。所以别再犹豫了,尽量的使用手势不是传统的导航控件吧。...作者在做Belgium's Public Radio的时候,一直困惑于应该为用户提供什么样的界面,最终,决定提供三种不同的界面布局形式,布局的调整可以通过拖动图标来实现。...这样做充满了实验主义和创新精神,在向客户进行展示时,不再使用传统的静态页面和简单导航,而是将客户邀请进来参与整个交互过程。这样做会增加预算、延长工期,但是如果客户允许你这么做,那一切都不是问题了。

    61520

    Android高仿京东2020版首页联动效果!

    第二版即本篇博客并不是为了解决Scrollview嵌套Viewpager的问题,而是换一种思路去实现! 布局结构图,很简单,就两层: image.png 就是将第一版中的第一层和第二层(自定义JdScrollVIew)放在了...有一点需要注意的是,背景图片的高度,并不是屏幕高度,而是屏幕的高度加上 image.png 这一部分的高度: screenHeight = SysUtils.getScreenHeight(context...,则背景图通过不断设置marginTop直至为0完全展开时,红框部分会正好卡在底部,并不会完全隐藏掉,原因其实很简单,如图: image.png 图片到达底部时,由于红框与图片底部是持平的,所以正好漏在了外面...,因此,这就需要上面所说的方法,将图片高度在屏幕高度基础上再+红框部分高度,这样在背景图片全屏时,可见内容区就移至了屏幕外,整个屏幕就只有背景图片可见了!

    1K20

    Flutter入门-路由导航

    人们常常说起的路由管理,就是管理页面之间如何跳转,通常也可被称为导航管理。...其中PageRoute 是一个抽象类,表示占有整个屏幕空间的一个模态路由页面,其定义了路由构建及切换过渡动画的接口及属性。...设置为false时,在入栈新页面时,释放当前原路由所占用的资源 fullscreenDialog 新路由是否是一个全屏的模态对话框,例如在ios中,如果为true,则新页面从屏幕底部滑入,不是水平...对于Android,当打开新页面时,新的页面会从屏幕底部滑动到屏幕顶部;当关闭页面时,当前页面会从屏幕顶部滑动到屏幕底部后消失,同时上一个页面会显示到屏幕上。...对于iOS,当打开页面时,新的页面会从屏幕右侧边缘一致滑动到屏幕左边,直到新页面全部显示到屏幕上,上一个页面则会从当前屏幕滑动到屏幕左侧消失;当关闭页面时,正好相反,当前页面会从屏幕右侧滑出,同时上一个页面会从屏幕左侧滑入

    1.2K20

    SAP最佳业务实践:生产订单拆分-按库存生产(248)-3生产订单处理1

    在生产订单创建: 抬头屏幕的分配标签页上,可在字段生产版本 中看到已选定的生产版本。 ? 1. 选择 返回 返回至 生产订单创建: 抬头屏幕。 2....现在将返回到 从XX个小时开始的 库存/需求清单屏幕。选择 刷新 (F6)。MRP 元素 列中现在显示的是 PrdOrd(生产订单),不是 PldOrd。 2....所需物料存放在供应存储地点的可用库存中。 此活动可以将生产订单需要的物料从各个存储地点(如商店 (1050))放到生产存储地点车间 (1020)。...在屏幕顶部选择 补充元素。 2. 在下一个屏幕中,选择 选择全部(位于屏幕底部)。 ? 选择 创建补货建议。 ? 对于每个补货要素,在字段 RepLoc(补货存储地点)中输入存储地点。 ?...在屏幕底部选择 选择全部。 选择 阶段。 ? 选择 保存。 ? 系统将物料(物料凭证)从组件存储地点转移到生产存储地点。要查看拣配清单,请使用事务代码 CO27。

    1.8K30

    为任意屏幕尺寸构建 Android 界面

    随着平板和可折叠设备的迅速发展,是时候停止将手机和平板分开去考虑了,更应该提供面向一整个生态系统的应用,来提高其在市场中的影响力。...我们先来进行第一项优化,使用 NavRail 而非底部应用栏,首先我们要考虑的是导航模型,所幸我们不会更改很多具体的视图,仅仅只会更改导航方式,因为 NavRail 会一直存在于整个视图体系中,可以通过它导航到任何其他视图...当查看 Phone Reference Device 时,依然能够看到底部应用栏,切换到更大的屏幕后,我们发现它开始使用 NavRail 了,一切按照我们的预期进行。...△ 可折叠手机上布局转换 为了正确处理如何将列表和详情窗口折叠成单窗口层次结构,当在较小的屏幕上时,我们需要知道用户最后与哪个窗口交互,为此,我们实现了一个简单的自定义修饰符来记录最后一次交互,并以此决定...但这次更改是针对屏幕尺寸做的决策,我们是不是可以让单个组件自身根据页面拥有不同尺寸呢?例如我们有一张卡片,当在列表中因为空间的限制只展示标题和副标题,而有更多空间时,则调整为显示图像。

    4.2K20

    《Motion Design for iOS》(三十八)

    我选择使用一个内置的类似我们刚刚构建的音乐播放器的效果,但不是水平地动画它们,我从底部垂直地动画它们。这就是我的加载动画的样子。 要完成它,先来一步步地分解我做了什么。...然后我会调用[self.tableView reloadData]将数据加载到列表行中去,这时候所有的行都在它们正常的位置上,但因为整个列表透明度为0并且是隐藏的,屏幕上什么都看不见。...我遍历现在屏幕上可见的行并且移动UITableView将行都放到屏幕底部。我通过改变列表的位置,将其移动到整个列表高度的下方来达到目的,这样每行都会藏在屏幕底部了。...现在所有的行都在屏幕底部了,我将alpha改回1.0来让列表变得可见。现在列表是可见的了,但素有的行都在屏幕底部所以看不到任何文章。...最后,我再次遍历所有的行将其推离屏幕底部,通过移除我初始设置的变换将其动画到原本的位置上。 这个看上去相当简单的效果有这么多的步骤!这里是完成这些步骤的代码。

    45320
    领券