互联网

如何建立响应式颤振布局

本文最初发表于 Miquido.com 2020年1月27日。

Flutter是Google的UI工具包,可帮助开发人员构建跨平台应用程序。它还提供了出色的开发工具,并支持程序员构建响应式布局-适用于移动设备,Web和台式机的响应式布局-即移动友好型和与多个设备兼容的应用程序。借助此框架,您可以快速有效地创建响应式应用程序-在任何设备上看起来都不错的应用程序,无论屏幕大小或操作系统如何。真正反应迅速的设计不仅限于最新的iPhone屏幕;响应式设计可以在您使用的任何设备上看起来都不错。 Google知道用户期望他们每天与之互动的品牌提供响应式应用程序。探索Flutter提供的一些顶级小部件,以帮助您简化设计过程。

利用Flutter的小部件索引 

您无需使用代码重新发明轮子。 Google使您能够使用预先存在的已使用和经过测试的窗口小部件轻松地将所需的功能添加到响应式应用程序中。从开始 小部件目录,其中提供了与您的应用需要执行的操作相关的高级类别。这些类别包括从添加动画到更新滚动功能。

如果找不到所需的确切类别,则可以通过 小部件索引。该索引列出了在开发应用程序时可以构建到设计中的特定功能。从这些小部件中提取代码,并使用它以响应自然的方式构建您的应用程序。

查看现有的软件包选项

除了使用特定功能外,Flutter开发人员还可以利用Flutter或Dart生态系统中创建的现有软件包。当您需要快速创建应用程序并且正在寻找可以调整的既有格式时,软件包可以为您提供一些想法。看看 包登陆页面 了解可用的格式。

Flutter提供了分步指南,通过导入代码将包依赖项元素添加到应用程序。您也不限于使用整个程序包。通过解决冲突的步骤,您可以使用程序包的某些部分或根据需要切换程序包。但是,并非所有当前软件包都提供此替代功能。

使用LayoutBuilder创建更好的布局

LayoutBuilder是Flutter中最重要的工具之一,用于创建响应式布局。它允许开发人员使用BoxConstraints对象来确定要显示的元素。开发人员可以调整宽度以更好地适应各种限制,根据原始设计使屏幕更宽或更窄。

MediaQuery是开发人员在Flutter中工作时必不可少的另一个工具。该工具为开发人员提供屏幕的大小,方向和其他细节。对于在开发应用程序时需要上下文的开发人员而言,此工具是救生员。 MediaQuery的功能使开发人员在创建响应式布局时可以看到全局。这种方法不同于尝试开发具有有限障碍和尺寸指南的响应式布局。

使用DevTools和Flutter Inspector窗口小部件进行调试

Google建议您使用多种选项来调试和测试响应式应用程序。 DevTools在浏览器中运行,并提供开发人员在测试其应用程序功能时会寻找的多种常用功能。您可以将其源代码级调试器与以树形形式查看不同窗口小部件的窗口小部件检查器一起使用。 Google建议以调试模式或配置文件模式(而非发布模式)运行此工具,以轻松查找应用程序问题。

Flutter Inspector还是一种可用于检查您的 Flutter小部件树 同时了解您现有的布局和调试布局问题。该工具是在视觉上调试应用程序或在发布前检查窗口小部件的理想选择。

随着您的应用程序变得越来越复杂,Flutter窗口小部件检查器是宝贵的资源,可帮助您确定在何处创建窗口小部件以及它们在设计中的位置。您可能还需要根据应用的目的和预期的用户目标来调整此布局。

点按进入Flutter开发人员的Google社区 

Google社区中遍布Flutter开发人员,他们可以帮助您克服开发难题,以构建所需的应用程序。您可以在线浏览各种开发小组,以找到有关特定问题或行业内其他人提出的问题的讨论。

Google强调Flutter内部社区的价值。您可以加入Flutter社区闲暇频道,也可以参加针对Flutter主题的Meetup活动。您还可以通过Reddit和Twitter等平台与其他人聊天。如果遇到任何问题,可以使用多种资源来帮助您创建响应式布局。

扑是为了 应用开发 对于基本的程序员和站点经理来说,不那么令人头疼。使用提供的工具和活跃的Google社区,您可以快速解决问题并创建一个引人入胜的应用程序,您的所有客户都将渴望使用。

在这里订阅

Join the list of our 42,000+ 订阅者,可以直接在其收件箱中收到我们的最新文章,提示/技巧和竞赛详细信息。免费。

广告

享受免费的电子邮件更新