bartender字体高度怎么设置（用OverflowBar实现UI界面的自动适应各种屏幕大小）

bartender字体高度怎么设置（用OverflowBar实现UI界面的自动适应各种屏幕大小）在美食图片组件下方添加一个带文字的卡片组件例二： 引入一张美食图片模拟手机界面转置顶您可以看到，引入的美食图片被包裹在一个Container容器组件当中，并且宽和高都已经被固定设置好，在手机屏幕中，这个容器组件置顶显示，下方还有大块空白，让咱们继续。

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

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

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

例一：

引入一张美食图片

模拟手机界面转置顶

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

例二：

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

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

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

例三：

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

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

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

例四：

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

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

例五：

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

奇迹出现了

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

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

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