专业的编程技术博客社区

网站首页 > 博客文章 正文

Flutter实战经验(十二):不同平台操作体验的差异和适配(一)

baijin 2025-05-23 15:15:04 博客文章 2 ℃ 0 评论

1、适配哲学

平台适配通常有两种情形:

(1)操作系统所特有的操作体验(例如文本编辑和滚动)。如果操作体验与操作系统不一致,则通常会被认为是“错误的”。

(2)使用 OEM 提供的 SDK 实现的功能体验(例如 iOS 常使用的选项卡, Android 使用 android.app.AlertDialog 显示一个提示窗口)。

本文囊括了 Flutter 为解决情形(1)而提供的覆盖 Android 和 iOS 的自动适配。

对于情形(2),Flutter 提供了一些工具可以生成符合平台习惯的体验,但是不会根据平台自动适配,需要根据 App 设计来手工选择。

如果一个应用需要在 Android 和 iOS 不同架构上使用相同的代码,请参阅 platform_design 这份代码示例。

2. 页面导航

Flutter 分别为 Android 和 iOS 提供了各自平台的导航模式,并根据当前平台自动适配导航转场动画。

2.1 导航转场动画

Android 平台,默认提供的 Navigator.push() 转场动画模仿了 startActivity() 的动画,即一种自下而上的动画效果。

iOS 平台:

  • iOS 的 Navigator.push() API 提供了 iOS 上的 Show 转场动画(也被成为 Push 转场动画),即根据语言的方向设置,执行一种从后到前的滚动动画效果。在显示新页面的时候,原来的页面也会沿着相同的方向进行视差滚动。
  • 当显示一个页面,且 PageRoute.fullscreenDialog 是 true 的时候, iOS 提供了另外一种自下而上的动画效果。这个动画通常被用在展示全屏模态页,也被成为 iOS 上的 Present 转场动画或 Modal 转场动画。

2.2 不同平台的转场动画细节

Android 平台上,根据你的操作系统版本差异,有两种不通的转场动画:

  • API 28 版本之前的系统,提供了一种自下而上 滚动并淡出 的动画效果。
  • API 28 和以后的系统,则提供了另外一种自下而上 滚动并反向翻转 的动画效果。

当在 iOS 平台上使用 Push 转场特效的时候, Flutter 内置的 CupertinoNavigationBar 和
CupertinoSliverNavigationBar 会自动的给当前页下一页的子组件使用正确的动画效果(CupertinoNavigationBar 或者
CupertinoSliverNavigationBar)。

2.3 返回导航

Android 平台,通常操作系统的返回按钮触发的事件会发给 Flutter,并弹出 WidgetsApp 路由的最顶端。

iOS 平台,从屏幕边缘的轻扫手势会弹出路由的最顶端。

3. 滚动

滚动是不通平台提供独有体验非常重要的一环,Flutter 会根据当前的平台自动适配滚动体验。

3.1 物理仿真

Android 和 iOS 平台都提供了非常复杂的滚动物理仿真,因而很难用语言来描述。通常来说,iOS 的滚动通常提供更多的分量和动态的阻力;而 Android 则更多的使用静态的阻力。所以,iOS 随着滚动慢慢的达到高速,且不会突然的停止,而且在慢速的时候显得更顺滑。

3.2 滚动边界行为

Android 平台,滚动达到边界的时候,会显示 滚动灰色指示 (具体颜色根据 Material 主题而有所不同)。

iOS 平台,滚动达到边界的时候,会显示一个 滚动边界 的弹簧效果。

3.3 动量
iOS 平台,不停的按相同方向滚动会产生动量叠加,从而连续滚动速度会越来越快。在 Android 平台上没有对应的行为。

3.4 返回顶部

iOS 平台,点击操作系统的状态栏,主要的滚动条控制器会滚动到顶部。 Android 没有对应的行为。

4. 排版

当使用 Material package 的时候,排版会根据平台自动使用对应的字体。Android 平台会使用 Roboto 字体,而 iOS 则会使用系统自带的 San Francisco 字体。

当使用 Cupertino 包的时候,默认主题 会一直使用 San Francisco 字体。

San Francisco 字体的授权限制了它只能被用在运行于 iOS、macOS 和 tvOS 平台上的软件。因此当运行在 Android 平台的时候,即使强制覆盖系统平台为 iOS 或者使用 Cupertino 默认主题,都会使用对应的替代字体。

5. 图标
当使用 Material 包的时候,根据平台不通,图标的具体样式会有差别。举例来说,更多按钮的图标,Android 上是竖直的三个点而 iOS 是横着的三个点;退回按钮,iOS 是一个简单的 V 型标记,而 Android 平台,V 型标记有个短横线。

篇幅过长,剩下触摸反馈、文本编辑 下一篇在补充上来。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表