响应式设计(Responsive UI design)是一种现代设计方法,随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局,就需要响应式设计。描述响应式界面最著名的一句话就是“Content is like water”,“如果将屏幕看作容器,那么内容就像水一样”。

响应式设计涉及不同屏幕大小的PC、手机、PAD等等,响应式界面有四个层次:1、同一页面在不同大小和比例上看起来都应该是舒适的;2、同一页面在不同分辨率上看起来都应该是合理的;3、同一页面在不同操作方式(如鼠标和触屏)下,体验应该是统一的;4、同一页面在不同类型的设备(手机、平板、电脑)上,交互方式应该是符合习惯的。要自动断定出那种设备,以及为每种设备都设计一套UI界面编写一套代码,似乎工程量很大,其实未必如此,今天咱们用一种最简单的实现方法,探究一下响应式UI设度。

首先,引入一张美食图片。

例一:

布局插件ios(用OverflowBar实现UI界面的自动适应各种屏幕大小)(1)

引入一张美食图片

布局插件ios(用OverflowBar实现UI界面的自动适应各种屏幕大小)(2)

模拟手机界面转置顶

您可以看到,引入的美食图片被包裹在一个Container容器组件当中,并且宽和高都已经被固定设置好,在手机屏幕中,这个容器组件置顶显示,下方还有大块空白,让咱们继续。

例二:

布局插件ios(用OverflowBar实现UI界面的自动适应各种屏幕大小)(3)

在美食图片组件下方添加一个带文字的卡片组件

布局插件ios(用OverflowBar实现UI界面的自动适应各种屏幕大小)(4)

文字显示在美食图片的下方

因为手机屏幕是长方形,所以文字组件排列在美食图片的下方。让咱们继续再添加一个相同的美食图片,按顺序它会由上至下排在文字组件的下方。

例三:

布局插件ios(用OverflowBar实现UI界面的自动适应各种屏幕大小)(5)

再添加一个相同的美食图片

布局插件ios(用OverflowBar实现UI界面的自动适应各种屏幕大小)(6)

按顺序它会由上至下排在文字组件的下方

至此,咱们把浏览器界面拉长,而把高度缩小,模拟一个宽度大于高度的平板电脑。看看会不会有什么变化。

例四:

布局插件ios(用OverflowBar实现UI界面的自动适应各种屏幕大小)(7)

模拟一个宽度大于高度的平板电脑

组件的顺序并没有因为屏幕长宽大小而发生变化,只不过把组件移到了屏幕的中间,这可不是咱们想要的响应式设计的结果,按照响应式设计原理,手机换成平板电脑时,里面的元素组件应该是横着排列才符合正常的审美和舒畅。不用着急,您可使用一个魔术方法,用一个OverflowBar容器把所有的元素组件都包裹住,看看有什么新的变化。

例五:

布局插件ios(用OverflowBar实现UI界面的自动适应各种屏幕大小)(8)

用一个OverflowBar容器把所有的元素组件都包裹住

布局插件ios(用OverflowBar实现UI界面的自动适应各种屏幕大小)(9)

奇迹出现了

奇迹出现了,元素组件的大小一样,但是顺序自动由竖转为横向排列,并充满了整个屏幕。这样看起来舒适多了,这就是响应式设计的魔力。

当然,OverflowBar容器方法只是一种轻松的懒人方法,生产中的完整的响应式设计流程,还涉及到媒体查询、断点设置、不同设备的布局,如果用CSS来写不是一篇文章能写得完的。而用OverflowBar容器,就能巧妙地达到目的,而且还能延伸出很多种变化应用。

优美的应用体验,来源于程序员对细节的处理。这就是今天学习Dart的内容,如果您感兴趣,或者能对您有所启发,别忘了帮忙点赞支持。

,