Flutter的主要目标之一是创建一个框架,让您可以 从单个代码库开发在任何平台上看起来和感觉都很棒的应用程序。
这意味着您的应用程序可能会出在许多不同尺寸的屏幕上,从手表到具有两个屏幕的可折叠手机,再到高清的显示器。
描述此场景概念的两个术语是自适应和相应。理想情况下,您希望您的应用程序兼具两者,但这究竟意味着什么?这些术语相似,但并不相同。
一、自适应应用程序和响应式应用程序之间的区别
自适应和响应式可被视为硬哟哦那个程序的不同纬度:您可以拥有非响应式自适应应用程序,反之亦然。当然,一个应用程序可以两者兼有,也可以两者都不是。
反应灵敏
通常,响应式应用程序的布局已针对可用的屏幕进行了调整。这通常意味着(例如)如果用户调整窗口大小或更改设备方向,则重新布局UI。当同一个应用程序可以在各个设备(从手表 、手机、平板电脑到笔记本电脑或台式电脑)上运行时,这一点尤为必要。
自适应
使应用程序适应不同类型的设备(例如移动设备和桌面设备)需要处理鼠标和键盘输入以及触摸输入。这也意味着对应用程序的视觉密度、组件选择的工作方式(例如,级联菜单与底部工作表)、使用特定于平台的功能(例如顶级窗口)等有不同的期望。
二、创建响应式Flutter应用
Flutter允许您创建自适应设备屏幕尺寸和方向的应用程序 。
创建具有响应式设计的Flutter应用程序有两种基本方法:
使用LayoutBuilder类
从它的builder属性中,你得到一个BoxContraints对象。检查约束的属性以确定要显示的内容。例如,如果你maxWidth的大于您的宽 度端断点,则返回一个Scaffold对象,其中一行的左侧有一个列表。如果它更窄,则返回一个带有包含该列表的抽屉的Scaffold对象。您还可以i根据设备的宽高、宽高比或其他 一些属性调整您的显示。当约束发生变化时(例如,用户旋转手机,或将您的应用发放入Noougat中的tile UI),构建函数将运行。
MediaQuery.of()在构建函数中使用该方法
这会为您提供当前应用程序的大小、方向等。如果您想根据完整的上下文而不是仅根据特定小部件的大小做出决策,这将更有用。同样,如果您使用它,那么如果用户以某种方式改应用程序的大小,您的构建函数会自动运行。
用户创建响应式UI的其他有用的小部件和类:
AspectRatioCustomSingleChildLayoutCustomMultiChildLayoutFittedBoxFractionallySizedBoxLayoutBuilderMediaQueryMediaQueryDataOrientationBuilder
参考其他文章: Flutter中的针对多屏幕尺寸和方向进行开发 在Flutter中构建相应式UI 使跨平台FFlutter登录页面相应