本文由 简悦SimpRead 转码，原文地址 blog.whidev.com
如何用Flutter为桌面创建一个自适应的应用程序，为macOS和Win......，有不同的UI设计。
为这两个平台建立Shortcut Keeper应用程序，同时注意使其看起来和感觉都是原生的。
编辑：这篇文章已经上了Hacker News，所以你也可以查看讨论[这里]（news.ycombinator.com/item?id=291…
可以说，使用Flutter桌面来创建Shortcut Keeper应用非常顺利！该应用程序现在可以在Mac App Store和Microsoft Store上使用，而且它已经有一个专门的受众，认为它在他们的日常工作中很有用。
在上一篇文章中，我着重介绍了我是如何利用Flutter及其生态系统在如此短的时间内开发并发布该应用的（macOS版本约1个月，Windows版本约2周）。
在这里，我将尝试介绍使用Flutter桌面的另一个巨大好处。**能够建立一个具有符合底层平台设计标准的用户界面的应用程序。
正如你所看到的，Shortcut Keeper被打造为一个自适应的桌面应用程序，为macOS和Windows提供了不同的UI设计，同时使用一个代码库。
macOS（顶部）和Windows（底部）的快捷方式保存器。
我还将包括一些关于如何实现这些设计的提示，并提供有用的资源。
为什么任何人都应该建立一个自适应桌面应用程序
用户希望他们系统上的应用与他们日常使用的其他应用行为相似。 每个平台上都有特定的规范和习惯，应用开发者可以轻松地遵循和复制，并改善用户的应用体验。
一个经典的例子是，在Windows上，"确认 "按钮传统上是放在左边的，而在macOS上则相反：。
这些看起来都是小事，但它们最终会对用户在整个应用中的导航效率产生影响。
使用自适应用户界面设计来构建应用程序的另一个论点是，你可以立即利用每个平台的最佳设计实践。就桌面应用程序而言，这意味着要遵循苹果的人机界面指南和微软的流畅设计语言。我觉得你最好向最好的人学习，并遵循他们经过战斗检验的实施方案。
最后，这有助于建立信任。 一个习惯了Finder、Notes或Safari等应用的设计的macOS用户，会发现自己在使用具有类似的按钮、工具栏、文本字段等的应用时很自如。
Notes应用程序和Shortcut Keeper之间的相似之处，左侧的侧边栏和顶部栏的图标按钮。
这在桌面应用程序的背景下更有意义，因为大多数用户不会使用多个操作系统，而是长期绑定在一个系统上。
两个小部件库可以节省大量的工作
正如我在上一篇文章中解释的那样，如果没有这些强烈推荐的软件包，我就无法实现这种设计和行为。
它们都提供了大量有用的UI部件，如按钮、下拉菜单、列表瓦片等，并提供了一个基本的布局支架来工作。 每一个都试图紧跟各自平台的设计语言，所以真正的挑战是要。
- 让这两个库混合在同一个代码库中，并处理所有整合的条件逻辑。
- 在我需要特殊功能的地方，对每个库进行扩展或定制。
所以，让我再列举一些特定平台UI设计的例子，以及我是如何在Flutter旁边使用这些库来构建Shortcut Keeper的UI。
比较macOS和Windows上的UI元素
下面是两个平台上的Shortcut Keeper应用的主屏幕。
让我们看看他们两个的主要区别，以及每个UI组件在macOS和Windows版本中的区别。
标题栏和图标按钮
在应用程序的用户界面的顶部部分。
- 在macOS上，应用程序的主要操作按钮在最上面，而在Windows上，它们被放在主要部分里面。这符合平台规范，如上图所示的苹果笔记应用，而在Windows上，顶层的chrome通常留有空白，只显示应用的名称和图标。
- 图标按钮（删除、编辑、添加）在Windows上有一个额外的文本标签。在macOS版本上，其设计更加丰富多彩。
在macOS（顶部）和Windows（底部）上的Shortcut Keeper的顶部部分。
按钮、文本字段和复选框
在添加新的快捷方式时，有一个选项可以手动选择快捷方式的键盘组合。这里是两个平台上的屏幕。
The Windows上的新快捷方式对话框。
The macOS上的新快捷方式对话框。
我们在这里可以看到。
- Windows上的 "保存快捷方式 "按钮出现在左边，与macOS相反，它在右边。
- Windows上的按钮比macOS上的按钮更具矩形。
- 检查框和文本字段在这两个平台上也有不同的设计。
显示/隐藏对话框动画
动画主要是在导航应用程序的屏幕或对话框进入视野时使用。它们在两个平台上是相当不同的。
在Windows上，你可以看到。
- 各种屏幕都有一个从后到前的放大动画，与其他微软应用程序一致。还注意到侧边栏最左边的垂直线的很酷的移动效果。
- 对话框出现时也有类似的动画，并且在活动时也应用了阴影背景。
在macOS上。
- 导航动画更快、更直接。
- 对话框出现时有一个弹跳动画，并对UI的其他部分应用了一个发白的背景。
字体和排版
我选择使用每个系统的默认字体系列，所以在macOS上是San Francisco，在Windows上是Segoe UI。
我决定保持侧边栏和带有快捷方式列表的主区域基本相同，以实现它们之间的外观一致。
当然，还有其他一些小的区别要谈；甚至应用程序的标志也是不同的，因为在Windows中使用命令符号是没有意义的。
该应用程序在macOS和Windows上的图标。
现在，来解释一下我是如何用Flutter将这些不同的设计变成现实的。
将应用程序拆成两个
最初的步骤是让应用程序的main.dart决定建立哪种类型的应用程序：用于macOS的MacosApp或用于Windows的FluentApp。这是用一个简单的条件完成的。
这是必须的，以便能够使用每个库的自定义部件，就像Material部件在使用Flutter的默认Material UI时，希望至少有一个Material祖先一样。
也有另一种方法来做这种分割，同时受益于Flutter的依赖关系树摇动。我将在未来的一篇技术性更强的文章中讨论这个问题。
混合macOS和Windows小部件：平台感知的小部件
对于在两个软件包中都可以作为部件使用的UI组件，我选择了创建我自己的 "平台感知 "部件。 例如，这里是这种部件的最简单的实现，一个平台文本字段部件。
一个PlatformTextField无状态部件的构建函数。
它本质上是一个简单的分叉，为每个平台选择使用哪个库的widget，最大限度地重复使用代码。这对每个平台的渲染是不同的。
MacosTextField在上面，TextBox在下面。
这两个库都还在开发阶段，所以有些情况下没有直接适合每个平台的widget来使用。在这种情况下，我不得不提供我的自定义widget实现，至少在达到功能对等之前。
PlatformDropdown无状态部件的构建函数。请注意，macOS的实现是建立在Flutter默认的下拉菜单上的。
在这里，我试着为缺失的macos_ui版本实现我自己的下拉部件。
fluent_ui的左边的ComboBox，以及我自己的macOS版本的下拉部件。
扩展和定制UI库
当然，macos_ui和fluent_ui都是为了提供基本的布局和部件，作为工作的起点。在Shortcut Keeper的用户界面中，有一些地方我需要自己的自定义组件，这些组件对应用程序的功能至关重要。
这方面的一个例子是应用程序侧边栏的我的快捷方式部分，它允许用户按应用程序或标签过滤快捷方式列表。为了保持一致性，我需要这个功能在两个平台上都能使用。
Windows版本中的 "我的快捷方式 "部分。
然而，我发现fluent_ui中的侧边栏部分是用NavigationPane小部件实现的，它只能接受一组特定的小部件作为它的孩子。
所接受的类型列表不能满足我对侧边栏的要求。
为了解决这个问题，并让我自己的自定义widget显示在侧边栏中，我使用了我自己的分叉库并对其进行了自定义。在我自己的版本中，我实现了一个简单的CustomPane部件，它只是建立了它的孩子，覆盖了NavigationPane项目的初始限制。
CustomPaneItem小组件将被用作NavigationPane的子项，并建立任何它的子项参数。
因此，我能够使用与macOS版本相同的侧边栏小部件，并增加代码的重用性。
现在 AllAppsToggle部件可以在 NavigationPane（侧边栏）中使用。
这种库的扩展也将成为原始包的一个很好的补充，所以这是我要开一个问题，以帮助它的发展。
最后的结果是
最后，使用上述软件包和技术，我能够创建一个在两个平台上功能完全相同的应用程序，同时尊重它们的设计原则和规范。
以下是该应用在macOS和Windows上的一些对比截图：
快捷键屏幕(macOS)
快捷键屏幕(Windows)
黑暗的主屏幕 (macOS)
黑暗的主屏幕（Windows）
新的快捷方式对话框(macOS)
新的快捷方式对话框 (Windows)
设置屏幕 (macOS)
设置屏幕 (Windows)
删除对话框 (macOS)
删除对话框(Windows)
有用的资源
我真的希望这篇文章和它的资源被证明对任何想用Flutter桌面构建应用程序的人都是有用的
在这整个努力中，我遇到了一些伟大的指南和包。
文章/文档。
- Building adaptive apps 来自Flutter文档。
- 苹果的【macOS设计主题】(developer.apple.com/design/huma…
- 微软的Windows应用程序的设计指南和XAML控件库。
软件包/开放源代码项目。
- Flutter Gallery的repo。
- flutter_platform_widgets，它在根据平台选择部件方面做了类似的工作，但针对iOS和Android（Cupertino和Material UI）。
- macos_ui和fluent_ui，它们在这里被广泛使用。
- bitsdojo_window，这是一个非常有用的软件包，用于为每个平台定制窗口的外观。
- msix，为微软商店建立所需的应用程序安装程序。
感谢您的阅读! 这里有一张我的猫的照片：。
