[Flutter翻译]宣布Flutter对可折叠设备的支持

Sunbreak
1,745 阅读5分钟

原文地址：devblogs.microsoft.com/surface-duo…

原文作者：devblogs.microsoft.com/surface-duo…

发布时间：2021年3月3日, 2021

Flutter是当今发展最快的框架之一，当然也是构建惊人应用的强大工具包，这也是我们增加可折叠支持的原因。

今天早些时候，微软在谷歌的Flutter Engage上宣布了Flutter的可折叠支持预览。我们热爱Flutter和可折叠设备，并希望开发者在使用这两者时能有最好的体验。我们正在为Flutter做出贡献，使其具有可折叠功能，本文将详细介绍新的内容。

请注意，对可折叠设备的支持还没有合并到Flutter repo中。我们首先希望听取您的反馈，您可以在框架PR和引擎PR关闭之前提出反馈。我们的目标是使您能够轻松地为所有可折叠设备构建惊人的体验。

可折叠设备的类型

目前已经有许多类型的可折叠手机。有些有柔性显示屏，可以弯曲和卷曲。微软Surface Duo有两个独立的显示屏，通过一个铰链连接。在所有情况下，你的应用程序继续看到一个更大的单一屏幕，"显示功能 "如铰链挡住了部分显示屏。

了解更多关于Surface Duo的信息，以及它是如何重新想象生产力的。你的应用程序将如何利用额外的空间？要进行实验，请看一下Surface Duo模拟器。

显示功能是显示器上可以不工作或被阻挡的区域。如果你使用SafeArea小组件来避免显示屏被遮挡，你的应用程序就已经意识到了一种显示特征。我们添加支持的三种类型的显示功能是切口、铰链和折叠。

image.png

切口位于显示屏的边缘，通常容纳摄像头系统。

image.png

铰链是设备的两个显示屏之间的一个物理分隔物。

image.png

你可以把褶皱看成是一个宽度为零的铰链。它告诉我们柔性显示屏有折痕的地方。

如需完整的参考，请从显示功能文档中了解更多。

MediaQuery中的新内容

显示特征是显示器的属性。这种信息是由MediaQuery提供的。我们正在添加

  • displayFeatures - 一个所有显示特征的列表。
  • 铰链--一种了解铰链信息的简单方法。

从三种类型的显示特征中，切口和折叠类型将被较少使用。你已经使用SafeArea来避免切口特征，你不需要避免折叠特征，因为显示屏是连续的。

当设备被折叠时，MediaQuery会改变，你的小部件会自动重建。

final hinge = MediaQuery.of(context).hinge;
if (hinge==null) {
   print('No hinge');
} else {
   print('Hinge is ${hinge.bounds.width} logical pixels wide');
}

image.png

关于完整的参考资料，请从MediaQuery文档中了解更多。

对话框和模态路线

对话框默认显示在屏幕的中间位置。在有铰链的设备上，对话框会出现在第一个屏幕上，这对于LTR配置来说是左边。我们为showDialog添加了可选的参数screen，允许你覆盖这一行为。上下文或弹出式菜单默认情况下是避开铰链的。在双横屏模式下，第一个屏幕是最上面的那个。

你可能在你的应用程序中有你自己的模式或弹出式路由类，你想使其 "具有铰链意识"。我们提供了一个叫做HingeAvoidingModalWrapper的部件，你可以把它添加到你的路由布局的顶部，使其避免铰链。

showDialog(
   context: context,
   builder: (_) => AlertDialog(
      title: Text("Hinge Aware Dialog"),
      content: Text("Going on the right screen"),
   ),
   screen: 1, // By default, this is 0
);

image.png

上面的截图取自Flutter Gallery，我们对其进行了增强，以支持双屏布局。通过查看HingeAwarePopupRoute文档，了解更多关于使你的路线具有铰链意识的信息。

双窗格小部件

在许多情况下，调整你的布局以支持双屏设备就像添加TwoPane一样简单，这是一个可以根据可用空间显示一个或两个部件的部件。它提供了一个简单的方法来放大你的设计，不仅仅是为两个屏幕，也为更大的屏幕如平板电脑和台式机。这个例子应该能给你一个提示，说明它是如何工作的。

Widget build(BuildContext context) {
   return TwoPane(
      pane1: _widgetA(),
      pane2: _widgetB(),
      paneProportion: 0.3,
      panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both : TwoPanePriority.pane1,
   );
}

image.png

panePriority属性使手机版只显示两个窗格中的一个，因为空间有限。如果你看一下平板电脑版本，你会发现小组件A只占了屏幕的30%。这是给paneProportion的值。在双屏设备上，这两个属性都被忽略了，小组件A和B各占一个屏幕。

TwoPane有很多有用的属性，我们鼓励你阅读文档以了解更多。

下一步是什么

我们希望你能对框架PR和引擎PR提供反馈。我们迫不及待地想看到Flutter的开发者用这种新的能力来构建什么。另外，您可以使用我们的反馈论坛提问或告诉我们您的项目，或在Twitter上给我们留言@surfaceduodev。

请参加北京时间2021年3月4日星期四上午9点的Flutter社区问答会议（Flutter Engage活动的第二天），讨论可折叠增强功能。您还可以在北京时间3月5日星期五上午11点在Twitch和北京时间3月25日星期四下午1点在微软学习启动空间与我们聊天。

微软并没有就此止步。使用Flutter为可折叠设备构建惊人的应用程序应该是很容易和有趣的，我们接下来的重点领域将是导航、代码实验室和更多的组件来帮助开发者。您的反馈对于决定我们下一步将建立什么非常重要。

www.deepl.com 翻译

avatar
文章
阅读
粉丝