Advertisement

Flutter响应式开发模式

阅读量:

一、简介

响应式框架能够自动适应各种不同尺寸的屏幕需求。通过只需创建一次用户界面设计,在移动设备和平板电脑等设备上都能完美呈现像素级细节!

1.1 问题

支持多种显示尺寸意味着反复生成相同的布局结构。在基于Bootstrap的传统方法中构建响应式UI耗时费力且令人不快。

此外,要使一切像素完美几乎是不可能的,简单的编辑需要几个小时。

1.2 解决方案

使用响应式框架自动扩展UI。

||

复制代码

二、快速开始

2.1 导人依赖

将此库导入项目:

||

复制代码

2.2 添加额外代码至App中

||

复制代码

2.3 AutoScale

自动缩放按比例缩减与放大布局以维持界面的一致性。无需手动调整布局来适应移动设备、平板电脑及桌面设备。

Flutter会设定布局组件的规模。该功能在默认情况下处于关闭状态。
开发者可以在触发点将autoScale参数设置为开启以启用自动缩放。

||

复制代码

2.4 Breakpoints

断点控制不同屏幕大小的响应行为。

||

复制代码

可以设置任意数量的断点。调整大小/缩放行为可以混合和匹配。

全部评论 (0)

还没有任何评论哟~